- {/* Category sections */}
{categories.map((category) => (
-
-
>
)
}
diff --git a/app/globals.css b/app/globals.css
index 8a80797..e190f57 100644
--- a/app/globals.css
+++ b/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 {
diff --git a/components/BottomTabBar.tsx b/components/BottomTabBar.tsx
index 81c3b7e..cc21cf4 100644
--- a/components/BottomTabBar.tsx
+++ b/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
(categories[0]?.id ?? '')
+ const scrollRef = useRef(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(
+ `[data-id="${activeId}"]`
+ )
+ if (!activeEl) return
+ activeEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
+ }, [activeId])
+
return (
{/* Price pill */}
-