128 lines
3.1 KiB
TypeScript
128 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import {
|
|
LayoutDashboard,
|
|
Users,
|
|
Ticket,
|
|
BarChart3,
|
|
Gift,
|
|
Menu,
|
|
X
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
interface NavItem {
|
|
label: string;
|
|
href: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const navItems: NavItem[] = [
|
|
{
|
|
label: "Dashboard",
|
|
href: "/admin/dashboard",
|
|
icon: <LayoutDashboard className="w-5 h-5" />,
|
|
},
|
|
{
|
|
label: "Utilisateurs",
|
|
href: "/admin/utilisateurs",
|
|
icon: <Users className="w-5 h-5" />,
|
|
},
|
|
{
|
|
label: "Tickets",
|
|
href: "/admin/tickets",
|
|
icon: <Ticket className="w-5 h-5" />,
|
|
},
|
|
{
|
|
label: "Lots & Prix",
|
|
href: "/admin/lots",
|
|
icon: <Gift className="w-5 h-5" />,
|
|
},
|
|
{
|
|
label: "Données Marketing",
|
|
href: "/admin/marketing-data",
|
|
icon: <BarChart3 className="w-5 h-5" />,
|
|
},
|
|
{
|
|
label: "Tirages",
|
|
href: "/admin/tirages",
|
|
icon: <Gift className="w-5 h-5" />,
|
|
},
|
|
];
|
|
|
|
const isActive = (href: string) => {
|
|
return pathname === href;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile menu button */}
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-md bg-white shadow-md hover:bg-gray-50"
|
|
>
|
|
{isOpen ? (
|
|
<X className="w-6 h-6 text-gray-600" />
|
|
) : (
|
|
<Menu className="w-6 h-6 text-gray-600" />
|
|
)}
|
|
</button>
|
|
|
|
{/* Overlay for mobile */}
|
|
{isOpen && (
|
|
<div
|
|
className="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-30"
|
|
onClick={() => setIsOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<aside
|
|
className={`
|
|
fixed top-0 left-0 h-full bg-white shadow-lg z-40 transition-transform duration-300 ease-in-out
|
|
${isOpen ? "translate-x-0" : "-translate-x-full"}
|
|
lg:translate-x-0 lg:static
|
|
w-64
|
|
`}
|
|
>
|
|
<div className="flex flex-col h-full">
|
|
{/* Logo/Header */}
|
|
<div className="p-6 border-b border-gray-200">
|
|
<h2 className="text-xl font-bold text-gray-900">Admin Panel</h2>
|
|
<p className="text-sm text-gray-500 mt-1">Thé Tip Top</p>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-4 space-y-2">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => setIsOpen(false)}
|
|
className={`
|
|
flex items-center gap-3 px-4 py-3 rounded-lg transition-colors
|
|
${
|
|
isActive(item.href)
|
|
? "bg-blue-600 text-white"
|
|
: "text-gray-700 hover:bg-gray-100"
|
|
}
|
|
`}
|
|
>
|
|
{item.icon}
|
|
<span className="font-medium">{item.label}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
</div>
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|