shad-m 1.0.2 → 1.0.3

package/dist/common/display/sidebar/nav-main.mjs

@@ -0,0 +1,400 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { ArrowRightIcon } from '@/icons';
+import { usePathname } from '@repo/ui/hooks/usePathname';
+import { useUISystemContext } from '@repo/ui/providers';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@repo/ui/components/collapsible';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@repo/ui/components/hover-card';
+import { useSidebar, SidebarGroup, SidebarSeparator, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuBadge, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton } from '@repo/ui/components/sidebar';
+import { cn } from '@repo/ui/lib/utils';
+import React from 'react';
+
+function NavMain({
+  label,
+  items,
+  LinkComponent: LinkComponentProp,
+  labelClassName,
+  itemClassName,
+  itemActiveClassName,
+  itemHoverClassName = "hover:bg-white-100",
+  subItemClassName,
+  subItemActiveClassName,
+  subItemHoverClassName = "hover:bg-white-100"
+}) {
+  const pathname = usePathname();
+  const { open, state, isHovered, isMobile, openMobile, setOpenMobile } = useSidebar();
+  const { LinkComponent: LinkComponentContext } = useUISystemContext();
+  const showLabel = isMobile ? true : open || state === "collapsed" && isHovered;
+  const [openStates, setOpenStates] = React.useState({});
+  const [hoverCardStates, setHoverCardStates] = React.useState({});
+  const isExpanded = isMobile ? openMobile : open || state === "collapsed" && isHovered;
+  const toggleHoverCard = React.useCallback((itemTitle, isOpen) => {
+    setHoverCardStates((prev) => ({
+      ...prev,
+      [itemTitle]: isOpen
+    }));
+  }, []);
+  const STORAGE_KEY = "sidebar-nav-collapse-states";
+  const Link = LinkComponentProp || LinkComponentContext || (({ href, children, ...props }) => /* @__PURE__ */ jsx("a", { href, ...props, children }));
+  const handleLinkClick = React.useCallback(
+    (onNavigationClick) => {
+      if (isMobile) {
+        setOpenMobile(false);
+      }
+      onNavigationClick?.();
+    },
+    [isMobile, setOpenMobile]
+  );
+  const hasActiveSubItem = React.useCallback(
+    (item) => {
+      return item.items?.some(
+        (subItem) => pathname === subItem.url || subItem.url !== "/" && pathname.startsWith(subItem.url + "/")
+      ) || false;
+    },
+    [pathname]
+  );
+  React.useEffect(() => {
+    try {
+      const savedStates = localStorage.getItem(STORAGE_KEY);
+      const parsedStates = savedStates ? JSON.parse(savedStates) : {};
+      const initialStates = {};
+      items.forEach((item) => {
+        if (item.items && item.items.length > 0) {
+          const hasActiveSub = hasActiveSubItem(item);
+          initialStates[item.title] = parsedStates[item.title] ?? hasActiveSub ?? item.isActive ?? false;
+        }
+      });
+      setOpenStates(initialStates);
+    } catch (error) {
+      console.warn("Failed to load sidebar collapse states from localStorage:", error);
+      const fallbackStates = {};
+      items.forEach((item) => {
+        if (item.items && item.items.length > 0) {
+          fallbackStates[item.title] = hasActiveSubItem(item) || item.isActive || false;
+        }
+      });
+      setOpenStates(fallbackStates);
+    }
+  }, []);
+  React.useEffect(() => {
+    setOpenStates((prev) => {
+      const updatedStates = { ...prev };
+      let hasChanges = false;
+      items.forEach((item) => {
+        if (item.items && item.items.length > 0) {
+          const hasActiveSub = hasActiveSubItem(item);
+          if (hasActiveSub && !updatedStates[item.title]) {
+            updatedStates[item.title] = true;
+            hasChanges = true;
+          }
+        }
+      });
+      if (hasChanges) {
+        try {
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedStates));
+        } catch (error) {
+          console.warn("Failed to save sidebar states:", error);
+        }
+        return updatedStates;
+      }
+      return prev;
+    });
+  }, [pathname, items, hasActiveSubItem, STORAGE_KEY]);
+  const toggleOpenState = React.useCallback(
+    (itemTitle) => {
+      setOpenStates((prev) => {
+        const newStates = {
+          ...prev,
+          [itemTitle]: !prev[itemTitle]
+        };
+        try {
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(newStates));
+        } catch (error) {
+          console.warn("Failed to save sidebar collapse states:", error);
+        }
+        return newStates;
+      });
+    },
+    [STORAGE_KEY]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    SidebarGroup,
+    {
+      className: cn({
+        "!px-1": !isExpanded
+      }),
+      children: [
+        label && /* @__PURE__ */ jsxs("div", { className: cn("relative h-[18px] overflow-hidden", labelClassName), children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-ink-400s absolute inset-0 whitespace-nowrap px-3 text-xs uppercase tracking-wider transition-opacity duration-300",
+                showLabel ? "z-10 opacity-100" : "z-0 opacity-0"
+              ),
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 -ml-2 flex items-center transition-opacity duration-300",
+                !showLabel ? "z-10 opacity-100" : "z-0 opacity-0"
+              ),
+              children: /* @__PURE__ */ jsx(SidebarSeparator, { className: cn("bg-ink-300s dark:bg-ink-400s w-full") })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          SidebarMenu,
+          {
+            className: cn("gap-3", {
+              "gap-2": !isExpanded && !isMobile
+            }),
+            children: items.map((item) => {
+              const isMainActive = item.exactMatch ? pathname === item.url : pathname === item.url || item.url !== "/" && pathname.startsWith(item.url + "/");
+              const hasSubItems = item.items && item.items.length > 0;
+              if (!hasSubItems) {
+                if (item.type === "button") {
+                  return /* @__PURE__ */ jsx(SidebarMenuItem, { className: item.className, children: /* @__PURE__ */ jsxs(
+                    SidebarMenuButton,
+                    {
+                      className: cn(
+                        itemHoverClassName,
+                        itemClassName,
+                        isMainActive && (itemActiveClassName || "bg-white-200 hover:bg-white-200"),
+                        {
+                          "!flex-col !gap-1 !px-0 !py-2": !isExpanded && !isMobile,
+                          "icon-red-500 text-red-500 hover:bg-red-50": item.isLogoutButton
+                        }
+                      ),
+                      onClick: item.onClick,
+                      "data-notification-trigger": true,
+                      children: [
+                        item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn({
+                              "!block !whitespace-normal text-center text-[10px] font-medium leading-4 !opacity-100": !isExpanded && !isMobile
+                            }),
+                            children: isExpanded ? item.title : item.shortTitle || item.title
+                          }
+                        ),
+                        item.badge && /* @__PURE__ */ jsx(SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                      ]
+                    }
+                  ) }, item.title);
+                }
+                return /* @__PURE__ */ jsx(SidebarMenuItem, { className: item.className, children: /* @__PURE__ */ jsx(
+                  SidebarMenuButton,
+                  {
+                    asChild: true,
+                    className: cn(
+                      itemHoverClassName,
+                      itemClassName,
+                      isMainActive && (itemActiveClassName || "bg-white-200 hover:bg-white-200"),
+                      {
+                        "!flex-col !gap-1 !px-0 !py-2": !isExpanded && !isMobile
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsxs(
+                      Link,
+                      {
+                        href: item.url || "#",
+                        onClick: (e) => {
+                          if (!item.url || item.url === "#") {
+                            e.preventDefault();
+                          }
+                          handleLinkClick(item.onNavigationClick);
+                        },
+                        prefetch: true,
+                        children: [
+                          item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn({
+                                "!block !whitespace-normal text-center text-[10px] font-medium leading-4 !opacity-100": !isExpanded && !isMobile
+                              }),
+                              children: isExpanded ? item.title : item.shortTitle || item.title
+                            }
+                          ),
+                          item.badge && /* @__PURE__ */ jsx(SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                        ]
+                      }
+                    )
+                  }
+                ) }, item.title);
+              }
+              if (!open) {
+                if (item.type === "button") {
+                  return /* @__PURE__ */ jsx(SidebarMenuItem, { className: item.className, children: /* @__PURE__ */ jsxs(
+                    SidebarMenuButton,
+                    {
+                      className: cn(
+                        itemHoverClassName,
+                        itemClassName,
+                        isMainActive && (itemActiveClassName || "bg-white-200 hover:bg-white-200")
+                      ),
+                      onClick: item.onClick,
+                      children: [
+                        item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+                        /* @__PURE__ */ jsx("span", { className: "font-medium", children: item.title }),
+                        item.badge && /* @__PURE__ */ jsx(SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                      ]
+                    }
+                  ) }, item.title);
+                }
+                return /* @__PURE__ */ jsx(SidebarMenuItem, { className: item.className, children: /* @__PURE__ */ jsxs(
+                  HoverCard,
+                  {
+                    openDelay: 200,
+                    closeDelay: 100,
+                    open: hoverCardStates[item.title] || false,
+                    onOpenChange: (isOpen) => toggleHoverCard(item.title, isOpen),
+                    children: [
+                      /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                        SidebarMenuButton,
+                        {
+                          asChild: true,
+                          className: cn(
+                            itemHoverClassName,
+                            itemClassName,
+                            isMainActive && (itemActiveClassName || "bg-white-200 hover:bg-white-200")
+                          ),
+                          children: /* @__PURE__ */ jsxs(
+                            Link,
+                            {
+                              href: item.url || "#",
+                              onClick: (e) => {
+                                if (!item.url || item.url === "#") {
+                                  e.preventDefault();
+                                }
+                                toggleHoverCard(item.title, false);
+                                handleLinkClick(item.onNavigationClick);
+                              },
+                              prefetch: true,
+                              children: [
+                                item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+                                /* @__PURE__ */ jsx("span", { className: "font-medium", children: item.title }),
+                                item.badge && /* @__PURE__ */ jsx(SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                              ]
+                            }
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs(
+                        HoverCardContent,
+                        {
+                          side: "right",
+                          align: "start",
+                          className: "pointer-events-auto w-56 p-3",
+                          sideOffset: 8,
+                          onPointerDownOutside: () => toggleHoverCard(item.title, false),
+                          children: [
+                            /* @__PURE__ */ jsx("div", { className: "border-ink-200s text-ink-500s mb-2 border-b px-2 py-1.5 text-sm font-bold", children: item.title }),
+                            /* @__PURE__ */ jsx("div", { className: "space-y-1", children: item.items?.map((subItem) => {
+                              const isSubActive = pathname === subItem.url || subItem.url !== "/" && pathname.startsWith(subItem.url + "/");
+                              return /* @__PURE__ */ jsxs(
+                                Link,
+                                {
+                                  href: subItem.url,
+                                  onClick: (e) => {
+                                    if (!subItem.url || subItem.url === "#") {
+                                      e.preventDefault();
+                                    }
+                                    toggleHoverCard(item.title, false);
+                                    handleLinkClick(subItem.onNavigationClick);
+                                  },
+                                  prefetch: true,
+                                  className: cn(
+                                    "flex items-center justify-between rounded-md px-2 py-2 text-sm transition-colors",
+                                    subItemHoverClassName,
+                                    subItemClassName,
+                                    isSubActive && (subItemActiveClassName || "bg-white-200 hover:bg-white-200")
+                                  ),
+                                  children: [
+                                    /* @__PURE__ */ jsx("span", { children: subItem.title }),
+                                    subItem.title === "Tin nh\u1EAFn" && /* @__PURE__ */ jsx("span", { className: "rounded bg-red-500 px-1.5 py-0.5 text-xs text-white", children: "4 m\u1EDBi" })
+                                  ]
+                                },
+                                subItem.title
+                              );
+                            }) })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ) }, item.title);
+              }
+              return /* @__PURE__ */ jsx(
+                Collapsible,
+                {
+                  asChild: true,
+                  open: openStates[item.title] || false,
+                  onOpenChange: () => toggleOpenState(item.title),
+                  className: "group/collapsible",
+                  children: /* @__PURE__ */ jsxs(SidebarMenuItem, { className: item.className, children: [
+                    /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                      SidebarMenuButton,
+                      {
+                        className: cn(
+                          itemHoverClassName,
+                          itemClassName,
+                          isMainActive && (itemActiveClassName || "bg-white-200 hover:bg-white-200")
+                        ),
+                        children: [
+                          item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+                          /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-between", children: [
+                            item.title,
+                            /* @__PURE__ */ jsx(ArrowRightIcon, { className: "transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+                          ] }),
+                          item.badge && /* @__PURE__ */ jsx(SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => {
+                      const isSubActive = pathname === subItem.url || subItem.url !== "/" && pathname.startsWith(subItem.url + "/");
+                      return /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(
+                        SidebarMenuSubButton,
+                        {
+                          asChild: true,
+                          className: cn(
+                            subItemHoverClassName,
+                            subItemClassName,
+                            isSubActive && (subItemActiveClassName || "bg-white-200 hover:bg-white-200")
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              href: subItem.url,
+                              onClick: (e) => {
+                                if (!subItem.url || subItem.url === "#") {
+                                  e.preventDefault();
+                                }
+                                handleLinkClick(subItem.onNavigationClick);
+                              },
+                              prefetch: true,
+                              children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: subItem.title })
+                            }
+                          )
+                        }
+                      ) }, subItem.title);
+                    }) }) })
+                  ] })
+                },
+                item.title
+              );
+            })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { NavMain };
+//# sourceMappingURL=nav-main.mjs.map
+//# sourceMappingURL=nav-main.mjs.map

package/dist/common/display/sidebar/nav-main.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/display/sidebar/nav-main.tsx"],"names":[],"mappings":";;;;;;;;;;AAwCO,SAAS,OAAA,CAAQ;AAAA,EACtB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,EAAe,iBAAA;AAAA,EACf,cAAA;AAAA,EACA,aAAA;AAAA,EACA,mBAAA;AAAA,EACA,kBAAA,GAAqB,oBAAA;AAAA,EACrB,gBAAA;AAAA,EACA,sBAAA;AAAA,EACA,qBAAA,GAAwB;AAC1B,CAAA,EAAiB;AACf,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,EAAE,MAAM,KAAA,EAAO,SAAA,EAAW,UAAU,UAAA,EAAY,aAAA,KAAkB,UAAA,EAAW;AACnF,EAAA,MAAM,EAAE,aAAA,EAAe,oBAAA,EAAqB,GAAI,kBAAA,EAAmB;AAGnE,EAAA,MAAM,SAAA,GAAY,QAAA,GAAW,IAAA,GAAO,IAAA,IAAS,UAAU,WAAA,IAAe,SAAA;AAGtE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,IAAI,KAAA,CAAM,QAAA,CAAkC,EAAE,CAAA;AAG9E,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,IAAI,KAAA,CAAM,QAAA,CAAkC,EAAE,CAAA;AAIxF,EAAA,MAAM,UAAA,GAAa,QAAA,GAAW,UAAA,GAAa,IAAA,IAAS,UAAU,WAAA,IAAe,SAAA;AAG7E,EAAA,MAAM,eAAA,GAAkB,KAAA,CAAM,WAAA,CAAY,CAAC,WAAmB,MAAA,KAAoB;AAChF,IAAA,kBAAA,CAAmB,CAAC,IAAA,MAAU;AAAA,MAC5B,GAAG,IAAA;AAAA,MACH,CAAC,SAAS,GAAG;AAAA,KACf,CAAE,CAAA;AAAA,EACJ,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,MAAM,WAAA,GAAc,6BAAA;AAGpB,EAAA,MAAM,IAAA,GACJ,iBAAA,IACA,oBAAA,KACC,CAAC,EAAE,IAAA,EAAM,QAAA,EAAU,GAAG,KAAA,uBACrB,GAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAa,GAAG,OAChB,QAAA,EACH,CAAA,CAAA;AAIJ,EAAA,MAAM,kBAAkB,KAAA,CAAM,WAAA;AAAA,IAC5B,CAAC,iBAAA,KAAmC;AAClC,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,aAAA,CAAc,KAAK,CAAA;AAAA,MACrB;AAEA,MAAA,iBAAA,IAAoB;AAAA,IACtB,CAAA;AAAA,IACA,CAAC,UAAU,aAAa;AAAA,GAC1B;AAGA,EAAA,MAAM,mBAAmB,KAAA,CAAM,WAAA;AAAA,IAC7B,CAAC,IAAA,KAAsB;AACrB,MAAA,OACE,KAAK,KAAA,EAAO,IAAA;AAAA,QACV,CAAC,OAAA,KACC,QAAA,KAAa,OAAA,CAAQ,GAAA,IACpB,OAAA,CAAQ,GAAA,KAAQ,GAAA,IAAO,QAAA,CAAS,UAAA,CAAW,OAAA,CAAQ,GAAA,GAAM,GAAG;AAAA,OACjE,IAAK,KAAA;AAAA,IAET,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAGA,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI;AACF,MAAA,MAAM,WAAA,GAAc,YAAA,CAAa,OAAA,CAAQ,WAAW,CAAA;AACpD,MAAA,MAAM,eAAe,WAAA,GAAc,IAAA,CAAK,KAAA,CAAM,WAAW,IAAI,EAAC;AAG9D,MAAA,MAAM,gBAAyC,EAAC;AAEhD,MAAA,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAA,KAAS;AACtB,QAAA,IAAI,IAAA,CAAK,KAAA,IAAS,IAAA,CAAK,KAAA,CAAM,SAAS,CAAA,EAAG;AACvC,UAAA,MAAM,YAAA,GAAe,iBAAiB,IAAI,CAAA;AAE1C,UAAA,aAAA,CAAc,IAAA,CAAK,KAAK,CAAA,GACtB,YAAA,CAAa,KAAK,KAAK,CAAA,IAAK,YAAA,IAAgB,IAAA,CAAK,QAAA,IAAY,KAAA;AAAA,QACjE;AAAA,MACF,CAAC,CAAA;AAED,MAAA,aAAA,CAAc,aAAa,CAAA;AAAA,IAC7B,SAAS,KAAA,EAAO;AACd,MAAA,OAAA,CAAQ,IAAA,CAAK,6DAA6D,KAAK,CAAA;AAE/E,MAAA,MAAM,iBAA0C,EAAC;AACjD,MAAA,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAA,KAAS;AACtB,QAAA,IAAI,IAAA,CAAK,KAAA,IAAS,IAAA,CAAK,KAAA,CAAM,SAAS,CAAA,EAAG;AACvC,UAAA,cAAA,CAAe,KAAK,KAAK,CAAA,GAAI,iBAAiB,IAAI,CAAA,IAAK,KAAK,QAAA,IAAY,KAAA;AAAA,QAC1E;AAAA,MACF,CAAC,CAAA;AACD,MAAA,aAAA,CAAc,cAAc,CAAA;AAAA,IAC9B;AAAA,EAEF,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,aAAA,CAAc,CAAC,IAAA,KAAS;AACtB,MAAA,MAAM,aAAA,GAAgB,EAAE,GAAG,IAAA,EAAK;AAChC,MAAA,IAAI,UAAA,GAAa,KAAA;AAEjB,MAAA,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAA,KAAS;AACtB,QAAA,IAAI,IAAA,CAAK,KAAA,IAAS,IAAA,CAAK,KAAA,CAAM,SAAS,CAAA,EAAG;AACvC,UAAA,MAAM,YAAA,GAAe,iBAAiB,IAAI,CAAA;AAE1C,UAAA,IAAI,YAAA,IAAgB,CAAC,aAAA,CAAc,IAAA,CAAK,KAAK,CAAA,EAAG;AAC9C,YAAA,aAAA,CAAc,IAAA,CAAK,KAAK,CAAA,GAAI,IAAA;AAC5B,YAAA,UAAA,GAAa,IAAA;AAAA,UACf;AAAA,QACF;AAAA,MACF,CAAC,CAAA;AAGD,MAAA,IAAI,UAAA,EAAY;AACd,QAAA,IAAI;AACF,UAAA,YAAA,CAAa,OAAA,CAAQ,WAAA,EAAa,IAAA,CAAK,SAAA,CAAU,aAAa,CAAC,CAAA;AAAA,QACjE,SAAS,KAAA,EAAO;AACd,UAAA,OAAA,CAAQ,IAAA,CAAK,kCAAkC,KAAK,CAAA;AAAA,QACtD;AACA,QAAA,OAAO,aAAA;AAAA,MACT;AAEA,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,GAAG,CAAC,QAAA,EAAU,KAAA,EAAO,gBAAA,EAAkB,WAAW,CAAC,CAAA;AAGnD,EAAA,MAAM,kBAAkB,KAAA,CAAM,WAAA;AAAA,IAC5B,CAAC,SAAA,KAAsB;AACrB,MAAA,aAAA,CAAc,CAAC,IAAA,KAAS;AACtB,QAAA,MAAM,SAAA,GAAY;AAAA,UAChB,GAAG,IAAA;AAAA,UACH,CAAC,SAAS,GAAG,CAAC,KAAK,SAAS;AAAA,SAC9B;AAEA,QAAA,IAAI;AACF,UAAA,YAAA,CAAa,OAAA,CAAQ,WAAA,EAAa,IAAA,CAAK,SAAA,CAAU,SAAS,CAAC,CAAA;AAAA,QAC7D,SAAS,KAAA,EAAO;AACd,UAAA,OAAA,CAAQ,IAAA,CAAK,2CAA2C,KAAK,CAAA;AAAA,QAC/D;AACA,QAAA,OAAO,SAAA;AAAA,MACT,CAAC,CAAA;AAAA,IACH,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,IAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAA,CAAG;AAAA,QACZ,SAAS,CAAC;AAAA,OACX,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,QAAA,KAAA,yBACE,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,mCAAA,EAAqC,cAAc,CAAA,EAEpE,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,wHAAA;AAAA,gBACA,YAAY,kBAAA,GAAqB;AAAA,eACnC;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BAGA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,0EAAA;AAAA,gBACA,CAAC,YAAY,kBAAA,GAAqB;AAAA,eACpC;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAW,EAAA,CAAG,qCAAqC,CAAA,EAAG;AAAA;AAAA;AAC1E,SAAA,EACF,CAAA;AAAA,wBAEF,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,OAAA,EAAS;AAAA,cACrB,OAAA,EAAS,CAAC,UAAA,IAAc,CAAC;AAAA,aAC1B,CAAA;AAAA,YAEA,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AAGnB,cAAA,MAAM,eAAe,IAAA,CAAK,UAAA,GACtB,QAAA,KAAa,IAAA,CAAK,MAClB,QAAA,KAAa,IAAA,CAAK,GAAA,IAAQ,IAAA,CAAK,QAAQ,GAAA,IAAO,QAAA,CAAS,UAAA,CAAW,IAAA,CAAK,MAAM,GAAG,CAAA;AACpF,cAAA,MAAM,WAAA,GAAc,IAAA,CAAK,KAAA,IAAS,IAAA,CAAK,MAAM,MAAA,GAAS,CAAA;AAGtD,cAAA,IAAI,CAAC,WAAA,EAAa;AAEhB,gBAAA,IAAI,IAAA,CAAK,SAAS,QAAA,EAAU;AAC1B,kBAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EAAiC,SAAA,EAAW,IAAA,CAAK,SAAA,EAChD,QAAA,kBAAA,IAAA;AAAA,oBAAC,iBAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAW,EAAA;AAAA,wBACT,kBAAA;AAAA,wBACA,aAAA;AAAA,wBACA,iBAAiB,mBAAA,IAAuB,iCAAA,CAAA;AAAA,wBACxC;AAAA,0BACE,8BAAA,EAAgC,CAAC,UAAA,IAAc,CAAC,QAAA;AAAA,0BAChD,6CAA6C,IAAA,CAAK;AAAA;AACpD,uBACF;AAAA,sBACA,SAAS,IAAA,CAAK,OAAA;AAAA,sBACd,2BAAA,EAAyB,IAAA;AAAA,sBAExB,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAK,IAAA,oBAAQ,GAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,CAAA;AAAA,wCACzB,GAAA;AAAA,0BAAC,MAAA;AAAA,0BAAA;AAAA,4BACC,WAAW,EAAA,CAAG;AAAA,8BACZ,sFAAA,EACE,CAAC,UAAA,IAAc,CAAC;AAAA,6BACnB,CAAA;AAAA,4BAEA,QAAA,EAAA,UAAA,GAAa,IAAA,CAAK,KAAA,GAAQ,IAAA,CAAK,cAAc,IAAA,CAAK;AAAA;AAAA,yBACrD;AAAA,wBACC,IAAA,CAAK,yBACJ,GAAA,CAAC,gBAAA,EAAA,EAAiB,WAAW,IAAA,CAAK,cAAA,EAC/B,eAAK,KAAA,EACR;AAAA;AAAA;AAAA,mBAEJ,EAAA,EA5BoB,KAAK,KA6B3B,CAAA;AAAA,gBAEJ;AAGA,gBAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EAAiC,SAAA,EAAW,IAAA,CAAK,SAAA,EAChD,QAAA,kBAAA,GAAA;AAAA,kBAAC,iBAAA;AAAA,kBAAA;AAAA,oBACC,OAAA,EAAO,IAAA;AAAA,oBACP,SAAA,EAAW,EAAA;AAAA,sBACT,kBAAA;AAAA,sBACA,aAAA;AAAA,sBACA,iBAAiB,mBAAA,IAAuB,iCAAA,CAAA;AAAA,sBACxC;AAAA,wBACE,8BAAA,EAAgC,CAAC,UAAA,IAAc,CAAC;AAAA;AAClD,qBACF;AAAA,oBAEA,QAAA,kBAAA,IAAA;AAAA,sBAAC,IAAA;AAAA,sBAAA;AAAA,wBACC,IAAA,EAAM,KAAK,GAAA,IAAO,GAAA;AAAA,wBAClB,OAAA,EAAS,CAAC,CAAA,KAAwB;AAEhC,0BAAA,IAAI,CAAC,IAAA,CAAK,GAAA,IAAO,IAAA,CAAK,QAAQ,GAAA,EAAK;AACjC,4BAAA,CAAA,CAAE,cAAA,EAAe;AAAA,0BACnB;AACA,0BAAA,eAAA,CAAgB,KAAK,iBAAiB,CAAA;AAAA,wBACxC,CAAA;AAAA,wBACA,QAAA,EAAU,IAAA;AAAA,wBAET,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAK,IAAA,oBAAQ,GAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,CAAA;AAAA,0CACzB,GAAA;AAAA,4BAAC,MAAA;AAAA,4BAAA;AAAA,8BACC,WAAW,EAAA,CAAG;AAAA,gCACZ,sFAAA,EACE,CAAC,UAAA,IAAc,CAAC;AAAA,+BACnB,CAAA;AAAA,8BAEA,QAAA,EAAA,UAAA,GAAa,IAAA,CAAK,KAAA,GAAQ,IAAA,CAAK,cAAc,IAAA,CAAK;AAAA;AAAA,2BACrD;AAAA,0BACC,IAAA,CAAK,yBACJ,GAAA,CAAC,gBAAA,EAAA,EAAiB,WAAW,IAAA,CAAK,cAAA,EAC/B,eAAK,KAAA,EACR;AAAA;AAAA;AAAA;AAEJ;AAAA,iBACF,EAAA,EAtCoB,KAAK,KAuC3B,CAAA;AAAA,cAEJ;AAGA,cAAA,IAAI,CAAC,IAAA,EAAM;AAET,gBAAA,IAAI,IAAA,CAAK,SAAS,QAAA,EAAU;AAC1B,kBAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EAAiC,SAAA,EAAW,IAAA,CAAK,SAAA,EAChD,QAAA,kBAAA,IAAA;AAAA,oBAAC,iBAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAW,EAAA;AAAA,wBACT,kBAAA;AAAA,wBACA,aAAA;AAAA,wBACA,iBAAiB,mBAAA,IAAuB,iCAAA;AAAA,uBAC1C;AAAA,sBACA,SAAS,IAAA,CAAK,OAAA;AAAA,sBAEb,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAK,IAAA,oBAAQ,GAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,CAAA;AAAA,wCACzB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAe,eAAK,KAAA,EAAM,CAAA;AAAA,wBACzC,IAAA,CAAK,yBACJ,GAAA,CAAC,gBAAA,EAAA,EAAiB,WAAW,IAAA,CAAK,cAAA,EAC/B,eAAK,KAAA,EACR;AAAA;AAAA;AAAA,mBAEJ,EAAA,EAhBoB,KAAK,KAiB3B,CAAA;AAAA,gBAEJ;AAGA,gBAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EAAiC,SAAA,EAAW,IAAA,CAAK,SAAA,EAChD,QAAA,kBAAA,IAAA;AAAA,kBAAC,SAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,GAAA;AAAA,oBACX,UAAA,EAAY,GAAA;AAAA,oBACZ,IAAA,EAAM,eAAA,CAAgB,IAAA,CAAK,KAAK,CAAA,IAAK,KAAA;AAAA,oBACrC,cAAc,CAAC,MAAA,KAAW,eAAA,CAAgB,IAAA,CAAK,OAAO,MAAM,CAAA;AAAA,oBAE5D,QAAA,EAAA;AAAA,sCAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAO,IAAA,EACvB,QAAA,kBAAA,GAAA;AAAA,wBAAC,iBAAA;AAAA,wBAAA;AAAA,0BACC,OAAA,EAAO,IAAA;AAAA,0BACP,SAAA,EAAW,EAAA;AAAA,4BACT,kBAAA;AAAA,4BACA,aAAA;AAAA,4BACA,iBACG,mBAAA,IAAuB,iCAAA;AAAA,2BAC5B;AAAA,0BAEA,QAAA,kBAAA,IAAA;AAAA,4BAAC,IAAA;AAAA,4BAAA;AAAA,8BACC,IAAA,EAAM,KAAK,GAAA,IAAO,GAAA;AAAA,8BAClB,OAAA,EAAS,CAAC,CAAA,KAAwB;AAEhC,gCAAA,IAAI,CAAC,IAAA,CAAK,GAAA,IAAO,IAAA,CAAK,QAAQ,GAAA,EAAK;AACjC,kCAAA,CAAA,CAAE,cAAA,EAAe;AAAA,gCACnB;AAEA,gCAAA,eAAA,CAAgB,IAAA,CAAK,OAAO,KAAK,CAAA;AACjC,gCAAA,eAAA,CAAgB,KAAK,iBAAiB,CAAA;AAAA,8BACxC,CAAA;AAAA,8BACA,QAAA,EAAU,IAAA;AAAA,8BAET,QAAA,EAAA;AAAA,gCAAA,IAAA,CAAK,IAAA,oBAAQ,GAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,CAAA;AAAA,gDACzB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAe,eAAK,KAAA,EAAM,CAAA;AAAA,gCACzC,IAAA,CAAK,yBACJ,GAAA,CAAC,gBAAA,EAAA,EAAiB,WAAW,IAAA,CAAK,cAAA,EAC/B,eAAK,KAAA,EACR;AAAA;AAAA;AAAA;AAEJ;AAAA,uBACF,EACF,CAAA;AAAA,sCACA,IAAA;AAAA,wBAAC,gBAAA;AAAA,wBAAA;AAAA,0BACC,IAAA,EAAK,OAAA;AAAA,0BACL,KAAA,EAAM,OAAA;AAAA,0BACN,SAAA,EAAU,8BAAA;AAAA,0BACV,UAAA,EAAY,CAAA;AAAA,0BACZ,oBAAA,EAAsB,MAAM,eAAA,CAAgB,IAAA,CAAK,OAAO,KAAK,CAAA;AAAA,0BAE7D,QAAA,EAAA;AAAA,4CAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2EAAA,EACZ,QAAA,EAAA,IAAA,CAAK,KAAA,EACR,CAAA;AAAA,4CACA,GAAA,CAAC,SAAI,SAAA,EAAU,WAAA,EACZ,eAAK,KAAA,EAAO,GAAA,CAAI,CAAC,OAAA,KAAY;AAE5B,8BAAA,MAAM,WAAA,GACJ,QAAA,KAAa,OAAA,CAAQ,GAAA,IACpB,OAAA,CAAQ,GAAA,KAAQ,GAAA,IAAO,QAAA,CAAS,UAAA,CAAW,OAAA,CAAQ,GAAA,GAAM,GAAG,CAAA;AAC/D,8BAAA,uBACE,IAAA;AAAA,gCAAC,IAAA;AAAA,gCAAA;AAAA,kCAEC,MAAM,OAAA,CAAQ,GAAA;AAAA,kCACd,OAAA,EAAS,CAAC,CAAA,KAAwB;AAEhC,oCAAA,IAAI,CAAC,OAAA,CAAQ,GAAA,IAAO,OAAA,CAAQ,QAAQ,GAAA,EAAK;AACvC,sCAAA,CAAA,CAAE,cAAA,EAAe;AAAA,oCACnB;AACA,oCAAA,eAAA,CAAgB,IAAA,CAAK,OAAO,KAAK,CAAA;AACjC,oCAAA,eAAA,CAAgB,QAAQ,iBAAiB,CAAA;AAAA,kCAC3C,CAAA;AAAA,kCACA,QAAA,EAAU,IAAA;AAAA,kCACV,SAAA,EAAW,EAAA;AAAA,oCACT,kFAAA;AAAA,oCACA,qBAAA;AAAA,oCACA,gBAAA;AAAA,oCACA,gBACG,sBAAA,IAA0B,iCAAA;AAAA,mCAC/B;AAAA,kCAEA,QAAA,EAAA;AAAA,oDAAA,GAAA,CAAC,MAAA,EAAA,EAAM,kBAAQ,KAAA,EAAM,CAAA;AAAA,oCACpB,QAAQ,KAAA,KAAU,eAAA,wBAChB,MAAA,EAAA,EAAK,SAAA,EAAU,uDAAsD,QAAA,EAAA,YAAA,EAEtE;AAAA;AAAA,iCAAA;AAAA,gCAvBG,OAAA,CAAQ;AAAA,+BAyBf;AAAA,4BAEJ,CAAC,CAAA,EACH;AAAA;AAAA;AAAA;AACF;AAAA;AAAA,iBACF,EAAA,EAxFoB,KAAK,KAyF3B,CAAA;AAAA,cAEJ;AAGA,cAAA,uBACE,GAAA;AAAA,gBAAC,WAAA;AAAA,gBAAA;AAAA,kBAEC,OAAA,EAAO,IAAA;AAAA,kBACP,IAAA,EAAM,UAAA,CAAW,IAAA,CAAK,KAAK,CAAA,IAAK,KAAA;AAAA,kBAChC,YAAA,EAAc,MAAM,eAAA,CAAgB,IAAA,CAAK,KAAK,CAAA;AAAA,kBAC9C,SAAA,EAAU,mBAAA;AAAA,kBAEV,QAAA,kBAAA,IAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAW,IAAA,CAAK,SAAA,EAC/B,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,SAAO,IAAA,EACzB,QAAA,kBAAA,IAAA;AAAA,sBAAC,iBAAA;AAAA,sBAAA;AAAA,wBACC,SAAA,EAAW,EAAA;AAAA,0BACT,kBAAA;AAAA,0BACA,aAAA;AAAA,0BACA,iBAAiB,mBAAA,IAAuB,iCAAA;AAAA,yBAC1C;AAAA,wBAEC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAK,IAAA,oBAAQ,GAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,CAAA;AAAA,0CACzB,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0CAAA,EACb,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAK,KAAA;AAAA,4CACN,GAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAU,iFAAA,EAAkF;AAAA,2BAAA,EAC9G,CAAA;AAAA,0BACC,IAAA,CAAK,yBACJ,GAAA,CAAC,gBAAA,EAAA,EAAiB,WAAW,IAAA,CAAK,cAAA,EAC/B,eAAK,KAAA,EACR;AAAA;AAAA;AAAA,qBAEJ,EACF,CAAA;AAAA,oCACA,GAAA,CAAC,sBACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EACE,eAAK,KAAA,EAAO,GAAA,CAAI,CAAC,OAAA,KAAY;AAE5B,sBAAA,MAAM,WAAA,GACJ,QAAA,KAAa,OAAA,CAAQ,GAAA,IACpB,OAAA,CAAQ,GAAA,KAAQ,GAAA,IAAO,QAAA,CAAS,UAAA,CAAW,OAAA,CAAQ,GAAA,GAAM,GAAG,CAAA;AAC/D,sBAAA,2BACG,kBAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,wBAAC,oBAAA;AAAA,wBAAA;AAAA,0BACC,OAAA,EAAO,IAAA;AAAA,0BACP,SAAA,EAAW,EAAA;AAAA,4BACT,qBAAA;AAAA,4BACA,gBAAA;AAAA,4BACA,gBACG,sBAAA,IAA0B,iCAAA;AAAA,2BAC/B;AAAA,0BAEA,QAAA,kBAAA,GAAA;AAAA,4BAAC,IAAA;AAAA,4BAAA;AAAA,8BACC,MAAM,OAAA,CAAQ,GAAA;AAAA,8BACd,OAAA,EAAS,CAAC,CAAA,KAAwB;AAEhC,gCAAA,IAAI,CAAC,OAAA,CAAQ,GAAA,IAAO,OAAA,CAAQ,QAAQ,GAAA,EAAK;AACvC,kCAAA,CAAA,CAAE,cAAA,EAAe;AAAA,gCACnB;AACA,gCAAA,eAAA,CAAgB,QAAQ,iBAAiB,CAAA;AAAA,8BAC3C,CAAA;AAAA,8BACA,QAAA,EAAU,IAAA;AAAA,8BAEV,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAe,kBAAQ,KAAA,EAAM;AAAA;AAAA;AAC/C;AAAA,uBACF,EAAA,EAvBuB,QAAQ,KAwBjC,CAAA;AAAA,oBAEJ,CAAC,GACH,CAAA,EACF;AAAA,mBAAA,EACF;AAAA,iBAAA;AAAA,gBAhEK,IAAA,CAAK;AAAA,eAiEZ;AAAA,YAEJ,CAAC;AAAA;AAAA;AACH;AAAA;AAAA,GACF,EACF,CAAA;AAEJ","file":"nav-main.mjs","sourcesContent":["'use client';\n\nimport { ArrowRightIcon } from '@/icons';\nimport { usePathname } from '@repo/ui/hooks/usePathname';\nimport { NavItemType } from '@/lib/types';\nimport { useUISystemContext } from '@repo/ui/providers';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@repo/ui/components/collapsible';\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from '@repo/ui/components/hover-card';\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarSeparator,\n  useSidebar,\n} from '@repo/ui/components/sidebar';\nimport { cn } from '@repo/ui/lib/utils';\nimport React from 'react';\n\ninterface NavMainProps {\n  label?: string; // Section label (e.g., \"QUẢN LÝ\", \"KHÁC\")\n  items: NavItemType[];\n  LinkComponent?: React.ComponentType<any>;\n  labelClassName?: string; // Custom style for section label\n  itemClassName?: string;\n  itemActiveClassName?: string;\n  itemHoverClassName?: string;\n  subItemClassName?: string;\n  subItemActiveClassName?: string;\n  subItemHoverClassName?: string;\n}\n\nexport function NavMain({\n  label,\n  items,\n  LinkComponent: LinkComponentProp,\n  labelClassName,\n  itemClassName,\n  itemActiveClassName,\n  itemHoverClassName = 'hover:bg-white-100',\n  subItemClassName,\n  subItemActiveClassName,\n  subItemHoverClassName = 'hover:bg-white-100',\n}: NavMainProps) {\n  const pathname = usePathname();\n  const { open, state, isHovered, isMobile, openMobile, setOpenMobile } = useSidebar();\n  const { LinkComponent: LinkComponentContext } = useUISystemContext();\n\n  // Show label when: sidebar is expanded OR (collapsed but hovered)\n  const showLabel = isMobile ? true : open || (state === 'collapsed' && isHovered);\n\n  // State to track which nav items are open\n  const [openStates, setOpenStates] = React.useState<Record<string, boolean>>({});\n\n  // State to track which hover cards are open (for collapsed sidebar)\n  const [hoverCardStates, setHoverCardStates] = React.useState<Record<string, boolean>>({});\n\n  // On mobile: use openMobile state\n  // On desktop: show expanded when open OR when collapsed but hovered\n  const isExpanded = isMobile ? openMobile : open || (state === 'collapsed' && isHovered);\n\n  // Function to toggle hover card state\n  const toggleHoverCard = React.useCallback((itemTitle: string, isOpen: boolean) => {\n    setHoverCardStates((prev) => ({\n      ...prev,\n      [itemTitle]: isOpen,\n    }));\n  }, []);\n\n  // localStorage key for saving collapse states\n  const STORAGE_KEY = 'sidebar-nav-collapse-states';\n\n  // Use the provided LinkComponent prop, fallback to context, or fallback to anchor tag\n  const Link =\n    LinkComponentProp ||\n    LinkComponentContext ||\n    (({ href, children, ...props }) => (\n      <a href={href} {...props}>\n        {children}\n      </a>\n    ));\n\n  // Handler to close mobile sidebar when clicking on a link\n  const handleLinkClick = React.useCallback(\n    (onNavigationClick?: () => void) => {\n      if (isMobile) {\n        setOpenMobile(false);\n      }\n      // Call the onNavigationClick callback if provided (to close notification sheet)\n      onNavigationClick?.();\n    },\n    [isMobile, setOpenMobile],\n  );\n\n  // Function to check if any sub-item is active\n  const hasActiveSubItem = React.useCallback(\n    (item: NavItemType) => {\n      return (\n        item.items?.some(\n          (subItem) =>\n            pathname === subItem.url ||\n            (subItem.url !== '/' && pathname.startsWith(subItem.url + '/')),\n        ) || false\n      );\n    },\n    [pathname],\n  );\n\n  // Initialize open states from localStorage and active sub-items\n  React.useEffect(() => {\n    try {\n      const savedStates = localStorage.getItem(STORAGE_KEY);\n      const parsedStates = savedStates ? JSON.parse(savedStates) : {};\n\n      // Create initial states based on saved data and active sub-items\n      const initialStates: Record<string, boolean> = {};\n\n      items.forEach((item) => {\n        if (item.items && item.items.length > 0) {\n          const hasActiveSub = hasActiveSubItem(item);\n          // Open if: saved as open OR has active sub-item OR item.isActive is true\n          initialStates[item.title] =\n            parsedStates[item.title] ?? hasActiveSub ?? item.isActive ?? false;\n        }\n      });\n\n      setOpenStates(initialStates);\n    } catch (error) {\n      console.warn('Failed to load sidebar collapse states from localStorage:', error);\n      // Fallback to default behavior if localStorage fails\n      const fallbackStates: Record<string, boolean> = {};\n      items.forEach((item) => {\n        if (item.items && item.items.length > 0) {\n          fallbackStates[item.title] = hasActiveSubItem(item) || item.isActive || false;\n        }\n      });\n      setOpenStates(fallbackStates);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []); // Only run on mount\n\n  // Update active states when pathname changes\n  React.useEffect(() => {\n    setOpenStates((prev) => {\n      const updatedStates = { ...prev };\n      let hasChanges = false;\n\n      items.forEach((item) => {\n        if (item.items && item.items.length > 0) {\n          const hasActiveSub = hasActiveSubItem(item);\n          // Auto-open if has active sub-item (don't close if user manually opened)\n          if (hasActiveSub && !updatedStates[item.title]) {\n            updatedStates[item.title] = true;\n            hasChanges = true;\n          }\n        }\n      });\n\n      // Only update and save if there are changes\n      if (hasChanges) {\n        try {\n          localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedStates));\n        } catch (error) {\n          console.warn('Failed to save sidebar states:', error);\n        }\n        return updatedStates;\n      }\n\n      return prev;\n    });\n  }, [pathname, items, hasActiveSubItem, STORAGE_KEY]);\n\n  // Function to toggle open state\n  const toggleOpenState = React.useCallback(\n    (itemTitle: string) => {\n      setOpenStates((prev) => {\n        const newStates = {\n          ...prev,\n          [itemTitle]: !prev[itemTitle],\n        };\n        // Save to localStorage immediately\n        try {\n          localStorage.setItem(STORAGE_KEY, JSON.stringify(newStates));\n        } catch (error) {\n          console.warn('Failed to save sidebar collapse states:', error);\n        }\n        return newStates;\n      });\n    },\n    [STORAGE_KEY],\n  );\n\n  return (\n    <>\n      <SidebarGroup\n        className={cn({\n          '!px-1': !isExpanded,\n        })}\n      >\n        {label && (\n          <div className={cn('relative h-[18px] overflow-hidden', labelClassName)}>\n            {/* Label text */}\n            <div\n              className={cn(\n                'text-ink-400s absolute inset-0 whitespace-nowrap px-3 text-xs uppercase tracking-wider transition-opacity duration-300',\n                showLabel ? 'z-10 opacity-100' : 'z-0 opacity-0',\n              )}\n            >\n              {label}\n            </div>\n\n            {/* Separator line */}\n            <div\n              className={cn(\n                'absolute inset-0 -ml-2 flex items-center transition-opacity duration-300',\n                !showLabel ? 'z-10 opacity-100' : 'z-0 opacity-0',\n              )}\n            >\n              <SidebarSeparator className={cn('bg-ink-300s dark:bg-ink-400s w-full')} />\n            </div>\n          </div>\n        )}\n        <SidebarMenu\n          className={cn('gap-3', {\n            'gap-2': !isExpanded && !isMobile,\n          })}\n        >\n          {items.map((item) => {\n            // Check for exact match or if current path is a sub-route of the nav item\n            // If exactMatch is true, only match the exact URL\n            const isMainActive = item.exactMatch\n              ? pathname === item.url\n              : pathname === item.url || (item.url !== '/' && pathname.startsWith(item.url + '/'));\n            const hasSubItems = item.items && item.items.length > 0;\n\n            // If no sub-items, render as simple menu button\n            if (!hasSubItems) {\n              // For button-type items (e.g., notifications)\n              if (item.type === 'button') {\n                return (\n                  <SidebarMenuItem key={item.title} className={item.className}>\n                    <SidebarMenuButton\n                      className={cn(\n                        itemHoverClassName,\n                        itemClassName,\n                        isMainActive && (itemActiveClassName || 'bg-white-200 hover:bg-white-200'),\n                        {\n                          '!flex-col !gap-1 !px-0 !py-2': !isExpanded && !isMobile,\n                          'icon-red-500 text-red-500 hover:bg-red-50': item.isLogoutButton,\n                        },\n                      )}\n                      onClick={item.onClick}\n                      data-notification-trigger\n                    >\n                      {item.icon && <item.icon />}\n                      <span\n                        className={cn({\n                          '!block !whitespace-normal text-center text-[10px] font-medium leading-4 !opacity-100':\n                            !isExpanded && !isMobile,\n                        })}\n                      >\n                        {isExpanded ? item.title : item.shortTitle || item.title}\n                      </span>\n                      {item.badge && (\n                        <SidebarMenuBadge className={item.badgeClassName}>\n                          {item.badge}\n                        </SidebarMenuBadge>\n                      )}\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                );\n              }\n\n              // For link-type items (default)\n              return (\n                <SidebarMenuItem key={item.title} className={item.className}>\n                  <SidebarMenuButton\n                    asChild\n                    className={cn(\n                      itemHoverClassName,\n                      itemClassName,\n                      isMainActive && (itemActiveClassName || 'bg-white-200 hover:bg-white-200'),\n                      {\n                        '!flex-col !gap-1 !px-0 !py-2': !isExpanded && !isMobile,\n                      },\n                    )}\n                  >\n                    <Link\n                      href={item.url || '#'}\n                      onClick={(e: React.MouseEvent) => {\n                        // Ensure navigation happens\n                        if (!item.url || item.url === '#') {\n                          e.preventDefault();\n                        }\n                        handleLinkClick(item.onNavigationClick);\n                      }}\n                      prefetch={true}\n                    >\n                      {item.icon && <item.icon />}\n                      <span\n                        className={cn({\n                          '!block !whitespace-normal text-center text-[10px] font-medium leading-4 !opacity-100':\n                            !isExpanded && !isMobile,\n                        })}\n                      >\n                        {isExpanded ? item.title : item.shortTitle || item.title}\n                      </span>\n                      {item.badge && (\n                        <SidebarMenuBadge className={item.badgeClassName}>\n                          {item.badge}\n                        </SidebarMenuBadge>\n                      )}\n                    </Link>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              );\n            }\n\n            // If collapsed, render with hover card\n            if (!open) {\n              // For button-type items when collapsed\n              if (item.type === 'button') {\n                return (\n                  <SidebarMenuItem key={item.title} className={item.className}>\n                    <SidebarMenuButton\n                      className={cn(\n                        itemHoverClassName,\n                        itemClassName,\n                        isMainActive && (itemActiveClassName || 'bg-white-200 hover:bg-white-200'),\n                      )}\n                      onClick={item.onClick}\n                    >\n                      {item.icon && <item.icon />}\n                      <span className=\"font-medium\">{item.title}</span>\n                      {item.badge && (\n                        <SidebarMenuBadge className={item.badgeClassName}>\n                          {item.badge}\n                        </SidebarMenuBadge>\n                      )}\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                );\n              }\n\n              // For link-type items when collapsed with sub-items\n              return (\n                <SidebarMenuItem key={item.title} className={item.className}>\n                  <HoverCard\n                    openDelay={200}\n                    closeDelay={100}\n                    open={hoverCardStates[item.title] || false}\n                    onOpenChange={(isOpen) => toggleHoverCard(item.title, isOpen)}\n                  >\n                    <HoverCardTrigger asChild>\n                      <SidebarMenuButton\n                        asChild\n                        className={cn(\n                          itemHoverClassName,\n                          itemClassName,\n                          isMainActive &&\n                            (itemActiveClassName || 'bg-white-200 hover:bg-white-200'),\n                        )}\n                      >\n                        <Link\n                          href={item.url || '#'}\n                          onClick={(e: React.MouseEvent) => {\n                            // Prevent default if no valid URL\n                            if (!item.url || item.url === '#') {\n                              e.preventDefault();\n                            }\n                            // Close hover card immediately on click\n                            toggleHoverCard(item.title, false);\n                            handleLinkClick(item.onNavigationClick);\n                          }}\n                          prefetch={true}\n                        >\n                          {item.icon && <item.icon />}\n                          <span className=\"font-medium\">{item.title}</span>\n                          {item.badge && (\n                            <SidebarMenuBadge className={item.badgeClassName}>\n                              {item.badge}\n                            </SidebarMenuBadge>\n                          )}\n                        </Link>\n                      </SidebarMenuButton>\n                    </HoverCardTrigger>\n                    <HoverCardContent\n                      side=\"right\"\n                      align=\"start\"\n                      className=\"pointer-events-auto w-56 p-3\"\n                      sideOffset={8}\n                      onPointerDownOutside={() => toggleHoverCard(item.title, false)}\n                    >\n                      <div className=\"border-ink-200s text-ink-500s mb-2 border-b px-2 py-1.5 text-sm font-bold\">\n                        {item.title}\n                      </div>\n                      <div className=\"space-y-1\">\n                        {item.items?.map((subItem) => {\n                          // Check for exact match or if current path is a sub-route of the sub-item\n                          const isSubActive =\n                            pathname === subItem.url ||\n                            (subItem.url !== '/' && pathname.startsWith(subItem.url + '/'));\n                          return (\n                            <Link\n                              key={subItem.title}\n                              href={subItem.url}\n                              onClick={(e: React.MouseEvent) => {\n                                // Ensure navigation happens\n                                if (!subItem.url || subItem.url === '#') {\n                                  e.preventDefault();\n                                }\n                                toggleHoverCard(item.title, false);\n                                handleLinkClick(subItem.onNavigationClick);\n                              }}\n                              prefetch={true}\n                              className={cn(\n                                'flex items-center justify-between rounded-md px-2 py-2 text-sm transition-colors',\n                                subItemHoverClassName,\n                                subItemClassName,\n                                isSubActive &&\n                                  (subItemActiveClassName || 'bg-white-200 hover:bg-white-200'),\n                              )}\n                            >\n                              <span>{subItem.title}</span>\n                              {subItem.title === 'Tin nhắn' && (\n                                <span className=\"rounded bg-red-500 px-1.5 py-0.5 text-xs text-white\">\n                                  4 mới\n                                </span>\n                              )}\n                            </Link>\n                          );\n                        })}\n                      </div>\n                    </HoverCardContent>\n                  </HoverCard>\n                </SidebarMenuItem>\n              );\n            }\n\n            // If has sub-items and expanded, render with collapsible functionality\n            return (\n              <Collapsible\n                key={item.title}\n                asChild\n                open={openStates[item.title] || false}\n                onOpenChange={() => toggleOpenState(item.title)}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem className={item.className}>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton\n                      className={cn(\n                        itemHoverClassName,\n                        itemClassName,\n                        isMainActive && (itemActiveClassName || 'bg-white-200 hover:bg-white-200'),\n                      )}\n                    >\n                      {item.icon && <item.icon />}\n                      <span className=\"flex w-full items-center justify-between\">\n                        {item.title}\n                        <ArrowRightIcon className=\"transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                      </span>\n                      {item.badge && (\n                        <SidebarMenuBadge className={item.badgeClassName}>\n                          {item.badge}\n                        </SidebarMenuBadge>\n                      )}\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => {\n                        // Check for exact match or if current path is a sub-route of the sub-item\n                        const isSubActive =\n                          pathname === subItem.url ||\n                          (subItem.url !== '/' && pathname.startsWith(subItem.url + '/'));\n                        return (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              className={cn(\n                                subItemHoverClassName,\n                                subItemClassName,\n                                isSubActive &&\n                                  (subItemActiveClassName || 'bg-white-200 hover:bg-white-200'),\n                              )}\n                            >\n                              <Link\n                                href={subItem.url}\n                                onClick={(e: React.MouseEvent) => {\n                                  // Ensure navigation happens\n                                  if (!subItem.url || subItem.url === '#') {\n                                    e.preventDefault();\n                                  }\n                                  handleLinkClick(subItem.onNavigationClick);\n                                }}\n                                prefetch={true}\n                              >\n                                <span className=\"font-medium\">{subItem.title}</span>\n                              </Link>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        );\n                      })}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            );\n          })}\n        </SidebarMenu>\n      </SidebarGroup>\n    </>\n  );\n}\n"]}

package/dist/common/display/sidebar/sidebar-sheet.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var sidebar = require('@/components/sidebar');
+var useDevice = require('@/hooks/useDevice');
+var utils = require('@/lib/utils');
+var React = require('react');
+var sheetWrapper = require('../../interactive/sheet-wrapper');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function SidebarSheet({
+  open,
+  onClose,
+  title,
+  headerClassName,
+  childrenClassName,
+  contentClassName,
+  children,
+  ...props
+}) {
+  const { isDesktop } = useDevice.useDevice();
+  const { config, customWidth, state, isHovered } = sidebar.useSidebar();
+  const sidebarWidth = React__namespace.useMemo(() => {
+    if (!isDesktop) return 0;
+    if (state === "collapsed" && isHovered) {
+      const width2 = config.width;
+      return width2.endsWith("rem") ? parseFloat(width2) * 16 : parseFloat(width2);
+    }
+    if (state === "collapsed") {
+      const iconWidth = config.widthIcon;
+      return iconWidth.endsWith("rem") ? parseFloat(iconWidth) * 16 : parseFloat(iconWidth);
+    }
+    if (customWidth) {
+      return customWidth;
+    }
+    const width = config.width;
+    return width.endsWith("rem") ? parseFloat(width) * 16 : parseFloat(width);
+  }, [isDesktop, state, config, customWidth, isHovered]);
+  React__namespace.useEffect(() => {
+    if (!isDesktop || !open) return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (target.closest("[data-notification-trigger]")) {
+        return;
+      }
+      if (target.closest('[role="dialog"]')) {
+        return;
+      }
+      if (target.closest('[data-sidebar="inset"]')) {
+        onClose();
+        return;
+      }
+      if (target.closest("[data-sidebar] a")) {
+        return;
+      }
+      if (target.closest("[data-sidebar]")) {
+        return;
+      }
+      onClose();
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside, true);
+    }, 100);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside, true);
+    };
+  }, [isDesktop, open, onClose]);
+  const handleInteractOutside = React__namespace.useCallback((event) => {
+    const target = event.target;
+    if (target.closest("[data-notification-trigger]")) {
+      event.preventDefault();
+      return;
+    }
+    if (target.closest('[data-sidebar="inset"]')) {
+      return;
+    }
+    if (target.closest("[data-sidebar] a")) {
+      event.preventDefault();
+      return;
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    sheetWrapper.SheetWrapper,
+    {
+      open,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          onClose();
+        }
+      },
+      modal: !isDesktop,
+      side: !isDesktop ? "bottom" : "left",
+      sideOffset: isDesktop ? sidebarWidth : void 0,
+      showHeader: !!title,
+      title,
+      headerClassName,
+      childrenClassName,
+      contentClassName: utils.cn(
+        "p-0 gap-0",
+        // Mobile styles - with backdrop overlay, full screen height
+        !isDesktop && `h-[100dvh] !max-h-[100dvh]`,
+        // Desktop styles - positioned next to sidebar, no backdrop
+        isDesktop && `!z-[35] !w-[390px]`,
+        contentClassName
+      ),
+      onOpenAutoFocus: (e) => {
+        if (!isDesktop) {
+          e.preventDefault();
+        }
+      },
+      onInteractOutside: handleInteractOutside,
+      ...props,
+      children
+    }
+  );
+}
+
+exports.SidebarSheet = SidebarSheet;
+//# sourceMappingURL=sidebar-sheet.js.map
+//# sourceMappingURL=sidebar-sheet.js.map

package/dist/common/display/sidebar/sidebar-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/display/sidebar/sidebar-sheet.tsx"],"names":["useDevice","useSidebar","React","width","jsx","SheetWrapper","cn"],"mappings":"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","file":"sidebar-sheet.js","sourcesContent":["'use client';\n\nimport { useSidebar } from '@/components/sidebar';\nimport { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { SheetWrapper, SheetWrapperProps } from '../../interactive/sheet-wrapper';\n\ninterface SidebarSheetProps extends Omit<SheetWrapperProps, 'side' | 'sideOffset' | 'modal'> {\n  /**\n   * Whether the sheet is open\n   */\n  open: boolean;\n  /**\n   * Callback when the sheet should close\n   */\n  onClose: () => void;\n  /**\n   * The title of the sheet header\n   */\n  title?: string;\n  /**\n   * Custom header class name\n   */\n  headerClassName?: string;\n  /**\n   * Custom children container class name\n   */\n  childrenClassName?: string;\n  /**\n   * Custom content class name\n   */\n  contentClassName?: string;\n  /**\n   * Children content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * A reusable sheet component that positions itself next to the sidebar on desktop\n * and slides from bottom on mobile.\n *\n * Features:\n * - Desktop: Slides from left, positioned next to sidebar (no backdrop)\n * - Mobile: Slides from bottom (with backdrop overlay)\n * - Only closes when clicking to the RIGHT of the sheet on desktop\n * - Clicking on sidebar or sheet itself doesn't close it\n * - Clicking on notification trigger button toggles the sheet\n */\nexport function SidebarSheet({\n  open,\n  onClose,\n  title,\n  headerClassName,\n  childrenClassName,\n  contentClassName,\n  children,\n  ...props\n}: SidebarSheetProps) {\n  const { isDesktop } = useDevice();\n  const { config, customWidth, state, isHovered } = useSidebar();\n\n  // Calculate actual sidebar width based on state and hover\n  const sidebarWidth = React.useMemo(() => {\n    if (!isDesktop) return 0;\n\n    // When sidebar is collapsed but hovering, use expanded width\n    if (state === 'collapsed' && isHovered) {\n      const width = config.width;\n      return width.endsWith('rem') ? parseFloat(width) * 16 : parseFloat(width);\n    }\n\n    // When sidebar is collapsed (not hovering), use icon width\n    if (state === 'collapsed') {\n      const iconWidth = config.widthIcon;\n      return iconWidth.endsWith('rem') ? parseFloat(iconWidth) * 16 : parseFloat(iconWidth);\n    }\n\n    // When expanded, use custom width if available, otherwise use config width\n    if (customWidth) {\n      return customWidth;\n    }\n\n    const width = config.width;\n    return width.endsWith('rem') ? parseFloat(width) * 16 : parseFloat(width);\n  }, [isDesktop, state, config, customWidth, isHovered]);\n\n  // Handle click outside on desktop (since modal=false doesn't trigger onInteractOutside)\n  React.useEffect(() => {\n    if (!isDesktop || !open) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      const target = event.target as HTMLElement;\n\n      // Check if clicking on notification trigger\n      if (target.closest('[data-notification-trigger]')) {\n        return; // Let the toggle handler deal with it\n      }\n\n      // Check if clicking inside the sheet\n      if (target.closest('[role=\"dialog\"]')) {\n        return; // Don't close when clicking inside sheet\n      }\n\n      // Check if clicking on SidebarContent (data-sidebar=\"inset\") - CLOSE the sheet\n      if (target.closest('[data-sidebar=\"inset\"]')) {\n        onClose();\n        return;\n      }\n\n      // Check if clicking on sidebar navigation links - ALLOW navigation, pathname change will close sheet\n      if (target.closest('[data-sidebar] a')) {\n        return; // Allow navigation to proceed\n      }\n\n      // Check if clicking on other sidebar elements (trigger, rail, etc)\n      if (target.closest('[data-sidebar]')) {\n        return; // Don't close for other sidebar interactions\n      }\n\n      // Click outside (to the right of sheet) - close it\n      onClose();\n    };\n\n    // Use capture phase to intercept clicks before they bubble\n    // Add small delay to avoid immediate closing when opening\n    const timeoutId = setTimeout(() => {\n      document.addEventListener('mousedown', handleClickOutside, true);\n    }, 100);\n\n    return () => {\n      clearTimeout(timeoutId);\n      document.removeEventListener('mousedown', handleClickOutside, true);\n    };\n  }, [isDesktop, open, onClose]);\n\n  // Custom onInteractOutside handler for mobile (modal=true)\n  // This only works on mobile where modal=true\n  const handleInteractOutside = React.useCallback((event: Event) => {\n    const target = event.target as HTMLElement;\n\n    // Check if clicking on the notification trigger button\n    if (target.closest('[data-notification-trigger]')) {\n      event.preventDefault();\n      return;\n    }\n\n    // Check if clicking on SidebarContent (data-sidebar=\"inset\") - allow close\n    if (target.closest('[data-sidebar=\"inset\"]')) {\n      // Let default behavior close the sheet\n      return;\n    }\n\n    // Check if clicking on sidebar navigation links - ALLOW navigation, pathname change will close sheet\n    if (target.closest('[data-sidebar] a')) {\n      event.preventDefault();\n      return; // Allow navigation, pathname change will close sheet\n    }\n\n    // For mobile, let default behavior close the sheet for other clicks\n  }, []);\n\n  return (\n    <SheetWrapper\n      open={open}\n      onOpenChange={(isOpen) => {\n        if (!isOpen) {\n          // Call onClose for both mobile and desktop\n          // This handles the close button (X) click properly\n          onClose();\n        }\n      }}\n      modal={!isDesktop}\n      side={!isDesktop ? 'bottom' : 'left'}\n      sideOffset={isDesktop ? sidebarWidth : undefined}\n      showHeader={!!title}\n      title={title}\n      headerClassName={headerClassName}\n      childrenClassName={childrenClassName}\n      contentClassName={cn(\n        'p-0 gap-0',\n        // Mobile styles - with backdrop overlay, full screen height\n        !isDesktop && `h-[100dvh] !max-h-[100dvh]`,\n        // Desktop styles - positioned next to sidebar, no backdrop\n        isDesktop && `!z-[35] !w-[390px]`,\n        contentClassName,\n      )}\n      onOpenAutoFocus={(e) => {\n        // Prevent auto-focus on desktop to avoid closing sidebar\n        if (!isDesktop) {\n          e.preventDefault();\n        }\n      }}\n      onInteractOutside={handleInteractOutside}\n      {...props}\n    >\n      {children}\n    </SheetWrapper>\n  );\n}\n\nexport type { SidebarSheetProps };\n"]}