Navigation Menu

1import type { JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core"
5import * as NavigationMenuPrimitive from "@kobalte/core/navigation-menu"
6 
7import { cn } from "~/lib/utils"
8 
9const NavigationMenuItem = NavigationMenuPrimitive.Menu
10 
11type NavigationMenuProps<T extends ValidComponent = "ul"> =
12  NavigationMenuPrimitive.NavigationMenuRootProps<T> & {
13    class?: string | undefined
14    children?: JSX.Element
15  }
16 
17const NavigationMenu = <T extends ValidComponent = "ul">(
18  props: PolymorphicProps<T, NavigationMenuProps<T>>
19) => {
20  const [local, others] = splitProps(props as NavigationMenuProps, ["class", "children"])
21  return (
22    <NavigationMenuPrimitive.Root
23      gutter={6}
24      class={cn(
25        "group/menu flex w-max flex-1 list-none items-center justify-center data-[orientation=vertical]:flex-col [&>li]:w-full",
26        local.class
27      )}
28      {...others}
29    >
30      {local.children}
31      <NavigationMenuViewport />
32    </NavigationMenuPrimitive.Root>
33  )
34}
35 
36type NavigationMenuTriggerProps<T extends ValidComponent = "button"> =
37  NavigationMenuPrimitive.NavigationMenuTriggerProps<T> & {
38    class?: string | undefined
39  }
40 
41const NavigationMenuTrigger = <T extends ValidComponent = "button">(
42  props: PolymorphicProps<T, NavigationMenuTriggerProps<T>>
43) => {
44  const [local, others] = splitProps(props as NavigationMenuTriggerProps, ["class"])
45  return (
46    <NavigationMenuPrimitive.Trigger
47      class={cn(
48        "group/trigger inline-flex h-10 w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[expanded]:bg-accent/50",
49        local.class
50      )}
51      {...others}
52    />
53  )
54}
55const NavigationMenuIcon = () => {
56  return (
57    <NavigationMenuPrimitive.Icon aria-hidden="true">
58      <svg
59        xmlns="http://www.w3.org/2000/svg"
60        viewBox="0 0 24 24"
61        fill="none"
62        stroke="currentColor"
63        stroke-width="2"
64        stroke-linecap="round"
65        stroke-linejoin="round"
66// … truncated