sidebar

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6const SIDEBAR_WIDTH = "16rem"
7const SIDEBAR_WIDTH_MOBILE = "18rem"
8const SIDEBAR_WIDTH_ICON = "3rem"
9 
10type Props = HTMLAttributes<"div"> & {
11  defaultOpen?: boolean
12  open?: boolean
13}
14 
15const {
16  class: className,
17  style,
18  defaultOpen = true,
19  open,
20  ...props
21} = Astro.props
22 
23const resolvedStyle = [
24  `--sidebar-width: ${SIDEBAR_WIDTH}`,
25  `--sidebar-width-mobile: ${SIDEBAR_WIDTH_MOBILE}`,
26  `--sidebar-width-icon: ${SIDEBAR_WIDTH_ICON}`,
27  typeof style === "string" ? style : undefined,
28]
29  .filter(Boolean)
30  .join("; ")
31---
32 
33<div
34  data-slot="sidebar-wrapper"
35  data-default-open={defaultOpen ? "true" : "false"}
36  data-open={open === undefined ? undefined : open ? "true" : "false"}
37  data-sidebar-initializing="true"
38  style={resolvedStyle}
39  class={cn(
40    "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
41    className
42  )}
43  {...props}
44>
45  <slot />
46  <style is:inline>
47    [data-slot="sidebar-wrapper"][data-sidebar-initializing="true"]
48      [data-slot="sidebar-gap"],
49    [data-slot="sidebar-wrapper"][data-sidebar-initializing="true"]
50      [data-slot="sidebar-container"] {
51      transition: none !important;
52    }
53  </style>
54  <script is:inline>
55    ;(() => {
56      window.__fulldevSyncSidebarProvider ??= (provider, open) => {
57        const state = open ? "expanded" : "collapsed"
58        const sidebar = provider.querySelector(
59          "[data-slot='sidebar']:not([data-mobile='true'])"
60        )
61        const collapsible = sidebar?.dataset.sidebarCollapsible ?? "offcanvas"
62 
63        provider.dataset.open = open ? "true" : "false"
64        provider.dataset.state = state
65 
66        if (sidebar) {
67          sidebar.dataset.state = collapsible === "none" ? "expanded" : state
68          sidebar.dataset.collapsible =
69            collapsible === "none" ? "none" : open ? "" : collapsible
70        }
71 
72        provider
73          .querySelectorAll("[data-sidebar='trigger'], [data-sidebar='rail']")
74          .forEach((control) => {
75            control.setAttribute("aria-expanded", String(open))
76          })
77 
78        provider
79          .querySelectorAll("[data-sidebar='menu-tooltip']")
80          .forEach((tooltip) => {
81            tooltip.hidden = state !== "collapsed"
82          })
83      }
84 
85      const provider = document.currentScript?.closest(
86        "[data-slot='sidebar-wrapper']"
87      )
88      if (!(provider instanceof HTMLElement)) return
89 
90// … truncated