root
550 lines
23 KiB
TypeScript
550 lines
23 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* MENU PAGE — Premium Sidebar Navigation
|
|
*/
|
|
|
|
import { useCallback, useEffect, useRef, useState, useMemo } from "react";
|
|
import { useMenu } from "@/presentation/providers/menu-provider";
|
|
import { buildCartLineFromMenuItem } from "@/application/cart/cart-line-builder";
|
|
import type { MenuItem } from "@/domain/menu/entities";
|
|
import { gsap } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import { motion } from "framer-motion";
|
|
import Navbar from "@/components/Navbar";
|
|
import PageHeader from "@/components/PageHeader";
|
|
import Footer from "@/components/Footer";
|
|
import { useCart } from "@/components/CartContext";
|
|
import WishlistButton from "@/components/WishlistButton";
|
|
import { useLanguage } from "@/lib/language-context";
|
|
import { getTranslation } from "@/lib/translations";
|
|
import {
|
|
getCategoryName,
|
|
getMenuItemInclusionNote,
|
|
getMenuItemDescription,
|
|
getMenuItemName,
|
|
} from "@/application/i18n/menu-localization";
|
|
import {
|
|
dishImageUrl,
|
|
getMenuPosterSrc,
|
|
getMenuPosterCandidates,
|
|
applyNextImageFallback,
|
|
} from "@/lib/assets";
|
|
import { playHoverSound } from "@/lib/sounds";
|
|
import DishDetailsModal from "@/components/DishDetailsModal";
|
|
import { hasDishDetailModal } from "@/domain/menu/dish-details";
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
export default function MenuPage() {
|
|
const [activeCategory, setActiveCategory] = useState("All");
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [showVegetarianOnly, setShowVegetarianOnly] = useState(false);
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
const [detailItem, setDetailItem] = useState<MenuItem | null>(null);
|
|
const [categoryScrollHints, setCategoryScrollHints] = useState({
|
|
top: false,
|
|
bottom: false,
|
|
left: false,
|
|
right: false,
|
|
});
|
|
const categoryListRef = useRef<HTMLDivElement>(null);
|
|
const prevCategoryCountRef = useRef(0);
|
|
|
|
const { addToCart } = useCart();
|
|
const { categories: menuCategories, refreshMenu } = useMenu();
|
|
const { language } = useLanguage();
|
|
const t = getTranslation(language);
|
|
|
|
useEffect(() => {
|
|
void refreshMenu();
|
|
}, [refreshMenu]);
|
|
|
|
// Sidebar categories
|
|
const sidebarCategories = [
|
|
{ id: "All", name: t.menu.allDishes || "All Dishes" },
|
|
...menuCategories.map((cat) => ({
|
|
id: cat.id,
|
|
name: getCategoryName(language, cat.id, cat.name),
|
|
})),
|
|
];
|
|
|
|
// Filtering logic
|
|
const filteredCategories = useMemo(() => {
|
|
return menuCategories
|
|
.map((category) => {
|
|
let items = category.items;
|
|
|
|
// Sidebar filter
|
|
if (activeCategory !== "All" && category.id !== activeCategory) {
|
|
items = [];
|
|
}
|
|
|
|
// Search
|
|
if (searchQuery.trim()) {
|
|
const q = searchQuery.toLowerCase().trim();
|
|
items = items.filter((item) => {
|
|
const localizedName = getMenuItemName(language, item).toLowerCase();
|
|
const localizedDescription = getMenuItemDescription(language, t, item).toLowerCase();
|
|
return (
|
|
localizedName.includes(q) ||
|
|
localizedDescription.includes(q) ||
|
|
item.name.toLowerCase().includes(q)
|
|
);
|
|
});
|
|
}
|
|
|
|
// Vegetarian
|
|
if (showVegetarianOnly) {
|
|
items = items.filter((item) => item.isVegetarian);
|
|
}
|
|
|
|
return { ...category, items };
|
|
})
|
|
.filter((category) => {
|
|
if (activeCategory !== 'All' && category.id !== activeCategory) return false;
|
|
if (searchQuery.trim() || showVegetarianOnly) {
|
|
return category.items.length > 0;
|
|
}
|
|
return true;
|
|
});
|
|
}, [searchQuery, showVegetarianOnly, activeCategory, language, t, menuCategories]);
|
|
|
|
const handleCategorySelect = (id: string) => {
|
|
setActiveCategory(id);
|
|
const headerHeight = Number.parseInt(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--header-height'),
|
|
10,
|
|
) || 116;
|
|
window.scrollTo({ top: headerHeight + 80, behavior: 'smooth' });
|
|
};
|
|
|
|
const getItemDescription = (item: MenuItem) =>
|
|
getMenuItemDescription(language, t, item);
|
|
|
|
const getItemName = (item: MenuItem) => getMenuItemName(language, item);
|
|
|
|
const openDishDetails = (item: MenuItem) => {
|
|
setDetailItem(item);
|
|
};
|
|
|
|
/** Detail-modal dishes use their photo on the card; video plays only in the modal. */
|
|
const getCardImageSrc = (item: MenuItem, categoryId: string) =>
|
|
hasDishDetailModal(item.id, categoryId) && item.image
|
|
? dishImageUrl(item.image)
|
|
: getMenuPosterSrc(item);
|
|
|
|
const getCardImageCandidates = (item: MenuItem, categoryId: string) =>
|
|
hasDishDetailModal(item.id, categoryId) && item.image
|
|
? [dishImageUrl(item.image), ...getMenuPosterCandidates(item)]
|
|
: getMenuPosterCandidates(item);
|
|
|
|
const renderMenuPrice = (item: MenuItem) => {
|
|
if (item.pricing === "weight") {
|
|
return (
|
|
<div className="shrink-0 text-right">
|
|
<div className="text-[#B38B4D] text-xl font-medium tracking-[-0.5px] tabular-nums leading-tight">
|
|
{item.pricePerHalfKg ?? item.price}
|
|
</div>
|
|
<div className="text-[10px] text-[#8A8478] tracking-wide">{t.menu.perHalfKg}</div>
|
|
<div className="text-[#B38B4D] text-sm font-medium tabular-nums mt-0.5">
|
|
{item.pricePerKg} {t.menu.perKg}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="shrink-0 text-right">
|
|
<div className="text-[#B38B4D] text-2xl font-medium tracking-[-0.5px] tabular-nums">
|
|
{item.price}
|
|
</div>
|
|
<div className="text-[10px] text-[#8A8478] tracking-widest -mt-1">KR</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// isMobile detection - used to enable advanced desktop hover effects + sounds only on desktop
|
|
useEffect(() => {
|
|
const updateMobile = () => setIsMobile(window.innerWidth < 768);
|
|
updateMobile();
|
|
window.addEventListener("resize", updateMobile);
|
|
return () => window.removeEventListener("resize", updateMobile);
|
|
}, []);
|
|
|
|
const updateCategoryScrollHints = useCallback(() => {
|
|
const container = categoryListRef.current;
|
|
if (!container) return;
|
|
|
|
const threshold = 6;
|
|
const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } =
|
|
container;
|
|
|
|
setCategoryScrollHints({
|
|
top: scrollTop > threshold,
|
|
bottom: scrollTop + clientHeight < scrollHeight - threshold,
|
|
left: scrollLeft > threshold,
|
|
right: scrollLeft + clientWidth < scrollWidth - threshold,
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const container = categoryListRef.current;
|
|
if (!container) return;
|
|
|
|
updateCategoryScrollHints();
|
|
|
|
const onScroll = () => updateCategoryScrollHints();
|
|
container.addEventListener("scroll", onScroll, { passive: true });
|
|
|
|
const resizeObserver = new ResizeObserver(() => updateCategoryScrollHints());
|
|
resizeObserver.observe(container);
|
|
|
|
return () => {
|
|
container.removeEventListener("scroll", onScroll);
|
|
resizeObserver.disconnect();
|
|
};
|
|
}, [updateCategoryScrollHints, sidebarCategories.length]);
|
|
|
|
useEffect(() => {
|
|
const container = categoryListRef.current;
|
|
if (!container) return;
|
|
|
|
const activeButton = container.querySelector<HTMLElement>(
|
|
`[data-category-id="${activeCategory}"]`
|
|
);
|
|
if (!activeButton) return;
|
|
|
|
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
activeButton.scrollIntoView({
|
|
behavior: prefersReducedMotion ? "auto" : "smooth",
|
|
block: "nearest",
|
|
inline: "center",
|
|
});
|
|
}, [activeCategory]);
|
|
|
|
useEffect(() => {
|
|
if (menuCategories.length <= prevCategoryCountRef.current) {
|
|
prevCategoryCountRef.current = menuCategories.length;
|
|
return;
|
|
}
|
|
|
|
const newestCategory = menuCategories[menuCategories.length - 1];
|
|
prevCategoryCountRef.current = menuCategories.length;
|
|
|
|
requestAnimationFrame(() => {
|
|
const container = categoryListRef.current;
|
|
const newestButton = container?.querySelector<HTMLElement>(
|
|
`[data-category-id="${newestCategory.id}"]`,
|
|
);
|
|
if (!newestButton) return;
|
|
|
|
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
newestButton.scrollIntoView({
|
|
behavior: prefersReducedMotion ? "auto" : "smooth",
|
|
block: "nearest",
|
|
inline: "center",
|
|
});
|
|
updateCategoryScrollHints();
|
|
});
|
|
}, [menuCategories, updateCategoryScrollHints]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
|
|
<Navbar />
|
|
|
|
<PageHeader
|
|
eyebrow="AUTHENTIC • GENEROUS • ROYAL"
|
|
title={t.menu.title}
|
|
subtitle={t.menu.subtitle}
|
|
/>
|
|
|
|
{/* Main Layout */}
|
|
<div className="max-w-7xl mx-auto px-6 pb-20">
|
|
<div className="flex flex-col lg:flex-row gap-10">
|
|
|
|
{/* BEAUTIFUL SIDEBAR */}
|
|
<div className="lg:w-72 flex-shrink-0">
|
|
<div className="sticky top-[var(--header-height)] z-10 flex flex-col lg:max-h-[calc(100dvh-var(--header-height)-1.5rem)]">
|
|
<div className="mb-4 shrink-0">
|
|
<div className="text-xs tracking-[3px] text-[#c99a2e] mb-2">EXPLORE OUR</div>
|
|
<h3 className="font-serif text-2xl sm:text-3xl tracking-tight">Signature Categories</h3>
|
|
</div>
|
|
|
|
{/* Smooth scroll: horizontal on mobile, vertical on desktop when list exceeds viewport */}
|
|
<div className="relative min-h-0 lg:flex-1">
|
|
<div
|
|
ref={categoryListRef}
|
|
className="menu-category-scroll flex gap-2 overflow-x-auto overflow-y-hidden scroll-smooth overscroll-x-contain overscroll-y-contain pb-3 pe-4 ps-1 snap-x snap-mandatory scroll-px-1 [-webkit-overflow-scrolling:touch] lg:h-full lg:min-h-0 lg:flex-col lg:overflow-x-hidden lg:overflow-y-auto lg:snap-none lg:scroll-px-0 lg:pb-4 lg:pe-2 lg:ps-0"
|
|
>
|
|
{sidebarCategories.map((cat) => {
|
|
const isActive = activeCategory === cat.id;
|
|
const itemCount = cat.id === "All"
|
|
? menuCategories.reduce((sum, c) => sum + c.items.length, 0)
|
|
: menuCategories.find(c => c.id === cat.id)?.items.length || 0;
|
|
|
|
return (
|
|
<button
|
|
key={cat.id}
|
|
data-category-id={cat.id}
|
|
onClick={() => handleCategorySelect(cat.id)}
|
|
className={`flex-shrink-0 snap-start min-w-[140px] lg:min-w-0 lg:w-full flex items-center justify-between px-5 py-3 lg:py-3.5 rounded-2xl text-left transition-all active:scale-[0.985] group ${
|
|
isActive
|
|
? "bg-[#101724] text-white shadow-lg"
|
|
: "hover:bg-white hover:shadow-sm active:bg-[#EDE6D9] text-[#101724] border border-transparent hover:border-[#e5e1d7]"
|
|
}`}
|
|
>
|
|
<span className={`font-medium tracking-[-0.1px] text-sm lg:text-base ${isActive ? "" : "group-hover:text-[#0f5a4a]"}`}>
|
|
{cat.name}
|
|
</span>
|
|
<span className={`text-[10px] lg:text-xs px-2 py-0.5 rounded-full font-mono tabular-nums ${
|
|
isActive ? "bg-white/20" : "bg-[#e5e1d7] text-[#68717f]"
|
|
}`}>
|
|
{itemCount}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
{categoryScrollHints.left && (
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-y-0 left-0 z-10 w-8 bg-gradient-to-r from-[#F8F5F0] via-[#F8F5F0]/80 to-transparent lg:hidden"
|
|
/>
|
|
)}
|
|
{categoryScrollHints.right && (
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l from-[#F8F5F0] via-[#F8F5F0]/80 to-transparent lg:hidden"
|
|
/>
|
|
)}
|
|
{categoryScrollHints.top && (
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-x-0 top-0 z-10 hidden h-7 bg-gradient-to-b from-[#F8F5F0] via-[#F8F5F0]/80 to-transparent lg:block"
|
|
/>
|
|
)}
|
|
{categoryScrollHints.bottom && (
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-x-0 bottom-0 z-10 hidden h-10 bg-gradient-to-t from-[#F8F5F0] via-[#F8F5F0]/90 to-transparent lg:block"
|
|
/>
|
|
)}
|
|
</div>
|
|
{categoryScrollHints.bottom && (
|
|
<p className="mt-2 hidden text-center text-[10px] font-medium tracking-wide text-[#8A8478] lg:block">
|
|
Scroll for more categories
|
|
</p>
|
|
)}
|
|
{categoryScrollHints.right && (
|
|
<p className="mt-2 text-center text-[10px] font-medium tracking-wide text-[#8A8478] lg:hidden">
|
|
Swipe for more categories
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* MAIN CONTENT */}
|
|
<div className="flex-1 min-w-0">
|
|
{/* Search + Vegetarian Filter */}
|
|
<div className="mb-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
|
|
<input
|
|
type="text"
|
|
placeholder={t.menu.searchPlaceholder}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full sm:max-w-80 rounded-2xl border border-[#e5e1d7] bg-white px-5 py-3 text-base sm:text-sm placeholder:text-[#8A8478] focus:border-[#c99a2e] focus:ring-2 focus:ring-[#c99a2e]/20 transition-all"
|
|
/>
|
|
|
|
<button
|
|
onClick={() => setShowVegetarianOnly(!showVegetarianOnly)}
|
|
className={`w-full sm:w-auto px-6 py-3.5 rounded-2xl text-sm font-medium border transition-all active:scale-[0.985] touch-manipulation ${
|
|
showVegetarianOnly
|
|
? "bg-[#0f5a4a] text-white border-[#0f5a4a]"
|
|
: "border-[#e5e1d7] hover:border-[#c99a2e] text-[#101724] bg-white"
|
|
}`}
|
|
>
|
|
{showVegetarianOnly ? t.menu.vegetarianOnly : t.menu.showVegetarian}
|
|
</button>
|
|
|
|
{(searchQuery || showVegetarianOnly || activeCategory !== "All") && (
|
|
<button
|
|
onClick={() => {
|
|
setSearchQuery("");
|
|
setShowVegetarianOnly(false);
|
|
setActiveCategory("All");
|
|
}}
|
|
className="text-sm font-medium text-[#c99a2e] hover:text-[#8f6b22] active:underline"
|
|
>
|
|
{t.menu.clearFilters}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Menu Items */}
|
|
{filteredCategories.length === 0 ? (
|
|
<div className="text-center py-16 text-[#6B665F]">
|
|
{t.menu.noResults}
|
|
</div>
|
|
) : (
|
|
filteredCategories.map((category) => (
|
|
<div key={category.id} className="mb-16">
|
|
<div className="flex items-center gap-4 mb-7">
|
|
<div className="text-xl sm:text-2xl md:text-3xl tracking-[-1px] text-[#101724] min-w-0 break-words">
|
|
{getCategoryName(language, category.id, category.name)}
|
|
</div>
|
|
<div className="flex-1 h-px bg-gradient-to-r from-[#e5e1d7] to-transparent" />
|
|
<div className="text-sm font-medium text-[#68717f] tracking-widest">
|
|
{category.items.length} {t.menu.dishes}
|
|
</div>
|
|
</div>
|
|
|
|
{category.items.length === 0 ? (
|
|
<p className="rounded-2xl border border-dashed border-[#EDE6D9] bg-white/60 px-6 py-10 text-center text-sm text-[#8A8478]">
|
|
Dishes coming soon to this category.
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{category.items.map((item) => {
|
|
const usesDetailModal = hasDishDetailModal(item.id, category.id);
|
|
const inclusionNote = getMenuItemInclusionNote(language, category.id);
|
|
|
|
return (
|
|
<motion.div
|
|
key={item.id}
|
|
data-id={item.id}
|
|
className="menu-card group bg-white border border-[#EDE6D9] rounded-2xl overflow-hidden flex flex-col hover:border-[#c99a2e]/40 transition-all duration-150 touch-manipulation"
|
|
whileHover={!isMobile ? {
|
|
y: -4,
|
|
boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
transition: { type: "spring", stiffness: 300, damping: 20 }
|
|
} : {}}
|
|
>
|
|
{/* Media - Always poster for performance. Advanced desktop hover effect (scale + lift + glow) + subtle sound. Mobile uses simple scale. */}
|
|
<div
|
|
className={`relative h-52 overflow-hidden bg-[#F2EDE4] ${
|
|
usesDetailModal ? "cursor-pointer" : ""
|
|
}`}
|
|
onClick={
|
|
usesDetailModal
|
|
? (e) => {
|
|
e.stopPropagation();
|
|
openDishDetails(item);
|
|
}
|
|
: undefined
|
|
}
|
|
onMouseEnter={() => {
|
|
if (!isMobile) playHoverSound();
|
|
}}
|
|
>
|
|
<motion.img
|
|
src={getCardImageSrc(item, category.id)}
|
|
alt={getItemName(item)}
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
loading="lazy"
|
|
whileHover={!isMobile ? {
|
|
scale: 1.08,
|
|
y: -3,
|
|
transition: { type: "spring", stiffness: 260, damping: 20 }
|
|
} : {}}
|
|
onError={(e) => {
|
|
applyNextImageFallback(
|
|
e.target as HTMLImageElement,
|
|
getCardImageCandidates(item, category.id),
|
|
(e.target as HTMLImageElement).src
|
|
);
|
|
}}
|
|
/>
|
|
{/* Subtle gradient + hover shine overlay for advanced desktop feel */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/5 via-black/10 to-black/25" />
|
|
{!isMobile && (
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
)}
|
|
<div className="absolute top-3 right-3 z-10">
|
|
<WishlistButton
|
|
item={{ id: item.id, name: getItemName(item), price: item.price, image: item.image }}
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 flex flex-col flex-1">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:justify-between sm:items-start mb-4 min-w-0">
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="text-lg sm:text-[22px] leading-tight tracking-[-0.4px] text-[#2C2A26] break-words">
|
|
{getItemName(item)}
|
|
</h3>
|
|
{inclusionNote && (
|
|
<p className="mt-1 text-xs font-medium text-[#8f6b22]">
|
|
{inclusionNote}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="shrink-0">{renderMenuPrice(item)}</div>
|
|
</div>
|
|
|
|
{usesDetailModal ? (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
openDishDetails(item);
|
|
}}
|
|
className="text-left text-[10px] text-[#8A8478] tracking-wide hover:text-[#B38B4D] hover:underline underline-offset-2 transition-colors mb-4"
|
|
>
|
|
{t.menu.seeDetails}
|
|
</button>
|
|
) : (
|
|
item.description && (
|
|
<p className="text-[#6B665F] text-[15px] leading-relaxed mb-4">
|
|
{getItemDescription(item)}
|
|
</p>
|
|
)
|
|
)}
|
|
|
|
<div className="mt-auto space-y-3">
|
|
{item.isVegetarian && (
|
|
<span className="inline-block text-xs px-3 py-1 rounded-full bg-[#3F5C4A]/10 text-[#3F5C4A] tracking-wider">
|
|
VEGETARIAN
|
|
</span>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => addToCart(buildCartLineFromMenuItem(item))}
|
|
className="w-full py-3.5 text-sm tracking-[0.6px] border border-[#B38B4D] text-[#B38B4D] rounded-full hover:bg-[#B38B4D] hover:text-white active:bg-[#8C6B3A] active:text-white active:scale-[0.985] font-medium transition-all touch-manipulation"
|
|
>
|
|
{t.wishlistDrawer.addToCart}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Footer />
|
|
|
|
{detailItem && (
|
|
<DishDetailsModal
|
|
item={detailItem}
|
|
displayName={getItemName(detailItem)}
|
|
description={getItemDescription(detailItem)}
|
|
isOpen={!!detailItem}
|
|
onClose={() => setDetailItem(null)}
|
|
labels={{
|
|
ingredients: t.menu.ingredients,
|
|
close: t.menu.closeDetails,
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|