Redesign nav: sticky horizontal scrollable category strip

19 categories can't fit in a fixed bottom tab bar. Replace with a
sticky horizontal pill strip that sits below the header, auto-scrolls
active tab into view via Intersection Observer, and shows emoji + label
at a readable size with teal active highlight.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/[lang]/page.tsx

@@ -20,24 +20,24 @@ export default async function MenuPage({
     <>
       <Header dict={dict} />
 
+      {/* Sticky category nav — renders directly below header via sticky positioning */}
+      <BottomTabBar categories={categories} lang={lang} />
+
       <main
         className="relative min-h-screen"
-        style={{
+        style={{ paddingTop: 'var(--header-h)', paddingBottom: '32px' }}
-          paddingTop: 'var(--header-h)',
-          paddingBottom: 'calc(var(--tabbar-h) + 8px)',
-        }}
       >
         {/* Hero gradient fade from header */}
         <div
           aria-hidden="true"
-          className="h-8 w-full"
+          className="h-6 w-full"
           style={{
             background:
-              'linear-gradient(180deg, rgba(31,20,10,0.12) 0%, transparent 100%)',
+              'linear-gradient(180deg, rgba(31,20,10,0.10) 0%, transparent 100%)',
           }}
         />
 
-        {/* Decorative welcome strip */}
+        {/* Welcome strip */}
         <div className="px-4 pt-2 pb-1">
           <div
             className="rounded-2xl px-4 py-3 flex items-center gap-3"
@@ -67,7 +67,6 @@ export default async function MenuPage({
           </div>
         </div>
 
-        {/* Category sections */}
         {categories.map((category) => (
           <CategorySection
             key={category.id}
@@ -84,8 +83,6 @@ export default async function MenuPage({
         message={dict.whatsapp.message}
         label={dict.whatsapp.label}
       />
-
-      <BottomTabBar categories={categories} lang={lang} />
     </>
   )
 }

app/globals.css

@@ -14,7 +14,7 @@
   --gold: #C8A850;
   --muted: #8A7265;
   --header-h: 68px;
-  --tabbar-h: 72px;
+  --catnav-h: 49px;
 }
 
 @theme inline {
@@ -138,7 +138,7 @@ body::after {
 
 /* ─── Category section ────────────────────────────── */
 .category-section {
-  scroll-margin-top: calc(var(--header-h) + 10px);
+  scroll-margin-top: calc(var(--header-h) + var(--catnav-h) + 8px);
 }
 
 .category-reveal {

components/BottomTabBar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import type { Category } from '@/data/menu'
 
 type Props = {
@@ -11,7 +11,9 @@ type Props = {
 export default function BottomTabBar({ categories, lang }: Props) {
   const l = lang as 'tr' | 'en'
   const [activeId, setActiveId] = useState<string>(categories[0]?.id ?? '')
+  const scrollRef = useRef<HTMLDivElement>(null)
 
+  /* ── Intersection Observer: aktif kategoriyi takip et ── */
   useEffect(() => {
     const observers: IntersectionObserver[] = []
 
@@ -25,9 +27,8 @@ export default function BottomTabBar({ categories, lang }: Props) {
             if (entry.isIntersecting) setActiveId(cat.id)
           })
         },
-        { rootMargin: '-20% 0px -75% 0px', threshold: 0 }
+        { rootMargin: '-15% 0px -80% 0px', threshold: 0 }
       )
-
       observer.observe(el)
       observers.push(observer)
     })
@@ -35,36 +36,62 @@ export default function BottomTabBar({ categories, lang }: Props) {
     return () => observers.forEach((o) => o.disconnect())
   }, [categories])
 
+  /* ── Aktif tab görünüme kaydır ── */
+  useEffect(() => {
+    if (!scrollRef.current) return
+    const activeEl = scrollRef.current.querySelector<HTMLElement>(
+      `[data-id="${activeId}"]`
+    )
+    if (!activeEl) return
+    activeEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
+  }, [activeId])
+
   return (
     <nav
-      className="tabbar-glass fixed bottom-0 left-0 right-0 z-40"
+      className="sticky z-30 bg-coffee-dark border-b border-white/[0.06]"
-      style={{ height: 'var(--tabbar-h)' }}
+      style={{ top: 'var(--header-h)' }}
+      aria-label="Kategori navigasyonu"
     >
-      <div className="flex items-start justify-around pt-2 h-full px-1">
+      {/* Scrollable pill strip */}
+      <div
+        ref={scrollRef}
+        className="flex gap-2 overflow-x-auto px-3 py-2.5"
+        style={{
+          scrollbarWidth: 'none',
+          msOverflowStyle: 'none',
+          WebkitOverflowScrolling: 'touch',
+        }}
+      >
         {categories.map((cat) => {
           const isActive = activeId === cat.id
           return (
             <a
               key={cat.id}
               href={`#${cat.id}`}
-              className="tab-item flex flex-col items-center gap-0.5 flex-1 py-1 rounded-lg relative"
+              data-id={cat.id}
+              className="flex-shrink-0 flex items-center gap-1.5 px-3 py-1.5 rounded-full transition-all duration-200 select-none"
+              style={
+                isActive
+                  ? {
+                      background:
+                        'linear-gradient(135deg, rgba(74,175,168,0.28), rgba(92,138,92,0.20))',
+                      border: '1px solid rgba(74,175,168,0.50)',
+                      boxShadow: '0 0 10px rgba(74,175,168,0.18)',
+                    }
+                  : {
+                      background: 'rgba(255,255,255,0.05)',
+                      border: '1px solid rgba(255,255,255,0.08)',
+                    }
+              }
             >
-              {/* Active pill background */}
-              {isActive && (
-                <span
-                  className="tab-pill absolute inset-x-1 inset-y-0"
-                  aria-hidden="true"
-                />
-              )}
-
               {/* Emoji */}
               <span
-                className="relative text-lg leading-none transition-transform duration-200"
+                className="text-base leading-none"
                 style={{
                   filter: isActive
-                    ? 'drop-shadow(0 0 6px rgba(74,175,168,0.60))'
+                    ? 'drop-shadow(0 0 4px rgba(74,175,168,0.55))'
                     : 'none',
-                  transform: isActive ? 'scale(1.15)' : 'scale(1)',
+                  transition: 'filter 0.2s',
                 }}
               >
                 {cat.emoji}
@@ -72,26 +99,36 @@ export default function BottomTabBar({ categories, lang }: Props) {
 
               {/* Label */}
               <span
-                className="relative font-body font-medium leading-none tracking-wide text-center truncate w-full text-center transition-colors duration-200"
+                className="font-body font-medium whitespace-nowrap"
                 style={{
-                  fontSize: '0.5rem',
+                  fontSize: '0.72rem',
-                  color: isActive ? '#4AAFA8' : 'rgba(245,240,232,0.32)',
+                  letterSpacing: '0.01em',
+                  color: isActive ? '#4AAFA8' : 'rgba(245,240,232,0.45)',
+                  transition: 'color 0.2s',
                 }}
               >
                 {cat.label[l]}
               </span>
-
-              {/* Active dot */}
-              {isActive && (
-                <span
-                  className="relative w-1 h-1 rounded-full bg-teal"
-                  aria-hidden="true"
-                />
-              )}
             </a>
           )
         })}
       </div>
+
+      {/* Sağ ve sol fade maskesi */}
+      <div
+        className="pointer-events-none absolute inset-y-0 left-0 w-4"
+        style={{
+          background:
+            'linear-gradient(to right, rgba(31,20,10,0.9), transparent)',
+        }}
+      />
+      <div
+        className="pointer-events-none absolute inset-y-0 right-0 w-6"
+        style={{
+          background:
+            'linear-gradient(to left, rgba(31,20,10,0.9), transparent)',
+        }}
+      />
     </nav>
   )
 }

components/MenuItemRow.tsx

@@ -28,7 +28,7 @@ export default function MenuItemRow({ item, lang, currency, index, isLast }: Pro
           boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.8)',
         }}
       >
-        {item.emoji}
+        {item.emoji || '✨'}
       </div>
 
       {/* Text */}
@@ -39,18 +39,22 @@ export default function MenuItemRow({ item, lang, currency, index, isLast }: Pro
         >
           {item.name[l]}
         </p>
-        <p
+        {item.description && (
-          className="font-body text-muted leading-relaxed mt-0.5 line-clamp-2"
+          <p
-          style={{ fontSize: '0.72rem' }}
+            className="font-body text-muted leading-relaxed mt-0.5 line-clamp-2"
-        >
+            style={{ fontSize: '0.72rem' }}
-          {item.description[l]}
+          >
-        </p>
+            {item.description[l]}
+          </p>
+        )}
       </div>
 
       {/* Price pill */}
-      <span className="price-pill flex-shrink-0">
+      {item.price !== undefined && (
-        {currency}{item.price}
+        <span className="price-pill flex-shrink-0">
-      </span>
+          {currency}{item.price}
+        </span>
+      )}
     </div>
   )
 }

data/menu.ts

@@ -2,10 +2,10 @@ export type LocalizedString = { tr: string; en: string }
 
 export type MenuItem = {
   id: string
-  emoji: string
+  emoji?: string
   name: LocalizedString
-  description: LocalizedString
+  description?: LocalizedString
-  price: number
+  price?: number
   highlight?: boolean
 }
 
@@ -20,234 +20,317 @@ export const WHATSAPP_NUMBER = '905XXXXXXXXXX'
 
 export const categories: Category[] = [
   {
-    id: 'starters',
+    id: 'kahvaltiliklar',
-    emoji: '🥗',
+    emoji: '🍳',
-    label: { tr: 'Başlangıçlar', en: 'Starters' },
+    label: { tr: 'Kahvaltılıklar', en: 'Breakfasts' },
     items: [
-      {
+      { id: 'k1', name: { tr: 'Sucuklu Yumurta', en: 'Eggs with Sucuk' }, description: { tr: 'Kaşar peynirli, çıtır domates', en: 'Kaşar cheese, crispy tomato' } },
-        id: 's1',
+      { id: 'k2', name: { tr: 'Menemen', en: 'Menemen' }, description: { tr: 'Domates, yeşil biber, 2 yumurta', en: 'Tomato, green pepper, 2 eggs' } },
-        emoji: '🥗',
+      { id: 'k3', name: { tr: 'Kaşarlı Menemen', en: 'Menemen with Kaşar Cheese' }, description: { tr: 'Rondanın 5 kaşar peyniri, domates, yeşil biber, çeşitli 2 yumurta', en: '5 portions of kaşar cheese, tomato, green pepper, 2 eggs' } },
-        name: { tr: 'Akdeniz Salatası', en: 'Mediterranean Salad' },
+      { id: 'k4', name: { tr: 'Sade Omlet', en: 'Plain Omelette' }, description: { tr: 'Çeşitme 2 yumurta, mezelemeniz kaşar peyniri', en: '2 eggs, kaşar cheese' } },
-        description: { tr: 'Domates, salatalık, zeytin, hellim peyniri', en: 'Tomato, cucumber, olives, halloumi' },
+      { id: 'k5', name: { tr: 'Mantarlı Omlet', en: 'Mushroom Omelette' }, description: { tr: 'Mantarlarla zenginleştirilmiş kaşar peyniri, çıtır biber, çimento, yeşil biber, satır, mantarı', en: 'Mushrooms, kaşar cheese, crispy peppers' } },
-        price: 120,
+      { id: 'k6', name: { tr: 'Sebzeli Omlet', en: 'Vegetable Omelette' }, description: { tr: 'Mantarlar, zenginleştirilmiş kaşar peyniri, kapıya biber, çimento, yeşil biber ve saman mantarı', en: 'Mushrooms, kaşar cheese, capia pepper, green pepper' } },
-      },
+      { id: 'k7', name: { tr: 'Vegan Kahvaltı', en: 'Vegan Breakfast' }, description: { tr: 'Avokado, çeşit domatesi, zeytin, tost, roka, havuç', en: 'Avocado, cherry tomato, olives, toast, arugula, carrot' } },
-      {
+      { id: 'k8', name: { tr: 'Serpme Kahvaltı – 2 Kişilik', en: 'Mixed Breakfast - For 2' }, description: { tr: 'Kaşar peyniri, bal & kaymak, siyah zeytin, yeşil zeytin, sürüm, hinse türreyi, çeşit domatesi, erikçimler, tatlıpırçık, havuç, maydanoz ve sonsuz çay', en: 'Kaşar cheese, honey & clotted cream, black & green olives, cherry tomato, jams, carrot, parsley and unlimited tea' } },
-        id: 's2',
-        emoji: '🧀',
-        name: { tr: 'Hellim Izgara', en: 'Grilled Halloumi' },
-        description: { tr: 'Zeytinyağı, taze nane, limon', en: 'Olive oil, fresh mint, lemon' },
-        price: 95,
-      },
-      {
-        id: 's3',
-        emoji: '🫙',
-        name: { tr: 'Zeytinyağlı Meze Tabağı', en: 'Meze Platter' },
-        description: { tr: 'Günlük hazır mezelerin seçimi', en: 'Daily selection of mezze' },
-        price: 145,
-      },
-      {
-        id: 's4',
-        emoji: '🍆',
-        name: { tr: 'Patlıcan Ezmesi', en: 'Smoked Eggplant Dip' },
-        description: { tr: 'Közlenmiş patlıcan, sarımsak, zeytinyağı', en: 'Roasted eggplant, garlic, olive oil' },
-        price: 85,
-      },
     ],
   },
   {
-    id: 'mains',
+    id: 'burgerler',
-    emoji: '🍽️',
+    emoji: '🍔',
-    label: { tr: 'Ana Yemekler', en: 'Main Courses' },
+    label: { tr: 'Burgerler', en: 'Burgers' },
     items: [
-      {
+      { id: 'b1', name: { tr: 'Kids Smash Burger', en: 'Kids Smash Burger' }, description: { tr: 'Kids Smash burger, cheddar peyniri, çıtır patates, kızartılmış turşu, domates, marul, burger sosu, patates cipsi', en: 'Kids Smash burger, cheddar cheese, crispy fries, fried pickles, tomato, lettuce, burger sauce, potato chips' } },
-        id: 'm1',
+      { id: 'b2', name: { tr: 'Dana Smash Burger', en: 'Beef Smash Burger' }, description: { tr: 'Dana Smash burger, cheddar peyniri, karamelize soğan, turşu, domates, marul, burger sosu, patates cipsi', en: 'Beef Smash burger, cheddar cheese, caramelized onions, pickles, tomato, lettuce, burger sauce, potato chips' } },
-        emoji: '🐟',
+      { id: 'b3', name: { tr: 'Dana Smash Big Burger', en: 'Beef Smash Big Burger' }, description: { tr: 'Dana Smash burger smash kafası, cheddar peyniri, karamelize soğan, çıtır patates, kızartılmış turşu, domates, marul, burger sosu, patates cipsi', en: 'Beef Smash big burger, cheddar cheese, caramelized onions, crispy fries, fried pickles, tomato, lettuce, burger sauce, potato chips' } },
-        name: { tr: 'Balık Izgara', en: 'Grilled Fish' },
+      { id: 'b4', name: { tr: 'Çıtır Tavuk Burger', en: 'Crispy Chicken Burger' }, description: { tr: 'Çıtır Tavuk Burger harika cheddar peyniri, burger sos, patates cipsi', en: 'Crispy Chicken Burger, cheddar cheese, burger sauce, potato chips' } },
-        description: { tr: 'Günlük taze balık, sebze garnitürü', en: 'Daily fresh catch, vegetable garnish' },
-        price: 285,
-      },
-      {
-        id: 'm2',
-        emoji: '🐠',
-        name: { tr: 'Levrek Buğulama', en: 'Steamed Sea Bass' },
-        description: { tr: 'Sebzeli buğulama, zeytinyağlı sos', en: 'Steamed with vegetables, olive oil sauce' },
-        price: 295,
-      },
-      {
-        id: 'm3',
-        emoji: '🐙',
-        name: { tr: 'Ahtapot Izgara', en: 'Grilled Octopus' },
-        description: { tr: 'Kekikli marinad, kapari sosu', en: 'Thyme marinade, caper sauce' },
-        price: 320,
-      },
-      {
-        id: 'm4',
-        emoji: '🍢',
-        name: { tr: 'Tavuk Şiş', en: 'Chicken Skewers' },
-        description: { tr: 'Baharatlı tavuk, közlenmiş biber', en: 'Spiced chicken, roasted peppers' },
-        price: 175,
-      },
-      {
-        id: 'm5',
-        emoji: '🥘',
-        name: { tr: 'Vegetaryen Güveç', en: 'Vegetarian Stew' },
-        description: { tr: 'Mevsim sebzeler, nohut, domates sos', en: 'Seasonal vegetables, chickpeas, tomato sauce' },
-        price: 155,
-      },
     ],
   },
   {
-    id: 'pizzas',
+    id: 'tatlilar',
-    emoji: '🍕',
-    label: { tr: 'Pizzalar', en: 'Pizzas' },
-    items: [
-      {
-        id: 'p1',
-        emoji: '🍕',
-        name: { tr: 'Margherita', en: 'Margherita' },
-        description: { tr: 'San marzano domates, bufala mozarella, fesleğen', en: 'San marzano tomatoes, buffalo mozzarella, basil' },
-        price: 165,
-      },
-      {
-        id: 'p2',
-        emoji: '🍕',
-        name: { tr: 'Karışık Pizza', en: 'Mixed Pizza' },
-        description: { tr: 'Salam, mantar, biber, mozarella', en: 'Salami, mushroom, pepper, mozzarella' },
-        price: 185,
-      },
-      {
-        id: 'p3',
-        emoji: '🦐',
-        name: { tr: 'Deniz Ürünleri', en: 'Seafood Pizza' },
-        description: { tr: 'Karides, kalamar, fesleğen sosu', en: 'Shrimp, calamari, basil sauce' },
-        price: 215,
-      },
-      {
-        id: 'p4',
-        emoji: '🌿',
-        name: { tr: 'Fıstık Pesto', en: 'Pesto Pizza' },
-        description: { tr: 'Fıstıklı pesto, roka, parmesan', en: 'Pistachio pesto, rocket, parmesan' },
-        price: 175,
-      },
-    ],
-  },
-  {
-    id: 'mezze',
-    emoji: '🫒',
-    label: { tr: 'Mezeler', en: 'Mezze' },
-    items: [
-      {
-        id: 'mz1',
-        emoji: '🐟',
-        name: { tr: 'Tarama', en: 'Tarama' },
-        description: { tr: 'Balık yumurtası ezmesi, taze limon', en: 'Fish roe spread, fresh lemon' },
-        price: 75,
-      },
-      {
-        id: 'mz2',
-        emoji: '🧄',
-        name: { tr: 'Haydari', en: 'Haydari' },
-        description: { tr: 'Yoğurt, sarımsak, dereotu', en: 'Yogurt, garlic, dill' },
-        price: 65,
-      },
-      {
-        id: 'mz3',
-        emoji: '🥐',
-        name: { tr: 'Sigara Böreği', en: 'Cheese Pastry Rolls' },
-        description: { tr: 'Peynirli, 5 adet', en: 'Cheese-filled, 5 pieces' },
-        price: 85,
-      },
-      {
-        id: 'mz4',
-        emoji: '🐚',
-        name: { tr: 'Midye Tava', en: 'Fried Mussels' },
-        description: { tr: 'Tarator sos ile servis', en: 'Served with tarator sauce' },
-        price: 95,
-      },
-      {
-        id: 'mz5',
-        emoji: '🍤',
-        name: { tr: 'Karides Güveç', en: 'Shrimp Casserole' },
-        description: { tr: 'Domates sos, baharatlar, fırında', en: 'Tomato sauce, spices, oven-baked' },
-        price: 135,
-      },
-    ],
-  },
-  {
-    id: 'drinks',
-    emoji: '🍹',
-    label: { tr: 'İçecekler', en: 'Drinks' },
-    items: [
-      {
-        id: 'd1',
-        emoji: '🍸',
-        name: { tr: 'Mojito', en: 'Mojito' },
-        description: { tr: 'Nane, lime, soda, rum', en: 'Mint, lime, soda, rum' },
-        price: 95,
-      },
-      {
-        id: 'd2',
-        emoji: '🍊',
-        name: { tr: 'Aperol Spritz', en: 'Aperol Spritz' },
-        description: { tr: 'Aperol, prosecco, portakal dilimi', en: 'Aperol, prosecco, orange slice' },
-        price: 115,
-      },
-      {
-        id: 'd3',
-        emoji: '🍋',
-        name: { tr: 'Limonata', en: 'Lemonade' },
-        description: { tr: 'Taze sıkılmış, nane seçeneği ile', en: 'Freshly squeezed, optional mint' },
-        price: 55,
-      },
-      {
-        id: 'd4',
-        emoji: '🥛',
-        name: { tr: 'Ayran', en: 'Ayran' },
-        description: { tr: 'Ev yapımı, taze çırpılmış', en: 'Homemade, freshly churned' },
-        price: 35,
-      },
-      {
-        id: 'd5',
-        emoji: '🍵',
-        name: { tr: 'Soğuk Çay', en: 'Iced Tea' },
-        description: { tr: 'Şeftali veya limon aromalı', en: 'Peach or lemon flavored' },
-        price: 45,
-      },
-    ],
-  },
-  {
-    id: 'desserts',
     emoji: '🍮',
     label: { tr: 'Tatlılar', en: 'Desserts' },
     items: [
-      {
+      { id: 't1', name: { tr: 'Meşhur Akyaka Tatlısı', en: 'Famous Akyaka Dessert' }, description: { tr: 'Deniz tuzlu, bürüme, bitter çikolata, Gökova sütlemi', en: 'Sea salt, bitter chocolate, Gökova milk' } },
-        id: 'dt1',
+      { id: 't2', name: { tr: 'Fırın Helva', en: 'Baked Halva' } },
-        emoji: '🍨',
+    ],
-        name: { tr: 'Dondurma', en: 'Ice Cream' },
+  },
-        description: { tr: '3 top, günlük seçim', en: '3 scoops, daily selection' },
+  {
-        price: 85,
+    id: 'tostlar',
-      },
+    emoji: '🥪',
-      {
+    label: { tr: 'Tostlar', en: 'Toasts' },
-        id: 'dt2',
+    items: [
-        emoji: '🥮',
+      { id: 'ts1', name: { tr: 'Peynirli Tost', en: 'Cheese Toast' }, description: { tr: 'Kaşar peyniri, çeşit domatesi, zeytin, patates cipsi', en: 'Kaşar cheese, cherry tomato, olives, potato chips' } },
-        name: { tr: 'Baklava', en: 'Baklava' },
+      { id: 'ts2', name: { tr: 'Sucuklu Tost', en: 'Sucuk Toast' }, description: { tr: 'Kaşar sucuklu, çeşit domatesi, zeytin, patates cipsi', en: 'Sucuk, kaşar cheese, cherry tomato, olives, potato chips' } },
-        description: { tr: 'Antep fıstıklı, kaymak ile', en: 'Pistachio, with clotted cream' },
+      { id: 'ts3', name: { tr: 'Akdeniz Tost', en: 'Mediterranean Toast' }, description: { tr: 'Kaşar pul, Ezine peyniri, tulum peyniri, kaşar domates, çeşit domatesi, zeytin, patates cipsi', en: 'Ezine cheese, tulum cheese, kaşar cheese, cherry tomato, olives, potato chips' } },
-        price: 75,
+      { id: 'ts4', name: { tr: 'Karışık Tost', en: 'Mixed Toast' }, description: { tr: 'Kaşar sucuklu, kaşar peyniri, peri domates, zeytin, salatalık, dilimlen', en: 'Sucuk, kaşar cheese, cherry tomato, olives, cucumber slices' } },
-      },
+      { id: 'ts5', name: { tr: 'Ayvalık Tostu', en: 'Ayvalik Toast' }, description: { tr: 'Ekşi, karamize turşu, kırmızı bilet kaşar peyniri, çeşit domatesi, salatalık, dilimlen', en: 'Sourdough bread, caramelized pickles, red pepper kaşar cheese, cherry tomato, cucumber slices' } },
-      {
+    ],
-        id: 'dt3',
+  },
-        emoji: '🍮',
+  {
-        name: { tr: 'Panna Cotta', en: 'Panna Cotta' },
+    id: 'salatalar',
-        description: { tr: 'Çilek sosu, taze nane', en: 'Strawberry sauce, fresh mint' },
+    emoji: '🥗',
-        price: 95,
+    label: { tr: 'Salatalar', en: 'Salads' },
-      },
+    items: [
-      {
+      { id: 'sl1', name: { tr: 'Çoban Salata', en: "Shepherd's Salad" } },
-        id: 'dt4',
+      { id: 'sl2', name: { tr: 'Roka Salatası', en: 'Arugula Salad' }, description: { tr: 'Domates, zenginleştirilmiş üzüme bol peyniri', en: 'Tomato, grapes, cheese' } },
-        emoji: '🥞',
+      { id: 'sl3', name: { tr: 'Yaz Salatası', en: 'Summer Salad' }, description: { tr: 'Kaşar ve her, taze domates, kırmızı soğan, beyaz peynir, fasulye, çeşitli yeşil besinleri, dalya üzümleri, çeşit domatesi', en: 'Fresh tomato, red onion, white cheese, beans, mixed greens, grapes, cherry tomato' } },
-        name: { tr: 'Akıtma', en: 'Akıtma' },
+      { id: 'sl4', name: { tr: 'Avokado Salatası', en: 'Avocado Salad' }, description: { tr: 'Avokado, çeşit domatesi, salatalık, yeşil zeytin', en: 'Avocado, cherry tomato, cucumber, green olives' } },
-        description: { tr: 'Geleneksel, nar ekşisi ile', en: 'Traditional, with pomegranate molasses' },
+      { id: 'sl5', name: { tr: 'Ton Balıklı Kinoalı Salata', en: 'Tuna & Quinoa Salad' }, description: { tr: 'Siyah kinoa, ton balığı, maydanoz, çeşit domatesi, salatalık, dilimlen', en: 'Black quinoa, tuna fish, parsley, cherry tomato, cucumber slices' } },
-        price: 65,
+    ],
-      },
+  },
+  {
+    id: 'pizzalar',
+    emoji: '🍕',
+    label: { tr: 'Pizzalar', en: 'Pizzas' },
+    items: [
+      { id: 'pz1', name: { tr: 'Margherita Pizza', en: 'Margherita Pizza' }, description: { tr: 'Pizza sosu, mozzarella peyniri, fesleğen, zeytin makul', en: 'Pizza sauce, mozzarella cheese, basil, olives' } },
+      { id: 'pz2', name: { tr: 'Akdeniz Pizza', en: 'Mediterranean Pizza' }, description: { tr: 'Kaşar peyniri, yeşil biber, mantar, fesleğen, mozzarella peyniri, piliç sosu', en: 'Kaşar cheese, green pepper, mushroom, basil, mozzarella cheese' } },
+      { id: 'pz3', name: { tr: 'Sucuk Pizza', en: 'Sucuk Pizza' }, description: { tr: 'Yeşil biber, domates biber, mantar, kaşar', en: 'Green pepper, tomato, pepper, mushroom, kaşar' } },
+      { id: 'pz4', name: { tr: 'Enginar lı Pizza', en: 'Artichoke Pizza' }, description: { tr: 'Belirli peşik, fesleğen, mozzarella peyniri, domates sosu', en: 'Artichoke, basil, mozzarella cheese, tomato sauce' } },
+    ],
+  },
+  {
+    id: 'wraps',
+    emoji: '🌯',
+    label: { tr: 'Wraps', en: 'Wraps' },
+    items: [
+      { id: 'w1', name: { tr: 'Sebzeli Wrap', en: 'Veggie Wrap' }, description: { tr: 'Mantar, toflu peynirli, turşu, soğan, samon biber, yeşil biber, kaşar biber', en: 'Mushroom, tofu cheese, pickles, onions, yellow pepper, green pepper, red pepper' } },
+      { id: 'w2', name: { tr: 'Tavuklu Wrap', en: 'Chicken Wrap' }, description: { tr: 'Salatalık doğası, turşu soğan, kısma biber, marul, kon türfü turşu', en: 'Cucumber, pickled onions, red pepper, lettuce, pickles' } },
+    ],
+  },
+  {
+    id: 'mantilar',
+    emoji: '🥟',
+    label: { tr: 'Mantılar', en: 'Manti & Ravioli' },
+    items: [
+      { id: 'mt1', name: { tr: 'Ev Yapımı Mantı', en: 'Homemade Manti' }, description: { tr: 'Yoğurt ve sas eşliğince', en: 'Served with yogurt and sauce' } },
+      { id: 'mt2', name: { tr: 'Cevizli Mantı', en: 'Walnut Manti' }, description: { tr: 'Yoğurt ve sas eşliğince', en: 'Served with yogurt and sauce' } },
+      { id: 'mt3', name: { tr: 'Akdeniz Mantısı', en: 'Mediterranean Manti' }, description: { tr: 'Fesleğen, maydanoz, cziz, yoğurtlu sos', en: 'Basil, parsley, walnuts, yogurt sauce' } },
+    ],
+  },
+  {
+    id: 'makarnalar',
+    emoji: '🍝',
+    label: { tr: 'Makarnalar', en: 'Pastas' },
+    items: [
+      { id: 'mk1', name: { tr: 'Penne Arrabbiata', en: 'Penne Arrabbiata' } },
+      { id: 'mk2', name: { tr: 'Spaghetti al Pesto', en: 'Spaghetti al Pesto' } },
+      { id: 'mk3', name: { tr: 'Fettuccine Alfredo', en: 'Fettuccine Alfredo' } },
+      { id: 'mk4', name: { tr: 'Spagetti Bolonez', en: 'Spaghetti Bolognese' } },
+    ],
+  },
+  {
+    id: 'ana-yemekler',
+    emoji: '🍗',
+    label: { tr: 'Ana Yemekler', en: 'Main Courses' },
+    items: [
+      { id: 'ay1', name: { tr: 'Tavuk Izgara', en: 'Grilled Chicken' }, description: { tr: 'Tavuk göğsü, karamelize yeşil biber, soğan, yeşillik, domatesli cipsi', en: 'Chicken breast, caramelized green pepper, onions, greens, potato chips' } },
+      { id: 'ay2', name: { tr: 'Tavuk Pirzola', en: 'Chicken Chops' }, description: { tr: 'Kalemime yeşil biber, soğan, yeşil fık, patates cipsi', en: 'Green pepper, onions, greens, potato chips' } },
+      { id: 'ay3', name: { tr: 'Köfte', en: 'Meatballs' }, description: { tr: 'Maydanoz, yeşil biber, soğan, yeşillik, patlıcan cipsi', en: 'Parsley, green pepper, onions, greens, eggplant chips' } },
+      { id: 'ay4', name: { tr: 'Karışık Izgara', en: 'Mixed Grill' }, description: { tr: 'Köfte, tavuk göğsü, kısık pırzola. Kalemima yeşil biber, soğan, yeşillik, patlıcan cipsi', en: 'Meatballs, chicken breast, chicken chops. Green pepper, onions, greens, eggplant chips' } },
+      { id: 'ay5', name: { tr: 'Sac Kavurma – 2 Kişilik', en: 'Sac Kavurma - For 2' }, description: { tr: 'Mevsim salatası ve patates cipsi eşliğinde', en: 'Served with seasonal salad and potato chips' } },
+      { id: 'ay6', name: { tr: 'Günlük Balık Çeşitleri', en: 'Daily Fish Catch' } },
+    ],
+  },
+  {
+    id: 'atistirmaliklar',
+    emoji: '🍟',
+    label: { tr: 'Atıştırmalıklar', en: 'Snacks' },
+    items: [
+      { id: 'at1', name: { tr: 'Patates Cipsi', en: 'Potato Chips' } },
+      { id: 'at2', name: { tr: 'Çıtır Tavuk', en: 'Crispy Chicken' }, description: { tr: 'Çıtır tavuk ve patates cipsi', en: 'Crispy chicken and potato chips' } },
+      { id: 'at3', name: { tr: 'Peynir Tabağı', en: 'Cheese Platter' }, description: { tr: 'Ezine peyniri, tulum peyniri, ham, haşar, çeşit kaşar, kuru domates', en: 'Ezine cheese, tulum cheese, kaşar cheese, dried tomatoes' } },
+      { id: 'at4', name: { tr: 'Bira Tabağı', en: 'Beer Platter' }, description: { tr: 'Roka & patates cipsi, çıtır tavuk, çeşit kaşar', en: 'Arugula & potato chips, crispy chicken, cheese varieties' } },
+      { id: 'at5', name: { tr: 'Deniz Tabağı', en: 'Seafood Platter' }, description: { tr: 'Halk kalamar, çıtır karides, roka', en: 'Calamari rings, crispy shrimp, arugula' } },
+    ],
+  },
+  {
+    id: 'sicak-icecekler',
+    emoji: '☕',
+    label: { tr: 'Sıcak İçecekler & Kahveler', en: 'Hot Drinks & Coffees' },
+    items: [
+      { id: 'si1', name: { tr: 'Çay', en: 'Tea' } },
+      { id: 'si2', name: { tr: 'Türk Kahvesi', en: 'Turkish Coffee' } },
+      { id: 'si3', name: { tr: 'Duble Türk Kahvesi', en: 'Double Turkish Coffee' } },
+      { id: 'si4', name: { tr: 'Filtre Kahve', en: 'Filter Coffee' } },
+      { id: 'si5', name: { tr: 'Espresso', en: 'Espresso' } },
+      { id: 'si6', name: { tr: 'Americano', en: 'Americano' } },
+      { id: 'si7', name: { tr: 'Latte', en: 'Latte' } },
+      { id: 'si8', name: { tr: 'Cappuccino', en: 'Cappuccino' } },
+    ],
+  },
+  {
+    id: 'soguk-icecekler',
+    emoji: '🥤',
+    label: { tr: 'Soğuk İçecekler', en: 'Cold Drinks' },
+    items: [
+      { id: 'so1', name: { tr: 'Su', en: 'Water' } },
+      { id: 'so2', name: { tr: 'Soda', en: 'Sparkling Water' } },
+      { id: 'so3', name: { tr: 'Meyveli Soda', en: 'Fruit Sparkling Water' } },
+      { id: 'so4', name: { tr: 'Ayran', en: 'Ayran' } },
+      { id: 'so5', name: { tr: 'Limonata', en: 'Lemonade' } },
+      { id: 'so6', name: { tr: 'Churchill', en: 'Churchill' } },
+      { id: 'so7', name: { tr: 'Coca-Cola / Fanta / Sprite', en: 'Coca-Cola / Fanta / Sprite' } },
+      { id: 'so8', name: { tr: 'Ice Tea', en: 'Ice Tea' } },
+      { id: 'so9', name: { tr: 'Red Bull', en: 'Red Bull' } },
+      { id: 'so10', name: { tr: 'Vişne Suyu', en: 'Cherry Juice' } },
+      { id: 'so11', name: { tr: 'Portakal Suyu', en: 'Orange Juice' } },
+      { id: 'so12', name: { tr: 'Nar Suyu', en: 'Pomegranate Juice' } },
+    ],
+  },
+  {
+    id: 'soguk-kahveler',
+    emoji: '🧋',
+    label: { tr: 'Soğuk Kahveler', en: 'Cold Coffees' },
+    items: [
+      { id: 'sk1', name: { tr: 'Iced Americano', en: 'Iced Americano' } },
+      { id: 'sk2', name: { tr: 'Iced Latte', en: 'Iced Latte' } },
+      { id: 'sk3', name: { tr: 'Iced Mocha', en: 'Iced Mocha' } },
+    ],
+  },
+  {
+    id: 'frozen',
+    emoji: '🧊',
+    label: { tr: 'Frozen', en: 'Frozen' },
+    items: [
+      { id: 'fz1', name: { tr: 'Çilek', en: 'Strawberry' } },
+      { id: 'fz2', name: { tr: 'Mango', en: 'Mango' } },
+      { id: 'fz3', name: { tr: 'Orman Meyvesi', en: 'Forest Fruits' } },
+    ],
+  },
+  {
+    id: 'milkshakes',
+    emoji: '🥛',
+    label: { tr: 'Milkshakes', en: 'Milkshakes' },
+    items: [
+      { id: 'ms1', name: { tr: 'Muz', en: 'Banana' } },
+      { id: 'ms2', name: { tr: 'Vanilya', en: 'Vanilla' } },
+      { id: 'ms3', name: { tr: 'Çilek', en: 'Strawberry' } },
+      { id: 'ms4', name: { tr: 'Çikolata', en: 'Chocolate' } },
+      { id: 'ms5', name: { tr: 'Mango', en: 'Mango' } },
+      { id: 'ms6', name: { tr: 'Orman Meyvesi', en: 'Forest Fruits' } },
+      { id: 'ms7', name: { tr: 'Espresso', en: 'Espresso' } },
+    ],
+  },
+  {
+    id: 'refreshers',
+    emoji: '🌿',
+    label: { tr: 'Refreshers', en: 'Refreshers' },
+    items: [
+      { id: 'rf1', name: { tr: 'Limonata', en: 'Lemonade' } },
+      { id: 'rf2', name: { tr: 'Nar Suyu', en: 'Pomegranate Juice' } },
+      { id: 'rf3', name: { tr: 'Portakal Suyu', en: 'Orange Juice' } },
+      { id: 'rf4', name: { tr: 'Cool Lime', en: 'Cool Lime' } },
+      { id: 'rf5', name: { tr: 'Rooibos Peach', en: 'Rooibos Peach' } },
+    ],
+  },
+  {
+    id: 'biralar',
+    emoji: '🍺',
+    label: { tr: 'Biralar', en: 'Beers' },
+    items: [
+      { id: 'br1', name: { tr: 'Tuborg Gold', en: 'Tuborg Gold' }, description: { tr: '50 cl', en: '50 cl' } },
+      { id: 'br2', name: { tr: 'Tuborg Filtresiz', en: 'Tuborg Unfiltered' }, description: { tr: '50 cl', en: '50 cl' } },
+      { id: 'br3', name: { tr: 'Tuborg Amber', en: 'Tuborg Amber' }, description: { tr: '50 cl', en: '50 cl' } },
+      { id: 'br4', name: { tr: 'Carlsberg', en: 'Carlsberg' }, description: { tr: '50 cl', en: '50 cl' } },
+      { id: 'br5', name: { tr: 'Efes Malt', en: 'Efes Malt' }, description: { tr: '50 cl', en: '50 cl' } },
+      { id: 'br6', name: { tr: 'Efes Green', en: 'Efes Green' }, description: { tr: '50 cl', en: '50 cl' } },
+      { id: 'br7', name: { tr: 'Stella Artois', en: 'Stella Artois' }, description: { tr: '44 cl', en: '44 cl' } },
+      { id: 'br8', name: { tr: "Beck's", en: "Beck's" }, description: { tr: '33 cl', en: '33 cl' } },
+      { id: 'br9', name: { tr: 'Bud', en: 'Bud' }, description: { tr: '33 cl', en: '33 cl' } },
+    ],
+  },
+  {
+    id: 'saraplar',
+    emoji: '🍷',
+    label: { tr: 'Şaraplar', en: 'Wines' },
+    items: [
+      { id: 'sr1', name: { tr: 'Beyaz Kadeh', en: 'White Glass' } },
+      { id: 'sr2', name: { tr: 'Rosé Kadeh', en: 'Rosé Glass' } },
+      { id: 'sr3', name: { tr: 'Kırmızı Kadeh', en: 'Red Glass' } },
+      { id: 'sr4', name: { tr: 'Sevilen Colombard Semillon – Beyaz Şişe', en: 'Sevilen Colombard Semillon – White Bottle' } },
+      { id: 'sr5', name: { tr: 'Sevilen Letter R – Blush Şişe', en: 'Sevilen Letter R – Blush Bottle' } },
+      { id: 'sr6', name: { tr: 'Sevilen Parsel II – Kırmızı Şişe', en: 'Sevilen Parsel II – Red Bottle' } },
+    ],
+  },
+  {
+    id: 'alkolsuz-kokteyller',
+    emoji: '🧃',
+    label: { tr: 'Alkolsüz Kokteyller', en: 'Mocktails' },
+    items: [
+      { id: 'ak1', name: { tr: 'Golden Jüpiter', en: 'Golden Jupiter' }, description: { tr: 'Red Bull Peach Edition, fesleğen, portakal suyu, limon', en: 'Red Bull Peach Edition, basil, orange juice, lemon' } },
+      { id: 'ak2', name: { tr: 'Venus Wave', en: 'Venus Wave' }, description: { tr: 'Red Bull White Edition, ananas suyu, lime', en: 'Red Bull White Edition, pineapple juice, lime' } },
+      { id: 'ak3', name: { tr: 'Kozmos Twist', en: 'Kozmos Twist' }, description: { tr: 'Red Bull White Edition, portakal, lime, soda', en: 'Red Bull White Edition, orange, lime, sparkling water' } },
+    ],
+  },
+  {
+    id: 'house-kokteyller',
+    emoji: '🍹',
+    label: { tr: 'House Kokteyller', en: 'House Cocktails' },
+    items: [
+      { id: 'hk1', name: { tr: 'Grass', en: 'Grass' }, description: { tr: 'Gin, yeşil erik, buzlu turşu, limon suyu, greyfurt, portakal', en: 'Gin, green plum, ice pickle, lemon juice, grapefruit, orange' } },
+      { id: 'hk2', name: { tr: 'Strawberry Hibiscus', en: 'Strawberry Hibiscus' }, description: { tr: 'Hibiscus çayı, greyfurt, Cointreau, Casemigos teklila', en: 'Hibiscus tea, grapefruit, Cointreau, Casamigos tequila' } },
+      { id: 'hk3', name: { tr: 'Satsuma', en: 'Satsuma' }, description: { tr: 'Satsuma, greyfurt, portakal, votka', en: 'Satsuma, grapefruit, orange, vodka' } },
+      { id: 'hk4', name: { tr: 'Chili Mango', en: 'Chili Mango' }, description: { tr: 'Mango, Antrout taberi, turunç, kamişeri', en: 'Mango, chili pepper, citrus' } },
+      { id: 'hk5', name: { tr: 'Black Mulberry', en: 'Black Mulberry' }, description: { tr: 'Karadut, lime, sweet & sour, votka', en: 'Black mulberry, lime, sweet & sour, vodka' } },
+      { id: 'hk6', name: { tr: 'Lunar Bloom', en: 'Lunar Bloom' }, description: { tr: 'Beyaz çay, şeftali, beyaz şarap', en: 'White tea, peach, white wine' } },
+      { id: 'hk7', name: { tr: 'White Peach', en: 'White Peach' }, description: { tr: 'Beyaz çay, şeftali, rom', en: 'White tea, peach, rum' } },
+      { id: 'hk8', name: { tr: 'Kozmos', en: 'Kozmos' }, description: { tr: 'Cinzano, sweet & sour, ananas suyu, limon suyu, Kozmos mavi', en: 'Cinzano, sweet & sour, pineapple juice, lemon juice, Kozmos blue' } },
+    ],
+  },
+  {
+    id: 'raki',
+    emoji: '🥃',
+    label: { tr: 'Rakı', en: 'Raki' },
+    items: [
+      { id: 'rk1', name: { tr: 'Lokal Rakı Tek', en: 'Local Raki Single' } },
+      { id: 'rk2', name: { tr: 'Lokal Rakı Duble', en: 'Local Raki Double' } },
+      { id: 'rk3', name: { tr: 'Yeni Rakı Özel Seri', en: 'Yeni Raki Special Series' }, description: { tr: '35 cl', en: '35 cl' } },
+      { id: 'rk4', name: { tr: 'Yeni Rakı Özel Seri', en: 'Yeni Raki Special Series' }, description: { tr: '50 cl', en: '50 cl' } },
+      { id: 'rk5', name: { tr: 'Yeni Rakı Özel Seri', en: 'Yeni Raki Special Series' }, description: { tr: '70 cl', en: '70 cl' } },
+      { id: 'rk6', name: { tr: 'Beylerbeyi Göbek', en: 'Beylerbeyi Gobek' }, description: { tr: '35 cl', en: '35 cl' } },
+      { id: 'rk7', name: { tr: 'Beylerbeyi Göbek', en: 'Beylerbeyi Gobek' }, description: { tr: '50 cl', en: '50 cl' } },
+      { id: 'rk8', name: { tr: 'Beylerbeyi Göbek', en: 'Beylerbeyi Gobek' }, description: { tr: '70 cl', en: '70 cl' } },
+    ],
+  },
+  {
+    id: 'klasik-kokteyller',
+    emoji: '🍸',
+    label: { tr: 'Klasik Kokteyller', en: 'Classic Cocktails' },
+    items: [
+      { id: 'kk1', name: { tr: 'Espresso Martini', en: 'Espresso Martini' } },
+      { id: 'kk2', name: { tr: 'Mojito', en: 'Mojito' } },
+      { id: 'kk3', name: { tr: 'Margarita', en: 'Margarita' } },
+      { id: 'kk4', name: { tr: 'Aperol Spritz', en: 'Aperol Spritz' } },
+      { id: 'kk5', name: { tr: 'Lynchburg Lemonade', en: 'Lynchburg Lemonade' } },
+      { id: 'kk6', name: { tr: 'Whiskey Sour', en: 'Whiskey Sour' } },
+      { id: 'kk7', name: { tr: 'Long Island Iced Tea', en: 'Long Island Iced Tea' } },
+      { id: 'kk8', name: { tr: 'Negroni', en: 'Negroni' } },
+    ],
+  },
+  {
+    id: 'shots',
+    emoji: '🥃',
+    label: { tr: 'Shots', en: 'Shots' },
+    items: [
+      { id: 'sh1', name: { tr: 'Olmeca Gold', en: 'Olmeca Gold' } },
+      { id: 'sh2', name: { tr: 'Olmeca Silver', en: 'Olmeca Silver' } },
+      { id: 'sh3', name: { tr: 'Olmeca Dark Chocolate', en: 'Olmeca Dark Chocolate' } },
+      { id: 'sh4', name: { tr: 'Aperol Spritz', en: 'Aperol Spritz' } },
+      { id: 'sh5', name: { tr: 'Lynchburg Lemonade', en: 'Lynchburg Lemonade' } },
+      { id: 'sh6', name: { tr: 'Whiskey Sour', en: 'Whiskey Sour' } },
+    ],
+  },
+  {
+    id: 'spirits',
+    emoji: '🫙',
+    label: { tr: 'Spirits', en: 'Spirits' },
+    items: [
+      { id: 'sp1', name: { tr: 'Absolut Vodka', en: 'Absolut Vodka' } },
+      { id: 'sp2', name: { tr: 'Absolut Vanilla', en: 'Absolut Vanilla' } },
+      { id: 'sp3', name: { tr: 'Beefeater Gin', en: 'Beefeater Gin' } },
+      { id: 'sp4', name: { tr: 'Beefeater Pink', en: 'Beefeater Pink' } },
+      { id: 'sp5', name: { tr: 'Beefeater Blood Orange', en: 'Beefeater Blood Orange' } },
     ],
   },
 ]