+
+ {/* Left section: hamburger */}
+
+
+
- {/* Search */}
-
-
+ {/* Center section: logo (always centered via equal flex-1 siblings) */}
+
+
+
+
-
-
- {/* Navigation */}
-
+ {/* Right section: actions */}
+
+ {/* Country/Currency Switcher - desktop only (hidden on mobile+tablet) */}
+
+
+
- {/* Actions */}
-
- {/* Country/Currency Switcher */}
-
+ {/* Search toggle */}
+
+
+ {/* Account - desktop only */}
+
+
+
{/* Cart */}
-
- {/* Account */}
-
+
+ {/* Click-outside overlay — closes search when clicking anywhere outside */}
+ {searchOpen && (
+
+ )}
+
+ {/* Search bar - replaces header content */}
+
{
+ if (e.key === "Escape") closeSearch();
+ }}
+ className={`absolute inset-0 z-50 transition-all duration-300 ease-in-out ${
+ searchOpen
+ ? "translate-y-0 opacity-100"
+ : "-translate-y-4 opacity-0 pointer-events-none"
+ }`}
+ >
+
+
);
}
diff --git a/src/components/layout/MobileMenu.tsx b/src/components/layout/MobileMenu.tsx
new file mode 100644
index 00000000..50e54e0c
--- /dev/null
+++ b/src/components/layout/MobileMenu.tsx
@@ -0,0 +1,450 @@
+"use client";
+
+import type { Category } from "@spree/sdk";
+import { ArrowLeft, Check, ChevronRight, User, X } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { Button } from "@/components/ui/button";
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetFooter,
+ SheetTitle,
+} from "@/components/ui/sheet";
+import { useCart } from "@/contexts/CartContext";
+import { type CountryWithMarket, useStore } from "@/contexts/StoreContext";
+import { updateOrderMarket } from "@/lib/data/checkout";
+import { setStoreCookies } from "@/lib/utils/cookies";
+import { getPathWithoutPrefix } from "@/lib/utils/path";
+
+// Convert ISO country code to flag emoji
+function countryToFlag(countryCode: string): string {
+ const code = countryCode.toUpperCase();
+ if (code.length !== 2) return "";
+ const firstChar = code.charCodeAt(0) - 65 + 0x1f1e6;
+ const secondChar = code.charCodeAt(1) - 65 + 0x1f1e6;
+ return String.fromCodePoint(firstChar, secondChar);
+}
+
+type PanelType =
+ | { kind: "main" }
+ | { kind: "category"; category: Category }
+ | { kind: "country" };
+
+interface MobileMenuProps {
+ rootCategories: Category[];
+ basePath: string;
+}
+
+export function MobileMenu({ rootCategories, basePath }: MobileMenuProps) {
+ const [open, setOpen] = useState(false);
+ const [hasInteracted, setHasInteracted] = useState(false);
+ const [panelStack, setPanelStack] = useState
([{ kind: "main" }]);
+ // animatedIndex trails panelStack — new panels mount off-screen, then animate in
+ const [animatedIndex, setAnimatedIndex] = useState(0);
+ const rafRef = useRef(null);
+ const timeoutRef = useRef(null);
+
+ const { country, currency, countries, setCountry } = useStore();
+ const { cart, refreshCart } = useCart();
+ const router = useRouter();
+ const pathname = usePathname();
+
+ const currentPanel = panelStack[panelStack.length - 1];
+
+ const cancelPendingCallbacks = () => {
+ if (rafRef.current !== null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ if (timeoutRef.current !== null) {
+ clearTimeout(timeoutRef.current);
+ timeoutRef.current = null;
+ }
+ };
+
+ const pushPanel = (panel: PanelType) => {
+ cancelPendingCallbacks();
+ // Step 1: mount the new panel off-screen (translate-x-full) via flushSync
+ flushSync(() => {
+ setPanelStack((prev) => [...prev, panel]);
+ });
+ // Step 2: on next frame, update animatedIndex to trigger slide-in
+ rafRef.current = requestAnimationFrame(() => {
+ rafRef.current = null;
+ setAnimatedIndex((prev) => prev + 1);
+ });
+ };
+
+ const popPanel = () => {
+ cancelPendingCallbacks();
+ // Step 1: animate out by decrementing animatedIndex
+ setAnimatedIndex((prev) => Math.max(0, prev - 1));
+ // Step 2: after transition, remove the panel from the stack
+ timeoutRef.current = setTimeout(() => {
+ timeoutRef.current = null;
+ setPanelStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev));
+ }, 300);
+ };
+
+ const handleCountrySelect = async (entry: CountryWithMarket) => {
+ const newLocale = entry.default_locale || "en";
+ const newCurrency = entry.currency;
+ const pathRest = getPathWithoutPrefix(pathname);
+ const newPath = `/${entry.iso.toLowerCase()}/${newLocale}${pathRest}`;
+
+ if (cart && (cart.currency !== newCurrency || cart.locale !== newLocale)) {
+ const result = await updateOrderMarket(cart.id, {
+ currency: newCurrency,
+ locale: newLocale,
+ });
+ if (!result.success) return;
+ await refreshCart();
+ }
+
+ setStoreCookies(entry.iso.toLowerCase(), newLocale);
+ setCountry(entry.iso.toLowerCase());
+ router.push(newPath);
+ };
+
+ const handleOpenChange = (value: boolean) => {
+ setOpen(value);
+ if (!value) {
+ cancelPendingCallbacks();
+ setPanelStack([{ kind: "main" }]);
+ setAnimatedIndex(0);
+ }
+ };
+
+ const handleNavigate = (href: string) => {
+ setOpen(false);
+ router.push(href);
+ };
+
+ // Flatten root categories: show their children directly instead of taxonomy names
+ const menuCategories = rootCategories.flatMap((root) => root.children ?? []);
+
+ // Shared link style
+ const linkClass =
+ "text-left text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-lg px-3 py-2.5 text-base transition-colors";
+
+ // Shared button style for items with children (chevron)
+ const categoryButtonClass =
+ "flex items-center justify-between w-full text-left text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-lg px-3 py-2.5 text-base transition-colors";
+
+ return (
+
+ {/* Animated hamburger / X button — two-phase animation matching Lottie reference */}
+
+
+
+ Menu
+ {/* Menu header — changes based on active panel */}
+
+ {/* "Menu" title — visible when on main panel */}
+
+ Menu
+
+ {/* Back button + category name — visible on sub-panels */}
+
+
+
+ {/* Main menu panel */}
+
+
+
+ {/* Footer: Country switcher (mobile + tablet) + Account (mobile only) */}
+
+
+
+
+
+
+ My Account
+
+
+
+
+
+ {/* Category sub-panels — one for each level in the stack */}
+ {panelStack.map((panel, index) => {
+ if (panel.kind !== "category") return null;
+ const isAnimatedIn = index <= animatedIndex;
+ let translateClass = "translate-x-full";
+ if (isAnimatedIn && index < panelStack.length - 1)
+ translateClass = "-translate-x-full";
+ else if (isAnimatedIn) translateClass = "translate-x-0";
+
+ return (
+
+ {/* Back button (mobile only — desktop uses the global header) */}
+
+
+
+
+ {/* Children */}
+
+
+ {/* "View all" at the bottom */}
+
+
+
+
+ );
+ })}
+
+ {/* Country selector panel */}
+
+
+
+
+ {countries.map((c) => {
+ const isSelected =
+ c.iso.toLowerCase() === country.toLowerCase();
+ return (
+
+ );
+ })}
+
+
+
+
{products.map((product, index) => (
+
{[...Array(6)].map((_, i) => (
))}
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 9fa65ec1..d7238847 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -3,7 +3,7 @@
import type { Product } from "@spree/sdk";
import { Search } from "lucide-react";
import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
import {
InputGroup,
InputGroupAddon,
@@ -16,9 +16,11 @@ import { getProducts } from "@/lib/data/products";
interface SearchBarProps {
basePath: string;
+ autoFocus?: boolean;
+ onNavigate?: () => void;
}
-export function SearchBar({ basePath }: SearchBarProps) {
+export function SearchBar({ basePath, autoFocus, onNavigate }: SearchBarProps) {
const router = useRouter();
const { currency } = useStore();
const [query, setQuery] = useState("");
@@ -27,8 +29,9 @@ export function SearchBar({ basePath }: SearchBarProps) {
const [loading, setLoading] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(-1);
const inputRef = useRef
(null);
- const containerRef = useRef(null);
const debounceRef = useRef(null);
+ const blurTimeoutRef = useRef(null);
+ const requestIdRef = useRef(0);
// Fetch suggestions
const fetchSuggestions = useCallback(
@@ -38,6 +41,7 @@ export function SearchBar({ basePath }: SearchBarProps) {
return;
}
+ const currentRequestId = requestIdRef.current;
setLoading(true);
try {
const response = await getProducts({
@@ -45,55 +49,45 @@ export function SearchBar({ basePath }: SearchBarProps) {
fields: ["name", "slug", "price", "thumbnail_url"],
limit: 6,
});
+ // Discard stale responses if a newer query has been issued
+ if (requestIdRef.current !== currentRequestId) return;
setSuggestions(response.data);
if (response.data.length > 0) {
trackQuickSearch(response.data, searchQuery, currency);
}
} catch (error) {
+ if (requestIdRef.current !== currentRequestId) return;
console.error("Search failed:", error);
setSuggestions([]);
} finally {
- setLoading(false);
+ if (requestIdRef.current === currentRequestId) {
+ setLoading(false);
+ }
}
},
[currency],
);
- // Debounced search
- useEffect(() => {
+ // Debounced search — called from onChange handler, no useEffect needed
+ const handleQueryChange = (value: string) => {
+ setQuery(value);
+ setIsOpen(true);
+ setSelectedIndex(-1);
+ requestIdRef.current += 1;
+
if (debounceRef.current) {
clearTimeout(debounceRef.current);
}
- if (query.length >= 2) {
+ if (value.length >= 2) {
debounceRef.current = setTimeout(() => {
- fetchSuggestions(query);
+ fetchSuggestions(value);
}, 300);
} else {
setSuggestions([]);
+ setLoading(false);
}
-
- return () => {
- if (debounceRef.current) {
- clearTimeout(debounceRef.current);
- }
- };
- }, [query, fetchSuggestions]);
-
- // Close on click outside
- useEffect(() => {
- const handleClickOutside = (e: MouseEvent) => {
- if (
- containerRef.current &&
- !containerRef.current.contains(e.target as Node)
- ) {
- setIsOpen(false);
- }
- };
-
- document.addEventListener("mousedown", handleClickOutside);
- return () => document.removeEventListener("mousedown", handleClickOutside);
- }, []);
+ };
// Handle form submit
const handleSubmit = (e: React.FormEvent) => {
@@ -102,6 +96,7 @@ export function SearchBar({ basePath }: SearchBarProps) {
router.push(`${basePath}/products?q=${encodeURIComponent(query.trim())}`);
setIsOpen(false);
inputRef.current?.blur();
+ onNavigate?.();
}
};
@@ -111,6 +106,21 @@ export function SearchBar({ basePath }: SearchBarProps) {
router.push(`${basePath}/products/${product.slug}`);
setIsOpen(false);
setQuery("");
+ onNavigate?.();
+ };
+
+ // Close suggestions on blur — delayed to allow click on suggestions
+ const handleBlur = () => {
+ blurTimeoutRef.current = setTimeout(() => {
+ setIsOpen(false);
+ }, 200);
+ };
+
+ // Cancel blur timeout when interacting with suggestions
+ const handleSuggestionsMouseDown = () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ }
};
// Handle keyboard navigation
@@ -144,21 +154,19 @@ export function SearchBar({ basePath }: SearchBarProps) {
isOpen && (suggestions.length > 0 || loading || query.length >= 2);
return (
-