"use client"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/registry/primitives/core/popover"; import { Link } from "@/components/registry/primitives/editables/link"; import { cn } from "@/lib/registry/cn"; import { type LinkField, Placeholder, type TextField, } from "@/lib/registry/sitecore"; import type { ComponentProps } from "@/lib/registry/sitecore-types"; export interface NavItemFields { /** Stable id used to scope the per-item panel placeholder name. */ Id?: string; Title?: TextField; /** When present, item navigates. When absent (and HasPanel is on), item is panel-only. */ Link?: LinkField; /** * Opt-in for a per-item mega-menu panel. When true, a dynamic * placeholder `nav-item-panel-{id}-{ph}` is rendered next to the * item; clicking the chevron toggles it. Authors compose whatever * renderings they want into the panel (RichText + LinkLists + * Buttons + LinkList(social-icon) — the typical mega-menu pattern). */ HasPanel?: boolean | string; } export interface MainNavFields { Items?: NavItemFields[]; } /** * **Public API.** Flat camelCase props matching the SDK component-map * default convention. The recipe's `Items` Treelist arrives as the * lowercased `items` prop here — each entry's `fields` is hoisted to * the top level by the `flattenLinkedItems: ["Items"]` config in * `main-nav.sitecore.ts`, so the runtime reads `item.Title?.value` * (PascalCase keys survive the flatten). */ export interface MainNavVariantProps { id?: string; styles?: string; isEditing?: boolean; rendering?: ComponentProps["rendering"]; items?: NavItemFields[]; } function isEnabled(value: boolean | string | undefined): boolean { if (typeof value === "boolean") return value; if (!value) return false; return ["1", "true", "yes", "on"].includes(value.trim().toLowerCase()); } function NavItem({ item, index, rendering, }: { item: NavItemFields; index: number; rendering: ComponentProps["rendering"] | undefined; }) { const hasPanel = isEnabled(item.HasPanel); const hasLink = Boolean(item.Link?.value?.href); const title = item.Title?.value; // Defensive: skip items with neither a link nor a panel — nothing to render. if (!hasLink && !hasPanel) return null; // Plain link — no chevron, no popover. if (hasLink && !hasPanel) { return ( ); } // Trigger with panel. When a link is also present, the title is the link // (clicking it navigates) and only the chevron toggles the panel. // Placeholder key is per-item-index; the SDK regex requires a digit // segment after the prefix, so we use the array index (always digit) // rather than the item's Sitecore GUID. Two main-nav placements on // one page would collide — single-placement is the realistic case. const placeholderName = `nav-item-panel-${index}`; return (

{hasLink ? ( ) : null} {!hasLink && title ? {title} : null}

{rendering ? ( ) : null} ); } /** * Desktop main navigation strip. Renders an ordered list of top-level * items; items with a panel expose a dynamic * `nav-item-panel-{id}-{ph}` placeholder that authors fill with * arbitrary renderings (RichText, LinkLists, Buttons, etc.) — the * mega-menu pattern. * * Hidden below `md` breakpoint (`hidden md:flex`); the Header shell * surfaces a mobile-only slot for mobile-menu renderings instead. * Mobile-menu patterns are a separate rendering family — this * component intentionally does not collapse to a hamburger. */ export function Default({ id, styles, items = [], rendering, }: MainNavVariantProps) { return ( ); } export default Default; export const componentType = "universal";

Main Nav

Showcase

Main Nav