@next-library/theme 1.0.7 → 1.0.8

package/dist/components/navigation/navbar/mobile-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/mobile-menu.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,YAAY,CAAC,EAAE;QACb,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,YAAiB,EAAE,EAAE,eAAe,kDAmD1E"}
+{"version":3,"file":"mobile-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/mobile-menu.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,YAAY,CAAC,EAAE;QACb,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,YAAiB,EAAE,EAAE,eAAe,kDAuD1E"}

package/dist/components/navigation/sidebar-left/sidebar.d.ts

@@ -4,10 +4,16 @@ interface SidebarNavigationProps {
     nodes: SidebarNode[];
     currentPath?: string;
     language?: Locale;
+    /**
+     * Called when a leaf page (a node with no children) is clicked. The mobile
+     * menu uses this to close the drawer once the user reaches an actual page,
+     * while folder navigations that only drill down leave the menu open.
+     */
+    onNavigateLeaf?: () => void;
     translations?: {
         toggleFolder?: string;
     };
 }
-export declare function SidebarNavigation({ nodes, currentPath, language: _language, translations, }: SidebarNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarNavigation({ nodes, currentPath, language: _language, onNavigateLeaf, translations, }: SidebarNavigationProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=sidebar.d.ts.map

package/dist/components/navigation/sidebar-left/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar-left/sidebar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAUtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEjD,UAAU,sBAAsB;IAC9B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE;QACb,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAsBD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,QAAQ,EAAE,SAAgB,EAC1B,YAAiB,GAClB,EAAE,sBAAsB,2CAkGxB"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar-left/sidebar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAUtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEjD,UAAU,sBAAsB;IAC9B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE;QACb,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAsBD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,QAAQ,EAAE,SAAgB,EAC1B,cAAc,EACd,YAAiB,GAClB,EAAE,sBAAsB,2CAyGxB"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React8 from 'react';
-import React8__default, { Suspense, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React8__default, { Suspense, useState, useRef, useEffect, useCallback, useMemo, useSyncExternalStore } from 'react';
 import { Logo, TopCategories, SearchBar, GithubLink, ThemeSwitcher, LanguageSwitcher, MobileMenu, GithubStar, ReadingProgress, Banner, CookieBanner, SidebarNavigation, GithubContributors, TableOfContents, CopyPageButton } from '@next-library/theme/client';
 import { FALLBACK_LOCALES, getDirection, getTopCategories, getSupportedLocales, getLocaleConfig, LOCALES_CONFIG } from '@next-library/core';
 export { extractLocaleFromPathname, extractPageData, getLocaleFromParams } from '@next-library/core';
@@ -3351,7 +3351,7 @@ function StickyBanner({
   locale = "en",
   closeLabel
 }) {
-  const [open, setOpen] = useState(true);
+  const [open2, setOpen] = useState(true);
   const { scrollY } = useScroll();
   const translations2 = getTranslations(locale);
   const ariaLabel = closeLabel || translations2.closeBanner;
@@ -3374,8 +3374,8 @@ function StickyBanner({
         opacity: 0
       },
       animate: {
-        y: open ? 0 : -100,
-        opacity: open ? 1 : 0
+        y: open2 ? 0 : -100,
+        opacity: open2 ? 1 : 0
       },
       transition: {
         duration: 0.3,
@@ -3393,7 +3393,7 @@ function StickyBanner({
               scale: 1
             },
             className: "absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer",
-            onClick: () => setOpen(!open),
+            onClick: () => setOpen(!open2),
             "aria-label": ariaLabel,
             children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-5 w-5 text-white", "aria-hidden": "true" })
           }
@@ -3545,7 +3545,7 @@ function SearchBar2({ language = "en", className }) {
   const router = useRouter();
   const translations2 = getTranslations(language);
   const [mounted, setMounted] = useState(false);
-  const [open, setOpen] = useState(false);
+  const [open2, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [results, setResults] = useState([]);
   const [recent, setRecent] = useState([]);
@@ -3592,7 +3592,7 @@ function SearchBar2({ language = "en", className }) {
     return () => window.removeEventListener("keydown", onKey);
   }, [isMac]);
   useEffect(() => {
-    if (!open) return;
+    if (!open2) return;
     setRecent(readRecent());
     const t = setTimeout(() => inputRef.current?.focus(), 20);
     const prev = document.body.style.overflow;
@@ -3601,9 +3601,9 @@ function SearchBar2({ language = "en", className }) {
       clearTimeout(t);
       document.body.style.overflow = prev;
     };
-  }, [open]);
+  }, [open2]);
   useEffect(() => {
-    if (!open) return;
+    if (!open2) return;
     if (!query.trim()) {
       setResults([]);
       setIsLoading(false);
@@ -3624,10 +3624,10 @@ function SearchBar2({ language = "en", className }) {
       }
     }, 180);
     return () => clearTimeout(id2);
-  }, [query, language, open]);
+  }, [query, language, open2]);
   const flat = useMemo(() => query.trim() ? results : [], [query, results]);
   useEffect(() => {
-    if (!open) return;
+    if (!open2) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -3646,7 +3646,7 @@ function SearchBar2({ language = "en", className }) {
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [open, flat, selected, close, go]);
+  }, [open2, flat, selected, close, go]);
   useEffect(() => {
     const node = listRef.current?.querySelector('[data-selected="true"]');
     node?.scrollIntoView({ block: "nearest" });
@@ -3673,7 +3673,7 @@ function SearchBar2({ language = "en", className }) {
       ]
     }
   );
-  const modal = open && mounted ? createPortal(
+  const modal = open2 && mounted ? createPortal(
     /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[100] flex items-start justify-center p-4 pt-[12vh]", role: "dialog", "aria-modal": "true", children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/70 backdrop-blur-sm", onClick: close, "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("div", { className: "cl-beam relative w-full max-w-xl shadow-[0_30px_90px_-24px_rgb(0_0_0/0.55)]", children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[calc(var(--radius)+2px)] bg-popover", children: [
@@ -4383,10 +4383,10 @@ function SidebarProvider({
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React8.useState(false);
   const [_open, _setOpen] = React8.useState(defaultOpen);
-  const open = openProp ?? _open;
+  const open2 = openProp ?? _open;
   const setOpen = React8.useCallback(
     (value) => {
-      const openState = typeof value === "function" ? value(open) : value;
+      const openState = typeof value === "function" ? value(open2) : value;
       if (setOpenProp) {
         setOpenProp(openState);
       } else {
@@ -4394,10 +4394,10 @@ function SidebarProvider({
       }
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [setOpenProp, open]
+    [setOpenProp, open2]
   );
   const toggleSidebar = React8.useCallback(() => {
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+    return isMobile ? setOpenMobile((open3) => !open3) : setOpen((open3) => !open3);
   }, [isMobile, setOpen, setOpenMobile]);
   React8.useEffect(() => {
     const handleKeyDown = (event) => {
@@ -4409,18 +4409,18 @@ function SidebarProvider({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
-  const state = open ? "expanded" : "collapsed";
+  const state = open2 ? "expanded" : "collapsed";
   const contextValue = React8.useMemo(
     () => ({
       state,
-      open,
+      open: open2,
       setOpen,
       isMobile,
       openMobile,
       setOpenMobile,
       toggleSidebar
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    [state, open2, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
   );
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
     "div",
@@ -4960,6 +4960,7 @@ function SidebarNavigation2({
   nodes,
   currentPath,
   language: _language = "en",
+  onNavigateLeaf,
   translations: translations2 = {}
 }) {
   const { toggleFolder = "Toggle folder" } = translations2;
@@ -4967,65 +4968,76 @@ function SidebarNavigation2({
     if (!node.websitePath) return null;
     const isActive = isActiveNode(node, currentPath);
     const hasActiveChildNode = hasActiveChild(node, currentPath);
-    return node.children && Object.keys(node.children).length > 0 ? /* @__PURE__ */ jsx(Collapsible, { className: "group/collapsible", children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-nowrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          Link2,
-          {
-            href: node.websitePath,
-            className: `group/row relative flex flex-nowrap items-center gap-2 flex-auto py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : hasActiveChildNode ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex-none", children: [
-                /* @__PURE__ */ jsx(FolderOpenIcon, { className: "h-4 w-4 group-data-[state=closed]/collapsible:hidden" }),
-                /* @__PURE__ */ jsx(FolderClosedIcon, { className: "h-4 w-4 group-data-[state=open]/collapsible:hidden" })
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: `flex-auto ${isActive ? "font-medium" : ""}`, children: node.title })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          CollapsibleTrigger2,
-          {
-            className: "p-1.5 rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground self-center",
-            "aria-label": `${toggleFolder}: ${node.title}`,
-            children: [
-              /* @__PURE__ */ jsx(
-                ChevronRight,
-                {
-                  className: "h-4 w-4 group-data-[state=open]/collapsible:hidden",
-                  "aria-hidden": "true"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ChevronDown,
-                {
-                  className: "h-4 w-4 group-data-[state=closed]/collapsible:hidden",
-                  "aria-hidden": "true"
-                }
-              )
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: Object.entries(node.children || {}).map(([, child]) => {
-        if (!child.websitePath) return null;
-        const isChildActive = isActiveNode(child, currentPath);
-        return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
-          Link2,
-          {
-            href: child.websitePath,
-            className: `group/row relative flex items-center gap-2 py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isChildActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : "text-muted-foreground hover:text-foreground"}`,
-            children: [
-              child.children && Object.keys(child.children).length > 0 ? /* @__PURE__ */ jsx(FolderClosedIcon, { className: "h-4 w-4 flex-none" }) : /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 flex-none" }),
-              /* @__PURE__ */ jsx("span", { className: "", children: child.title })
-            ]
-          }
-        ) }, child.websitePath);
-      }) }) })
-    ] }, node.websitePath) }, `menu-${node.websitePath}`) }, node.websitePath) : /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+    return node.children && Object.keys(node.children).length > 0 ? /* @__PURE__ */ jsx(
+      Collapsible,
+      {
+        defaultOpen: isActive || hasActiveChildNode,
+        className: "group/collapsible",
+        children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-nowrap items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              Link2,
+              {
+                href: node.websitePath,
+                className: `group/row relative flex flex-nowrap items-center gap-2 flex-auto py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : hasActiveChildNode ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex-none", children: [
+                    /* @__PURE__ */ jsx(FolderOpenIcon, { className: "h-4 w-4 group-data-[state=closed]/collapsible:hidden" }),
+                    /* @__PURE__ */ jsx(FolderClosedIcon, { className: "h-4 w-4 group-data-[state=open]/collapsible:hidden" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `flex-auto ${isActive ? "font-medium" : ""}`, children: node.title })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              CollapsibleTrigger2,
+              {
+                className: "p-1.5 rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground self-center",
+                "aria-label": `${toggleFolder}: ${node.title}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ChevronRight,
+                    {
+                      className: "h-4 w-4 group-data-[state=open]/collapsible:hidden",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      className: "h-4 w-4 group-data-[state=closed]/collapsible:hidden",
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: Object.entries(node.children || {}).map(([, child]) => {
+            if (!child.websitePath) return null;
+            const isChildActive = isActiveNode(child, currentPath);
+            const childIsLeaf = !child.children || Object.keys(child.children).length === 0;
+            return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+              Link2,
+              {
+                href: child.websitePath,
+                onClick: childIsLeaf ? onNavigateLeaf : void 0,
+                className: `group/row relative flex items-center gap-2 py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isChildActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : "text-muted-foreground hover:text-foreground"}`,
+                children: [
+                  child.children && Object.keys(child.children).length > 0 ? /* @__PURE__ */ jsx(FolderClosedIcon, { className: "h-4 w-4 flex-none" }) : /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 flex-none" }),
+                  /* @__PURE__ */ jsx("span", { className: "", children: child.title })
+                ]
+              }
+            ) }, child.websitePath);
+          }) }) })
+        ] }, node.websitePath) }, `menu-${node.websitePath}`)
+      },
+      node.websitePath
+    ) : /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
       Link2,
       {
         href: node.websitePath,
+        onClick: onNavigateLeaf,
         className: `group/row relative flex items-center gap-2 py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : "text-muted-foreground hover:text-foreground"}`,
         children: [
           /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 flex-none" }),
@@ -5035,7 +5047,34 @@ function SidebarNavigation2({
     ) }, node.websitePath) }, `menu-${node.websitePath}`);
   }) }) });
 }
+var open = false;
+var listeners = /* @__PURE__ */ new Set();
+function emit() {
+  for (const listener of listeners) listener();
+}
+function setMobileMenuOpen(value) {
+  if (open === value) return;
+  open = value;
+  emit();
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getSnapshot() {
+  return open;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useMobileMenuOpen() {
+  const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return [value, setMobileMenuOpen];
+}
 function MobileMenu2({ pageData, translations: translations2 = {} }) {
+  const [open2, setOpen] = useMobileMenuOpen();
   if (!pageData) {
     return null;
   }
@@ -5045,7 +5084,7 @@ function MobileMenu2({ pageData, translations: translations2 = {} }) {
     mobileMenuDescription = "Mobile navigation menu"
   } = translations2;
   const { sidebar, navigation: nav, computed } = pageData;
-  return /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxs(Drawer, { direction: "right", children: [
+  return /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxs(Drawer, { direction: "right", open: open2, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: "h-9 w-9", children: [
       /* @__PURE__ */ jsx(Menu, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: openMobileMenu })
@@ -5080,7 +5119,8 @@ function MobileMenu2({ pageData, translations: translations2 = {} }) {
           {
             nodes: sidebar.items,
             currentPath: `/${computed.lang}/docs/${computed.path}`,
-            language: computed.lang
+            language: computed.lang,
+            onNavigateLeaf: () => setOpen(false)
           }
         )
       ] })
@@ -5455,7 +5495,7 @@ function useMediaQuery(query) {
   return value;
 }
 function BreadcrumbToggle({ overflowItems, className }) {
-  const [open, setOpen] = React8.useState(false);
+  const [open2, setOpen] = React8.useState(false);
   const isDesktop = useMediaQuery("(min-width: 768px)");
   const handleOverflowItemClick = useCallback(() => {
     setOpen(false);
@@ -5463,7 +5503,7 @@ function BreadcrumbToggle({ overflowItems, className }) {
   if (overflowItems.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(BreadcrumbItem, { className, children: isDesktop ? /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsx(BreadcrumbItem, { className, children: isDesktop ? /* @__PURE__ */ jsxs(DropdownMenu, { open: open2, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxs(
       DropdownMenuTrigger,
       {
@@ -5484,7 +5524,7 @@ function BreadcrumbToggle({ overflowItems, className }) {
         children: item.label
       }
     ) }) }, index)) })
-  ] }) : /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, children: [
+  ] }) : /* @__PURE__ */ jsxs(Drawer, { open: open2, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(DrawerTrigger, { "aria-label": "Show more breadcrumb items", children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, { className: "h-4 w-4" }) }),
     /* @__PURE__ */ jsxs(DrawerContent, { children: [
       /* @__PURE__ */ jsx("div", { className: "grid gap-1 p-4 overflow-y-auto", children: overflowItems.map((item, index) => /* @__PURE__ */ jsx(