111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
BarChartIcon,
|
|
HomeIcon,
|
|
PersonIcon,
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon
|
|
} from '@radix-ui/react-icons';
|
|
|
|
interface NavItemProps {
|
|
href: string;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
isCollapsed: boolean;
|
|
isActive?: boolean;
|
|
}
|
|
|
|
const NavItem = ({ href, label, icon, isCollapsed, isActive }: NavItemProps) => {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`flex items-center p-2 rounded-lg ${
|
|
isActive
|
|
? 'bg-blue-100 text-blue-700'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
} transition-all duration-200 group`}
|
|
>
|
|
<div className="w-6 h-6 flex items-center justify-center">{icon}</div>
|
|
{!isCollapsed && (
|
|
<span className={`ml-3 whitespace-nowrap transition-opacity duration-200 ${
|
|
isCollapsed ? 'opacity-0 w-0' : 'opacity-100'
|
|
}`}>
|
|
{label}
|
|
</span>
|
|
)}
|
|
{isCollapsed && (
|
|
<span className="sr-only">{label}</span>
|
|
)}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export function Sidebar() {
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
const toggleSidebar = () => {
|
|
setIsCollapsed(!isCollapsed);
|
|
};
|
|
|
|
const navigation = [
|
|
{ name: 'Dashboard', href: '/dashboard', icon: <HomeIcon className="w-5 h-5" /> },
|
|
{ name: 'Analytics', href: '/analytics', icon: <BarChartIcon className="w-5 h-5" /> },
|
|
{ name: 'Account', href: '/account', icon: <PersonIcon className="w-5 h-5" /> },
|
|
];
|
|
|
|
return (
|
|
<div className={`flex flex-col h-full transition-all duration-300 ${
|
|
isCollapsed ? 'w-16' : 'w-64'
|
|
} bg-white border-r border-gray-200 relative`}>
|
|
{/* 顶部Logo和标题 */}
|
|
<div className="flex items-center p-4 border-b border-gray-200">
|
|
<div className="flex-shrink-0 flex items-center justify-center w-8 h-8 bg-blue-500 text-white rounded">
|
|
<span className="font-bold">S</span>
|
|
</div>
|
|
{!isCollapsed && (
|
|
<span className="ml-3 font-medium text-gray-900 transition-opacity duration-200">
|
|
ShortURL Analytics
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* 导航菜单 */}
|
|
<div className="flex-grow p-4 overflow-y-auto">
|
|
<ul className="space-y-2">
|
|
{navigation.map((item) => (
|
|
<li key={item.name}>
|
|
<NavItem
|
|
href={item.href}
|
|
label={item.name}
|
|
icon={item.icon}
|
|
isCollapsed={isCollapsed}
|
|
isActive={pathname?.startsWith(item.href)}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* 底部折叠按钮 */}
|
|
<div className="border-t border-gray-200 p-4">
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className="w-full flex items-center justify-center p-2 rounded-lg text-gray-500 hover:bg-gray-100"
|
|
aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
|
|
>
|
|
{isCollapsed ? (
|
|
<ChevronRightIcon className="w-5 h-5" />
|
|
) : (
|
|
<ChevronLeftIcon className="w-5 h-5" />
|
|
)}
|
|
{!isCollapsed && <span className="ml-2">Collapse</span>}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|