Setup initial project

packages/web/src/components/layout/Sidebar.tsx

@@ -0,0 +1,37 @@
+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>
+  );
+}