navigation-menu

1import type { PolymorphicProps } from "@kobalte/core";
2import * as NavigationMenuPrimitive from "@kobalte/core/navigation-menu";
3 
4import { cn } from "~/lib/utils.ts";
5import IconChevronDown from "~icons/lucide/chevron-down";
6import { cva } from "class-variance-authority";
7 
8import type { JSX, ValidComponent } from "solid-js";
9import {
10  createContext,
11  createEffect,
12  createSignal,
13  onCleanup,
14  Show,
15  splitProps,
16  useContext,
17} from "solid-js";
18 
19// Kobalte folds Radix's `Root` and `List` into a single primitive: the root
20// renders the `<nav>` wrapper and the `<ul>` itself, so there is no separate
21// `NavigationMenuList`. It also has no `Item` element — `NavigationMenu.Menu`
22// only provides context, and the `<li>` wrappers come from `Trigger`/`Link`.
23const NavigationMenuItem = NavigationMenuPrimitive.Menu;
24 
25// Kobalte's `Portal` mounts a content into the viewport, so with
26// `viewport={false}` the content has to render in place instead. The root
27// publishes the flag for `NavigationMenuContent` to read.
28const NavigationMenuViewportContext = createContext<() => boolean>(() => true);
29 
30type NavigationMenuProps<T extends ValidComponent = "ul"> =
31  & NavigationMenuPrimitive.NavigationMenuRootProps<T>
32  & {
33    class?: string | undefined;
34    children?: JSX.Element;
35    viewport?: boolean;
36  };
37 
38// Kobalte's popper centres the viewport on the menu bar; upstream's wrapper is
39// `left-0`, so the placement is pinned to the start edge — on the axis Kobalte
40// itself would pick for the orientation, so a vertical menu still opens sideways
41// the way its `data-[orientation=vertical]:flex-col` bar expects.
42//
43// `viewport={false}` also has to be given its own dismissal. Kobalte wires
44// `onEscapeKeyDown` only into the viewport's `DismissableLayer` and into the
45// `Popper.Positioner` branch of `MenuContentBase`; with no viewport neither of
46// them renders, so nothing but an outside click can close the menu. The root
47// therefore takes over the open menu's value and closes it from a document-level
48// `keydown` listener — the same place Kobalte's own dismissable layer listens —
49// attached only while such a menu is open.
50const NavigationMenu = <T extends ValidComponent = "ul">(
51  props: PolymorphicProps<T, NavigationMenuProps<T>>,
52) => {
53  const [local, others] = splitProps(props as NavigationMenuProps, [
54    "class",
55    "children",
56    "viewport",
57    "value",
58    "onValueChange",
59  ]);
60  const viewport = () => local.viewport ?? true;
61// … truncated