"use client";
|
|
import Link from 'next/link';
|
import { useState } from 'react';
|
|
const Sidebar = () => {
|
const [activeGroup, setActiveGroup] = useState('user');
|
|
const menuGroups = {
|
user: [
|
{ icon: '👤', label: '个人中心', href: '/user/profile' },
|
{ icon: '📊', label: '数据统计', href: '/user/stats' },
|
{ icon: '⚙️', label: '账户设置', href: '/user/settings' },
|
],
|
order: [
|
{ icon: '📦', label: '订单管理', href: '/order/list' },
|
{ icon: '🚢', label: '物流跟踪', href: '/order/tracking' },
|
{ icon: '💰', label: '费用中心', href: '/order/billing' },
|
],
|
};
|
|
return (
|
<aside className="hidden md:flex flex-col w-1/4 bg-white border-r border-gray-200 min-h-screen pt-16">
|
<div className="p-4">
|
<div className="space-y-4">
|
{/* 用户中心组 */}
|
<div>
|
<button
|
onClick={() => setActiveGroup('user')}
|
className={`w-full text-left p-2 rounded-lg ${
|
activeGroup === 'user' ? 'bg-[#2F3C7E] text-white' : 'text-gray-700 hover:bg-gray-100'
|
}`}
|
>
|
用户中心
|
</button>
|
{activeGroup === 'user' && (
|
<div className="ml-4 mt-2 space-y-2">
|
{menuGroups.user.map((item) => (
|
<Link
|
key={item.href}
|
href={item.href}
|
className="flex items-center p-2 text-gray-600 rounded-lg hover:bg-gray-100"
|
>
|
<span className="mr-2">{item.icon}</span>
|
{item.label}
|
</Link>
|
))}
|
</div>
|
)}
|
</div>
|
|
{/* 订单管理组 */}
|
<div>
|
<button
|
onClick={() => setActiveGroup('order')}
|
className={`w-full text-left p-2 rounded-lg ${
|
activeGroup === 'order' ? 'bg-[#2F3C7E] text-white' : 'text-gray-700 hover:bg-gray-100'
|
}`}
|
>
|
订单管理
|
</button>
|
{activeGroup === 'order' && (
|
<div className="ml-4 mt-2 space-y-2">
|
{menuGroups.order.map((item) => (
|
<Link
|
key={item.href}
|
href={item.href}
|
className="flex items-center p-2 text-gray-600 rounded-lg hover:bg-gray-100"
|
>
|
<span className="mr-2">{item.icon}</span>
|
{item.label}
|
</Link>
|
))}
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
</aside>
|
);
|
};
|
|
export default Sidebar;
|
