"use client"; import { registerCdpRecipe } from "@/lib/registry/analytics/cdp-events"; import mobileMenuRecipe from "@/recipes/mobile-menu.recipe"; registerCdpRecipe(mobileMenuRecipe); import * as React from "react"; import { useCallback } from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { Dialog, DialogContent, DialogTitle, DialogTrigger, } from "@/components/registry/primitives/core/dialog"; import { Drawer as DrawerPrimitive, DrawerContent as DrawerPrimitiveContent, DrawerTitle as DrawerPrimitiveTitle, DrawerTrigger as DrawerPrimitiveTrigger, } from "@/components/registry/primitives/core/drawer"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { Sheet, SheetContent, SheetTitle, SheetTrigger, } from "@/components/registry/primitives/core/sheet"; import { VisuallyHidden } from "@/components/registry/primitives/core/visually-hidden"; import { useComponentAnalytics } from "@/lib/registry/analytics/use-component-analytics"; import { cn } from "@/lib/registry/cn"; import { Placeholder, type TextField } from "@/lib/registry/sitecore"; import type { ComponentProps } from "@/lib/registry/sitecore-types"; export interface MobileMenuFields { /** Accessible title shown in the panel header (visually hidden by default). */ Title?: TextField; /** Accessible label for the hamburger trigger button. Defaults to "Open menu". */ TriggerLabel?: TextField; } export interface MobileMenuAnalyticsMeta { id?: string; instanceKey?: string; instanceScope?: "site" | "page"; variant?: "Drawer" | "Overlay" | "BottomSheet"; } export type MobileMenuProps = ComponentProps & { fields?: MobileMenuFields; params?: { [key: string]: string }; }; function isEnabled(value: string | boolean | undefined): boolean { if (typeof value === "boolean") return value; if (!value) return false; return ["1", "true", "yes", "on"].includes(value.trim().toLowerCase()); } function useMobileMenuChrome( props: MobileMenuProps, variant: MobileMenuAnalyticsMeta["variant"], ) { const params = props.params ?? {}; const ph = params.DynamicPlaceholderId ?? "1"; const id = params.RenderingIdentifier; const styles = params.styles; const title = props.fields?.Title?.value ?? "Navigation"; const triggerLabel = props.fields?.TriggerLabel?.value ?? "Open menu"; const placeholderName = `mobile-menu-${ph}`; const instanceKey = params.InstanceKey || id; const instanceScope = (params.InstanceScope as "site" | "page" | undefined) ?? "site"; const trackEvents = isEnabled(params.TrackEvents); const analytics = useComponentAnalytics("mobile-menu"); // `closed` event dropped during the taxonomy migration — fires // only on the opened transition now. const handleOpenChange = useCallback( (open: boolean) => { if (!trackEvents || !open) return; analytics.fire("opened", { id, instanceKey, instanceScope, variant, }); }, [analytics, trackEvents, id, instanceKey, instanceScope, variant], ); return { ph, id, styles, title, triggerLabel, placeholderName, handleOpenChange, }; } // `asChild` on the Radix Trigger clones this element and merges its // own props (`onClick`, `aria-expanded`, `data-state`, `ref`, …) onto // it. Forward the remaining props + ref to the inner Button so the // merged handlers actually reach the underlying ); }); /** * Side-drawer mobile menu — slides in from the inline-start edge. * Best for sites with deep nav hierarchies that need vertical scroll * room. Wraps the radix Sheet primitive with `side="start"` so the * drawer flips correctly under RTL. * * Authors compose nav content into the `mobile-menu-{ph}` placeholder * — typically a vertical stack of `link-list@1` renderings or a * dedicated mobile-nav rendering. */ export function Drawer(props: MobileMenuProps) { const { id, styles, title, triggerLabel, placeholderName, handleOpenChange } = useMobileMenuChrome(props, "Drawer"); return (

{title}

); } /** * Full-screen overlay mobile menu — opens a centered modal that fills * the viewport. Best for sites that want the menu to feel like a * dedicated route (covers all background chrome). Wraps radix Dialog. * * Authors compose nav content into the `mobile-menu-{ph}` placeholder. */ export function Overlay(props: MobileMenuProps) { const { id, styles, title, triggerLabel, placeholderName, handleOpenChange } = useMobileMenuChrome(props, "Overlay"); return (

); } /** * Bottom-sheet mobile menu — slides up from the bottom with a drag * affordance. Best for sites that want thumb-reachable nav on * mobile, or that already use bottom-sheet patterns elsewhere * (e.g. e-commerce filter sheets). Wraps the Vaul-backed Drawer * primitive. * * Authors compose nav content into the `mobile-menu-{ph}` placeholder. */ export function Sheet_(props: MobileMenuProps) { const { id, styles, title, triggerLabel, placeholderName, handleOpenChange } = useMobileMenuChrome(props, "BottomSheet"); return (

{title}

); } // Re-export with a Sitecore-friendly name. The variant is named // `BottomSheet` on the Sitecore side because `Sheet` would collide // with the React identifier exported from the primitive. export { Sheet_ as BottomSheet }; export default Drawer; export const componentType = "universal";

Mobile Menu

Showcase

Mobile Menu