navigation-menu

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6import NavigationMenuPositioner from "./navigation-menu-positioner.astro"
7 
8type Props = HTMLAttributes<"nav"> & {
9  delayOpen?: number
10  delayClose?: number
11  openOnFocus?: boolean
12  side?: "top" | "right" | "bottom" | "left"
13  align?: "start" | "center" | "end"
14  sideOffset?: number
15  alignOffset?: number
16  positionMethod?: "absolute" | "fixed"
17  safeTriangle?: boolean
18  debugSafeTriangle?: boolean
19}
20 
21const {
22  class: className = "",
23  delayOpen = 0,
24  delayClose = 0,
25  openOnFocus,
26  side = "bottom",
27  align = "start",
28  sideOffset = 0,
29  alignOffset = 0,
30  positionMethod = "absolute",
31  safeTriangle,
32  debugSafeTriangle,
33  ...props
34} = Astro.props
35---
36 
37<nav
38  {...props}
39  data-slot="navigation-menu"
40  data-delay-open={delayOpen}
41  data-delay-close={delayClose}
42  data-open-on-focus={openOnFocus}
43  data-side={side}
44  data-align={align}
45  data-side-offset={sideOffset}
46  data-align-offset={alignOffset}
47  data-position-method={positionMethod}
48  data-safe-triangle={safeTriangle}
49  data-debug-safe-triangle={debugSafeTriangle}
50  class={cn(
51    "group/navigation-menu relative flex flex-1 items-center justify-center",
52    className
53  )}
54>
55  <slot />
56  <NavigationMenuPositioner align={align} />
57</nav>
58 
59<script>
60  import { create } from "@data-slot/navigation-menu"
61 
62  create()
63</script>