38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{ label: 'Dashboard', href: '/dashboard' },
|
||
|
|
{ label: 'Products', href: '/products' },
|
||
|
|
{ label: 'Recipes', href: '/recipes' },
|
||
|
|
{ label: 'Pantry', href: '/pantry' },
|
||
|
|
{ label: 'Meal Plans', href: '/meal-plans' },
|
||
|
|
{ label: 'Shopping', href: '/shopping' },
|
||
|
|
{ label: 'Settings', href: '/settings' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function Sidebar() {
|
||
|
|
return (
|
||
|
|
<aside className="flex w-64 flex-col border-r bg-white">
|
||
|
|
<div className="flex h-16 items-center border-b px-6">
|
||
|
|
<Link href="/dashboard" className="text-xl font-bold text-primary-700">
|
||
|
|
MeshiTrack
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<nav className="flex-1 overflow-y-auto p-4">
|
||
|
|
<ul className="space-y-1">
|
||
|
|
{navItems.map((item) => (
|
||
|
|
<li key={item.href}>
|
||
|
|
<Link
|
||
|
|
href={item.href}
|
||
|
|
className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors"
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|