File size: 1,802 Bytes
0bfe2e3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
'use client';

import { useStatus } from '../context/status';
import { VerticalMenu } from './ui/vertical-menu/vertical-menu';
import Image from 'next/image';
import { ReactNode } from 'react';
import {
  FunnelIcon,
  SortAscIcon,
  CloudIcon,
  PuzzleIcon,
  SettingsIcon,
  SaveIcon,
  ImportIcon,
  InfoIcon,
} from 'lucide-react';

const menuItems = [
  {
    name: 'Services',
    iconType: CloudIcon,
    isCurrent: true,
  },
  {
    name: 'Addons',
    iconType: PuzzleIcon,
  },
  {
    name: 'Filters',
    iconType: FunnelIcon,
  },
  {
    name: 'Sorting',
    iconType: SortAscIcon,
  },
  {
    name: 'Miscellaneous',
    iconType: SettingsIcon,
  },
  {
    name: 'Save & Install',
    iconType: SaveIcon,
  },
  {
    name: 'Import/Export',
    iconType: ImportIcon,
  },
  {
    name: 'About',
    iconType: InfoIcon,
  },
];

export default function SidebarLayout({ children }: { children: ReactNode }) {
  const { status } = useStatus();

  return (
    <div className="flex h-screen">
      <aside className="w-64 bg-gray-900 text-white flex flex-col">
        <div className="h-24 flex flex-col items-center justify-center border-b border-gray-800 gap-1">
          <Image
            src="/logo.png"
            alt="Logo"
            width={40}
            height={40}
            className="rounded-lg"
          />
          <div className="text-sm text-gray-400">v{status?.version}</div>
        </div>
        <nav className="flex-1 p-4">
          <VerticalMenu
            items={menuItems}
            onItemSelect={(item) => {
              console.log(`Selected ${item.name}`);
              // Handle navigation here
            }}
          />
        </nav>
      </aside>
      <main className="flex-1 bg-gray-100 overflow-auto">{children}</main>
    </div>
  );
}