73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
import { motion } from 'framer-motion';
|
|
import { FaHome, FaMusic, FaShoppingBag, FaSignOutAlt, FaChartLine } from 'react-icons/fa';
|
|
import { useAdmin } from '@/lib/AdminContext';
|
|
|
|
export default function AdminSidebar() {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const { logout } = useAdmin();
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
router.push('/admin');
|
|
};
|
|
|
|
const menuItems = [
|
|
{ icon: FaChartLine, label: 'Dashboard', path: '/admin/dashboard' },
|
|
{ icon: FaMusic, label: 'Albums', path: '/admin/albums' },
|
|
{ icon: FaShoppingBag, label: 'Purchases', path: '/admin/purchases' },
|
|
{ icon: FaHome, label: 'Back to Site', path: '/' },
|
|
];
|
|
|
|
return (
|
|
<div className="w-64 bg-paper-sand border-r-2 border-paper-brown flex flex-col">
|
|
{/* Header */}
|
|
<div className="p-6 border-b-2 border-paper-brown">
|
|
<h1 className="text-2xl font-bold text-paper-dark border-b-4 border-paper-dark inline-block pb-1">
|
|
Admin Panel
|
|
</h1>
|
|
<p className="text-sm text-paper-gray mt-3">Parsa Music Store</p>
|
|
</div>
|
|
|
|
{/* Menu */}
|
|
<nav className="flex-1 p-4 space-y-2">
|
|
{menuItems.map((item) => {
|
|
const isActive = pathname === item.path;
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<motion.button
|
|
key={item.path}
|
|
whileHover={{ x: 4 }}
|
|
onClick={() => router.push(item.path)}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 border-2 transition-all ${
|
|
isActive
|
|
? 'bg-paper-brown text-paper-light border-paper-dark shadow-paper'
|
|
: 'text-paper-dark border-paper-brown/30 hover:bg-paper-light hover:border-paper-brown'
|
|
}`}
|
|
>
|
|
<Icon className="text-xl" />
|
|
<span className="font-medium">{item.label}</span>
|
|
</motion.button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Logout */}
|
|
<div className="p-4 border-t-2 border-paper-brown">
|
|
<motion.button
|
|
whileHover={{ x: 4 }}
|
|
onClick={handleLogout}
|
|
className="w-full flex items-center gap-3 px-4 py-3 border-2 border-red-400 text-red-700 hover:bg-red-100 transition-all"
|
|
>
|
|
<FaSignOutAlt className="text-xl" />
|
|
<span className="font-medium">Logout</span>
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|