97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
interface NavItem {
|
|
label: string;
|
|
icon: string;
|
|
active?: boolean;
|
|
href: string;
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{ label: 'Dashboard', icon: '📊', href: '/dashboard' },
|
|
{ label: 'Ingredients', icon: '📦', active: true, href: '/dashboard/ingredients' },
|
|
{ label: 'Categories', icon: '🏷️', href: '/dashboard/categories' },
|
|
{ label: 'Subcategories', icon: '🔖', href: '/dashboard/subcategories' },
|
|
{ label: 'Suppliers', icon: '🚚', href: '/dashboard/suppliers' },
|
|
{ label: 'Settings', icon: '⚙️', href: '/dashboard/settings' },
|
|
];
|
|
|
|
interface SidebarProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function Sidebar({ isOpen, onClose }: SidebarProps) {
|
|
return (
|
|
<>
|
|
{/* Mobile overlay */}
|
|
{isOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
|
onClick={onClose}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<aside
|
|
className={`fixed left-0 top-0 h-screen w-64 bg-white border-r border-gray-200 flex flex-col z-50 transition-transform duration-300 lg:translate-x-0 ${
|
|
isOpen ? 'translate-x-0' : '-translate-x-full'
|
|
}`}
|
|
>
|
|
{/* Logo */}
|
|
<div className="p-6 border-b border-gray-200 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">KitchenOS</h1>
|
|
<p className="text-sm text-gray-500 mt-1">Inventory Management</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="lg:hidden text-gray-500 hover:text-gray-700"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-4 overflow-y-auto">
|
|
<ul className="space-y-1">
|
|
{navItems.map((item) => (
|
|
<li key={item.label}>
|
|
<a
|
|
href={item.href}
|
|
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
|
|
item.active
|
|
? 'bg-blue-50 text-blue-600 font-medium'
|
|
: 'text-gray-700 hover:bg-gray-50'
|
|
}`}
|
|
onClick={() => onClose()}
|
|
>
|
|
<span className="text-xl">{item.icon}</span>
|
|
<span>{item.label}</span>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
|
|
{/* User Profile */}
|
|
<div className="p-4 border-t border-gray-200">
|
|
<div className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
|
|
JD
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-gray-900">John Doe</p>
|
|
<p className="text-xs text-gray-500">Head Chef</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|