Sidebar.tsx
5.73 KB
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
import React, { useState } from 'react';
import {
Tag,
MapPin,
Users,
Package,
FileText,
HelpCircle,
LogOut,
ChevronDown,
ChevronRight,
Layers,
Type,
FileBox,
Settings,
AlertTriangle,
ListTodo,
Activity,
Apple,
FileDigit,
Smartphone,
Receipt,
QrCode,
Code,
LayoutDashboard
} from 'lucide-react';
import { cn } from '../ui/utils';
import logo from "figma:asset/773f0c39e1986271e9144596caac519f934a6ae6.png";
interface SidebarProps {
currentView: string;
setCurrentView: (view: string) => void;
}
export function Sidebar({ currentView, setCurrentView }: SidebarProps) {
const [labelingOpen, setLabelingOpen] = useState(true);
const menuItems = [
{ name: 'Dashboard', icon: LayoutDashboard, type: 'item' },
{ type: 'header', name: 'MODULES' },
{
name: 'Labeling',
icon: Tag,
type: 'sub',
isOpen: labelingOpen,
toggle: () => setLabelingOpen(!labelingOpen),
children: [
{ name: 'Labels', icon: Tag },
{ name: 'Label Categories', icon: Layers },
{ name: 'Label Types', icon: Type },
{ name: 'Label Templates', icon: FileBox },
{ name: 'Multiple Options', icon: Settings },
]
},
{ name: 'Training', icon: ListTodo, type: 'item' },
{ name: 'Alerts', icon: AlertTriangle, type: 'item' },
{ name: 'Tasks', icon: ListTodo, type: 'item' },
{ name: 'Sensors', icon: Activity, type: 'item' },
{ name: 'Food Waste', icon: Apple, type: 'item' },
{ name: 'E-Label', icon: FileDigit, type: 'item' },
{ type: 'header', name: 'MANAGEMENT' },
{ name: 'Location Manager', icon: MapPin, type: 'item' },
{ name: 'Account Management', icon: Users, type: 'item' },
{ name: 'Menu Manager', icon: Package, type: 'item' },
{ name: 'Devices', icon: Smartphone, type: 'item', highlight: true },
{ name: 'Invoices', icon: Receipt, type: 'item' },
{ name: 'Reports', icon: FileText, type: 'item' },
{ name: 'QR Codes', icon: QrCode, type: 'item' },
{ name: 'API', icon: Code, type: 'item' },
{ name: 'Support', icon: HelpCircle, type: 'action' },
{ name: 'Log Out', icon: LogOut, type: 'action', isLogout: true },
];
return (
<div className="w-64 bg-[#1e3a8a] text-white flex flex-col h-full min-h-0 border-r border-blue-800 shadow-xl z-20 shrink-0">
<div className="shrink-0 flex items-center justify-center border-b border-blue-800/50 bg-white" style={{ height: 'var(--header-bar-height, 90px)' }}>
<img src={logo} alt="MedVantage" className="h-14 w-auto object-contain" />
</div>
<div className="flex-1 min-h-0 overflow-y-auto py-4" style={{ flexBasis: 0 }}>
<div className="px-3 space-y-1">
{menuItems.map((item, index) => {
if (item.type === 'header') {
return (
<div
key={index}
className="px-4 py-2 mt-4 text-xs font-semibold uppercase tracking-wider"
style={{ color: '#99CCFF' }}
>
{item.name}
</div>
);
}
if (item.type === 'sub') {
return (
<div key={index} className="space-y-1">
<button
onClick={item.toggle}
className={cn(
"w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium rounded-lg transition-colors text-white",
"hover:bg-blue-800/50"
)}
>
<div className="flex items-center gap-3">
<item.icon className="w-4 h-4" />
{item.name}
</div>
{item.isOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
</button>
{item.isOpen && (
<div className="pl-4 space-y-1">
{item.children?.map((child, childIndex) => (
<button
key={childIndex}
onClick={() => setCurrentView(child.name)}
className={cn(
"w-full flex items-center gap-3 px-4 py-2 text-sm font-medium rounded-lg transition-colors border-l-2",
currentView === child.name
? "bg-orange-500 border-orange-400 text-white"
: "border-transparent text-white hover:bg-blue-800/30 hover:text-white"
)}
>
<div className="w-1 h-1 rounded-full bg-current" />
{child.name}
</button>
))}
</div>
)}
</div>
);
}
const isAction = item.type === 'action';
const isLogout = 'isLogout' in item && item.isLogout;
return (
<button
key={index}
onClick={() => !isAction && setCurrentView(item.name)}
className={cn(
"w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors",
isLogout && "text-red-300 hover:bg-red-900/20",
!isLogout && (currentView === item.name
? "bg-orange-500 text-white shadow-md shadow-orange-900/20"
: "text-white hover:bg-blue-800 hover:text-white")
)}
>
<item.icon className="w-4 h-4" />
{item.name}
</button>
);
})}
</div>
</div>
</div>
);
}