mstfyldzandClaude Sonnet 4.6
d369c9e258
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>
89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import { notFound } from 'next/navigation'
|
||
import { getDictionary, hasLocale } from './dictionaries'
|
||
import { categories } from '@/data/menu'
|
||
import Header from '@/components/Header'
|
||
import CategorySection from '@/components/CategorySection'
|
||
import BottomTabBar from '@/components/BottomTabBar'
|
||
import WhatsAppButton from '@/components/WhatsAppButton'
|
||
|
||
export default async function MenuPage({
|
||
params,
|
||
}: {
|
||
params: Promise<{ lang: string }>
|
||
}) {
|
||
const { lang } = await params
|
||
if (!hasLocale(lang)) notFound()
|
||
|
||
const dict = await getDictionary(lang)
|
||
|
||
return (
|
||
<>
|
||
<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={{ paddingTop: 'var(--header-h)', paddingBottom: '32px' }}
|
||
>
|
||
{/* Hero gradient fade from header */}
|
||
<div
|
||
aria-hidden="true"
|
||
className="h-6 w-full"
|
||
style={{
|
||
background:
|
||
'linear-gradient(180deg, rgba(31,20,10,0.10) 0%, transparent 100%)',
|
||
}}
|
||
/>
|
||
|
||
{/* Welcome strip */}
|
||
<div className="px-4 pt-2 pb-1">
|
||
<div
|
||
className="rounded-2xl px-4 py-3 flex items-center gap-3"
|
||
style={{
|
||
background:
|
||
'linear-gradient(135deg, rgba(74,175,168,0.10) 0%, rgba(200,168,80,0.07) 100%)',
|
||
border: '1px solid rgba(74,175,168,0.18)',
|
||
}}
|
||
>
|
||
<span className="text-2xl">🌊</span>
|
||
<div>
|
||
<p
|
||
className="font-display italic text-coffee font-semibold leading-tight"
|
||
style={{ fontSize: '0.95rem' }}
|
||
>
|
||
Kozmos Beach & More
|
||
</p>
|
||
<p
|
||
className="font-body text-muted leading-snug mt-0.5"
|
||
style={{ fontSize: '0.68rem' }}
|
||
>
|
||
{lang === 'tr'
|
||
? 'Taze malzemeler · Ege lezzetleri · Deniz kenarı'
|
||
: 'Fresh ingredients · Aegean flavours · Seaside'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{categories.map((category) => (
|
||
<CategorySection
|
||
key={category.id}
|
||
category={category}
|
||
lang={lang}
|
||
currency={dict.currency}
|
||
/>
|
||
))}
|
||
|
||
<div className="h-4" aria-hidden="true" />
|
||
</main>
|
||
|
||
<WhatsAppButton
|
||
message={dict.whatsapp.message}
|
||
label={dict.whatsapp.label}
|
||
/>
|
||
</>
|
||
)
|
||
}
|