feat: KitchenStock light UI, Gemma 31B AI, supermarket store filters & 130+ vegan products

2026-07-26 20:08:16 +02:00
commit 83fcf6909c
81 changed files with 17001 additions and 0 deletions
@@ -0,0 +1,120 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import {
+  LayoutDashboard,
+  Boxes,
+  ShoppingCart,
+  UtensilsCrossed,
+  Sparkles,
+  Settings,
+  Heart,
+  LogOut,
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+export function Navbar() {
+  const pathname = usePathname();
+
+  const navLinks = [
+    { href: '/dashboard', label: 'Übersicht', icon: LayoutDashboard },
+    { href: '/inventory', label: 'Vorrat', icon: Boxes },
+    { href: '/shopping', label: 'Einkauf', icon: ShoppingCart },
+    { href: '/recipes', label: 'Rezepte', icon: UtensilsCrossed },
+    { href: '/ai-assistant', label: 'KI-Küche', icon: Sparkles },
+  ];
+
+  const handleLogout = () => {
+    document.cookie = 'kitchenstock_user=; path=/; max-age=0;';
+    toast.info('Abgemeldet');
+    window.location.href = '/login';
+  };
+
+  return (
+    <>
+      {/* Top Header - Desktop & Tablet */}
+      <header className="sticky top-0 z-40 w-full border-b border-emerald-100/80 bg-white/90 backdrop-blur-md transition-all shadow-2xs">
+        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+          {/* Logo & Household Badge */}
+          <Link href="/dashboard" className="flex items-center gap-3 group">
+            <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-tr from-emerald-600 to-teal-500 text-white font-bold text-lg shadow-md shadow-emerald-500/20 group-hover:scale-105 transition-transform">
+              🌱
+            </div>
+            <div>
+              <span className="font-extrabold text-lg tracking-tight text-foreground group-hover:text-emerald-600 transition-colors">
+                KitchenStock
+              </span>
+              <span className="hidden sm:flex items-center gap-1 text-[11px] font-bold text-emerald-700">
+                <Heart className="h-3 w-3 fill-current text-pink-500" /> Amy & Mandys Küche
+              </span>
+            </div>
+          </Link>
+
+          {/* Desktop Navigation Pills */}
+          <nav className="hidden md:flex items-center gap-1 rounded-2xl border border-emerald-100 bg-emerald-50/50 p-1.5 shadow-2xs">
+            {navLinks.map(link => {
+              const Icon = link.icon;
+              const isActive = pathname === link.href;
+              return (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={`flex items-center gap-2 rounded-xl px-3.5 py-2 text-xs font-bold transition-all ${
+                    isActive
+                      ? 'bg-emerald-600 text-white shadow-sm'
+                      : 'text-muted-foreground hover:bg-white hover:text-emerald-800'
+                  }`}
+                >
+                  <Icon className={`h-4 w-4 ${isActive ? 'text-white' : 'text-emerald-600'}`} />
+                  <span>{link.label}</span>
+                </Link>
+              );
+            })}
+          </nav>
+
+          {/* Right Actions */}
+          <div className="flex items-center gap-2">
+            <div className="hidden sm:flex items-center gap-1 rounded-xl bg-emerald-50 border border-emerald-200/60 px-3 py-1.5 text-xs font-extrabold text-emerald-800">
+              🌱 100% Vegan
+            </div>
+            <Link
+              href="/settings"
+              className="rounded-xl border border-emerald-200/70 bg-white p-2 text-muted-foreground hover:bg-emerald-50 hover:text-emerald-700 transition-colors shadow-2xs"
+              title="Einstellungen"
+            >
+              <Settings className="h-4 w-4" />
+            </Link>
+            <button
+              onClick={handleLogout}
+              className="rounded-xl border border-rose-200/70 bg-white p-2 text-muted-foreground hover:bg-rose-50 hover:text-rose-600 transition-colors shadow-2xs"
+              title="Abmelden"
+            >
+              <LogOut className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Mobile Bottom Navigation Bar */}
+      <nav className="fixed bottom-0 left-0 right-0 z-40 flex h-16 items-center justify-around border-t border-emerald-100 bg-white/95 backdrop-blur-md md:hidden px-2 shadow-lg">
+        {navLinks.slice(0, 4).map(link => {
+          const Icon = link.icon;
+          const isActive = pathname === link.href;
+          return (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`flex flex-col items-center justify-center gap-0.5 py-1 px-3 rounded-2xl transition-all ${
+                isActive ? 'text-emerald-700 font-bold scale-105' : 'text-muted-foreground font-medium'
+              }`}
+            >
+              <Icon className={`h-5 w-5 ${isActive ? 'text-emerald-600' : 'text-muted-foreground'}`} />
+              <span className="text-[10px]">{link.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+    </>
+  );
+}