884054fb
 “wangming”
项目初始化
|
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
|
import React, { useState } from 'react';
import {
LayoutDashboard,
Tag,
MapPin,
Users,
Package,
FileText,
HelpCircle,
LogOut,
ChevronDown,
ChevronRight,
Layers,
Type,
FileBox,
Settings
} from 'lucide-react';
import { cn } from '../ui/utils';
import { ScrollArea } from '../ui/scroll-area';
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 },
]
},
{ type: 'header', name: 'MANAGEMENT' },
{ name: 'Location Manager', icon: MapPin, type: 'item' },
|
|
884054fb
“wangming”
项目初始化
|
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
|
{ name: 'Reports', icon: FileText, type: 'item' },
{ name: 'Support', icon: HelpCircle, type: 'item' },
{ name: 'Log Out', icon: LogOut, type: 'item' },
];
return (
<div className="w-64 bg-[#1e3a8a] text-white flex flex-col h-screen border-r border-blue-800 shadow-xl z-20 shrink-0">
<div className="flex items-center justify-center border-b border-blue-800/50 bg-white px-4 shrink-0" style={{ height: 90 }}>
<img src={logo} alt="MedVantage" className="h-16 w-auto object-contain" />
</div>
<ScrollArea className="flex-1 py-4">
<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 text-blue-300 uppercase tracking-wider">
{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",
"hover:bg-blue-800/50 text-blue-100"
)}
>
<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-blue-800 border-blue-400 text-white"
: "border-transparent hover:bg-blue-800/30 text-blue-200 hover:text-white"
)}
>
<div className="w-1 h-1 rounded-full bg-current" />
{child.name}
</button>
))}
</div>
)}
</div>
);
}
return (
<button
key={index}
onClick={() => 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",
currentView === item.name
? "bg-blue-700 text-white shadow-md shadow-blue-900/20"
: item.name === 'Log Out'
? "text-red-300 hover:bg-red-900/20 hover:text-red-200"
: "text-blue-100 hover:bg-blue-800 hover:text-white"
)}
>
<item.icon className="w-4 h-4" />
{item.name}
</button>
);
})}
</div>
</ScrollArea>
</div>
);
}
|
平台端 门店，菜单，角色