2024-12-31 15:57:32 +08:00
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
2025-01-06 08:45:23 +08:00
|
|
|
import { NavItem } from '@nice/client';
|
2024-12-31 15:57:32 +08:00
|
|
|
|
|
|
|
|
interface SidebarProps {
|
|
|
|
|
navItems: Array<NavItem>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function Sidebar({ navItems }: SidebarProps) {
|
|
|
|
|
const navigate = useNavigate();
|
|
|
|
|
const location = useLocation();
|
|
|
|
|
return (
|
|
|
|
|
<motion.aside
|
|
|
|
|
initial={{ x: -300, opacity: 0 }}
|
|
|
|
|
animate={{ x: 0, opacity: 1 }}
|
|
|
|
|
exit={{ x: -300, opacity: 0 }}
|
|
|
|
|
transition={{ type: "spring", bounce: 0.1, duration: 0.5 }}
|
|
|
|
|
className="fixed left-0 top-16 bottom-0 w-64 bg-white border-r border-gray-200 z-40"
|
|
|
|
|
>
|
|
|
|
|
<div className="p-4 space-y-2">
|
|
|
|
|
{navItems.map((item, index) => {
|
|
|
|
|
const isActive = location.pathname === item.path;
|
|
|
|
|
return (
|
|
|
|
|
<motion.button
|
|
|
|
|
key={index}
|
|
|
|
|
whileHover={{ x: 5 }}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
navigate(item.path)
|
|
|
|
|
}}
|
|
|
|
|
className={`flex items-center gap-3 w-full p-3 rounded-lg transition-colors
|
|
|
|
|
${isActive
|
|
|
|
|
? 'bg-blue-50 text-blue-600'
|
|
|
|
|
: 'text-gray-700 hover:bg-blue-50 hover:text-blue-600'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{item.icon}
|
|
|
|
|
<span className="font-medium">{item.label}</span>
|
|
|
|
|
</motion.button>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
</motion.aside>
|
|
|
|
|
);
|
|
|
|
|
}
|
