shad-m 1.0.0

package/dist/common/display/sidebar/index.mjs

@@ -0,0 +1,81 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { SidebarInset } from '@/components/sidebar';
+import { cn } from '@/lib/utils';
+import { AppSidebar } from './app-sidebar';
+export { SidebarSheet } from './sidebar-sheet';
+
+const SidebarContent = ({ header, children, headerClass, mainClass }) => {
+  const headerContent = typeof header === "function" ? header() : header;
+  return /* @__PURE__ */ jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-1 flex-col", "data-sidebar": "inset", children: [
+    /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: cn(
+          "bg-background fixed left-0 right-0 top-0 z-30 flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4",
+          headerClass
+        ),
+        children: headerContent
+      }
+    ),
+    /* @__PURE__ */ jsx("main", { className: cn("flex-1 pt-16", mainClass), children })
+  ] });
+};
+const SidebarLayout = ({
+  navSections,
+  sidebarHeader,
+  sidebarHeaderAsMenuItem = false,
+  sidebarHeaderLink = "/",
+  sidebarFooter,
+  sidebarContent,
+  userInfo,
+  userInfoPlacement = "content",
+  hasSideRail,
+  header,
+  children,
+  LinkComponent,
+  headerClass,
+  mainClass,
+  sidebarClassNames,
+  navClassNames,
+  showHeader = true,
+  showFooter = true,
+  compactWhenCollapsed = true
+}) => {
+  const showUserInfoInContent = userInfoPlacement === "content" || userInfoPlacement === "both";
+  const showUserInfoInFooter = userInfoPlacement === "footer" || userInfoPlacement === "both";
+  const composedSidebarContent = showUserInfoInContent && userInfo ? /* @__PURE__ */ jsx(Fragment, { children: userInfo }) : sidebarContent;
+  const composedSidebarFooter = showUserInfoInFooter && userInfo ? /* @__PURE__ */ jsx(Fragment, { children: userInfo }) : sidebarFooter;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AppSidebar,
+      {
+        navSections,
+        sidebarHeader,
+        sidebarHeaderAsMenuItem,
+        sidebarHeaderLink,
+        sidebarFooter: composedSidebarFooter,
+        sidebarContent: composedSidebarContent,
+        LinkComponent,
+        showHeader,
+        showFooter,
+        compactWhenCollapsed,
+        className: sidebarClassNames?.root,
+        classNames: {
+          header: sidebarClassNames?.header,
+          content: sidebarClassNames?.content,
+          footer: sidebarClassNames?.footer,
+          trigger: sidebarClassNames?.trigger,
+          mobileRoot: sidebarClassNames?.mobileRoot
+        },
+        hasSideRail,
+        navClassNames
+      }
+    ),
+    /* @__PURE__ */ jsx(SidebarContent, { header, headerClass, mainClass, children })
+  ] });
+};
+var sidebar_default = SidebarLayout;
+
+export { sidebar_default as default };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/common/display/sidebar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/display/sidebar/index.tsx"],"names":[],"mappings":";;;;;;AA+BA,MAAM,iBAKD,CAAC,EAAE,QAAQ,QAAA,EAAU,WAAA,EAAa,WAAU,KAAM;AAErD,EAAA,MAAM,aAAA,GAAgB,OAAO,MAAA,KAAW,UAAA,GAAa,QAAO,GAAI,MAAA;AAEhE,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,wCAAA,EAAyC,gBAAa,OAAA,EAC5E,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,mHAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,wBACC,MAAA,EAAA,EAAK,SAAA,EAAW,GAAG,cAAA,EAAgB,SAAS,GAAI,QAAA,EAAS;AAAA,GAAA,EAC5D,CAAA;AAEJ,CAAA;AAEA,MAAM,gBAA+D,CAAC;AAAA,EACpE,WAAA;AAAA,EACA,aAAA;AAAA,EACA,uBAAA,GAA0B,KAAA;AAAA,EAC1B,iBAAA,GAAoB,GAAA;AAAA,EACpB,aAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA,GAAoB,SAAA;AAAA,EACpB,WAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,UAAA,GAAa,IAAA;AAAA,EACb,oBAAA,GAAuB;AACzB,CAAA,KAAM;AAEJ,EAAA,MAAM,qBAAA,GAAwB,iBAAA,KAAsB,SAAA,IAAa,iBAAA,KAAsB,MAAA;AACvF,EAAA,MAAM,oBAAA,GAAuB,iBAAA,KAAsB,QAAA,IAAY,iBAAA,KAAsB,MAAA;AAErF,EAAA,MAAM,sBAAA,GACJ,qBAAA,IAAyB,QAAA,mBAAW,GAAA,CAAA,QAAA,EAAA,EAAG,oBAAS,CAAA,GAAM,cAAA;AACxD,EAAA,MAAM,qBAAA,GAAwB,oBAAA,IAAwB,QAAA,mBAAW,GAAA,CAAA,QAAA,EAAA,EAAG,oBAAS,CAAA,GAAM,aAAA;AAEnF,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,aAAA;AAAA,QACA,uBAAA;AAAA,QACA,iBAAA;AAAA,QACA,aAAA,EAAe,qBAAA;AAAA,QACf,cAAA,EAAgB,sBAAA;AAAA,QAChB,aAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,oBAAA;AAAA,QACA,WAAW,iBAAA,EAAmB,IAAA;AAAA,QAC9B,UAAA,EAAY;AAAA,UACV,QAAQ,iBAAA,EAAmB,MAAA;AAAA,UAC3B,SAAS,iBAAA,EAAmB,OAAA;AAAA,UAC5B,QAAQ,iBAAA,EAAmB,MAAA;AAAA,UAC3B,SAAS,iBAAA,EAAmB,OAAA;AAAA,UAC5B,YAAY,iBAAA,EAAmB;AAAA,SACjC;AAAA,QACA,WAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,cAAA,EAAA,EAAe,MAAA,EAAgB,WAAA,EAA0B,WACvD,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"index.mjs","sourcesContent":["'use client';\nimport { SidebarInset } from '@/components/sidebar';\nimport { NavSectionType } from '@/lib/types';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { AppSidebar } from './app-sidebar';\nimport { NavItemClassNames, SidebarClassNames } from './types';\n\ninterface ISidebarWrapperProps {\n  navSections: NavSectionType[]; // Changed from navItems to navSections\n  sidebarHeader: React.ReactNode;\n  sidebarHeaderAsMenuItem?: boolean; // If true, wraps sidebarHeader in SidebarMenu structure\n  sidebarHeaderLink?: string; // Optional link for header when used as menu item\n  header?: React.ReactNode | (() => React.ReactNode); // Can be ReactNode or function that returns ReactNode\n  children: React.ReactNode;\n  LinkComponent?: React.ComponentType<any>;\n  sidebarFooter?: React.ReactNode; // Footer content (can be overridden by userInfo)\n  sidebarContent?: React.ReactNode; // Content before navigation (can be overridden by userInfo)\n  userInfo?: React.ReactNode; // User info section (will be placed based on userInfoPlacement)\n  userInfoPlacement?: 'content' | 'footer' | 'both' | 'none'; // Control where userInfo is displayed\n  hasSideRail?: boolean; // Controls SidebarRail visibility for drag-to-resize functionality\n  headerClass?: string;\n  mainClass?: string;\n  // Grouped style customization props\n  sidebarClassNames?: SidebarClassNames;\n  navClassNames?: NavItemClassNames;\n  showHeader?: boolean;\n  showFooter?: boolean;\n  compactWhenCollapsed?: boolean;\n}\n\nconst SidebarContent: React.FunctionComponent<{\n  header: React.ReactNode | (() => React.ReactNode);\n  children: React.ReactNode;\n  headerClass?: string;\n  mainClass?: string;\n}> = ({ header, children, headerClass, mainClass }) => {\n  // Render header - if it's a function, call it inside the component so it has access to context\n  const headerContent = typeof header === 'function' ? header() : header;\n\n  return (\n    <SidebarInset className=\"flex min-h-svh min-w-0 flex-1 flex-col\" data-sidebar=\"inset\">\n      <header\n        className={cn(\n          'bg-background fixed left-0 right-0 top-0 z-30 flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4',\n          headerClass,\n        )}\n      >\n        {headerContent}\n      </header>\n      <main className={cn('flex-1 pt-16', mainClass)}>{children}</main>\n    </SidebarInset>\n  );\n};\n\nconst SidebarLayout: React.FunctionComponent<ISidebarWrapperProps> = ({\n  navSections,\n  sidebarHeader,\n  sidebarHeaderAsMenuItem = false,\n  sidebarHeaderLink = '/',\n  sidebarFooter,\n  sidebarContent,\n  userInfo,\n  userInfoPlacement = 'content',\n  hasSideRail,\n  header,\n  children,\n  LinkComponent,\n  headerClass,\n  mainClass,\n  sidebarClassNames,\n  navClassNames,\n  showHeader = true,\n  showFooter = true,\n  compactWhenCollapsed = true,\n}) => {\n  // Compose sidebar content and footer based on userInfoPlacement\n  const showUserInfoInContent = userInfoPlacement === 'content' || userInfoPlacement === 'both';\n  const showUserInfoInFooter = userInfoPlacement === 'footer' || userInfoPlacement === 'both';\n\n  const composedSidebarContent =\n    showUserInfoInContent && userInfo ? <>{userInfo}</> : sidebarContent;\n  const composedSidebarFooter = showUserInfoInFooter && userInfo ? <>{userInfo}</> : sidebarFooter;\n\n  return (\n    <>\n      <AppSidebar\n        navSections={navSections}\n        sidebarHeader={sidebarHeader}\n        sidebarHeaderAsMenuItem={sidebarHeaderAsMenuItem}\n        sidebarHeaderLink={sidebarHeaderLink}\n        sidebarFooter={composedSidebarFooter}\n        sidebarContent={composedSidebarContent}\n        LinkComponent={LinkComponent}\n        showHeader={showHeader}\n        showFooter={showFooter}\n        compactWhenCollapsed={compactWhenCollapsed}\n        className={sidebarClassNames?.root}\n        classNames={{\n          header: sidebarClassNames?.header,\n          content: sidebarClassNames?.content,\n          footer: sidebarClassNames?.footer,\n          trigger: sidebarClassNames?.trigger,\n          mobileRoot: sidebarClassNames?.mobileRoot,\n        }}\n        hasSideRail={hasSideRail}\n        navClassNames={navClassNames}\n      />\n      <SidebarContent header={header} headerClass={headerClass} mainClass={mainClass}>\n        {children}\n      </SidebarContent>\n    </>\n  );\n};\n\nexport default SidebarLayout;\nexport { SidebarSheet } from './sidebar-sheet';\nexport type { SidebarSheetProps } from './sidebar-sheet';\nexport type { NavItemClassNames, SidebarClassNames };\n"]}

package/dist/common/display/sidebar/nav-main.d.ts

@@ -0,0 +1,17 @@
+import { NavItemType } from '@/lib/types';
+import React from 'react';
+interface NavMainProps {
+    label?: string;
+    items: NavItemType[];
+    LinkComponent?: React.ComponentType<any>;
+    labelClassName?: string;
+    itemClassName?: string;
+    itemActiveClassName?: string;
+    itemHoverClassName?: string;
+    subItemClassName?: string;
+    subItemActiveClassName?: string;
+    subItemHoverClassName?: string;
+}
+export declare function NavMain({ label, items, LinkComponent: LinkComponentProp, labelClassName, itemClassName, itemActiveClassName, itemHoverClassName, subItemClassName, subItemActiveClassName, subItemHoverClassName, }: NavMainProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=nav-main.d.ts.map

package/dist/common/display/sidebar/nav-main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-main.d.ts","sourceRoot":"","sources":["../../../../src/common/display/sidebar/nav-main.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAqB1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,aAAa,EAAE,iBAAiB,EAChC,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,kBAAyC,EACzC,gBAAgB,EAChB,sBAAsB,EACtB,qBAA4C,GAC7C,EAAE,YAAY,2CAudd"}

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

@@ -0,0 +1,406 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@/icons');
+var usePathname = require('@repo/ui/hooks/usePathname');
+var providers = require('@repo/ui/providers');
+var collapsible = require('@repo/ui/components/collapsible');
+var hoverCard = require('@repo/ui/components/hover-card');
+var sidebar = require('@repo/ui/components/sidebar');
+var utils = require('@repo/ui/lib/utils');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(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.usePathname();
+  const { open, state, isHovered, isMobile, openMobile, setOpenMobile } = sidebar.useSidebar();
+  const { LinkComponent: LinkComponentContext } = providers.useUISystemContext();
+  const showLabel = isMobile ? true : open || state === "collapsed" && isHovered;
+  const [openStates, setOpenStates] = React__default.default.useState({});
+  const [hoverCardStates, setHoverCardStates] = React__default.default.useState({});
+  const isExpanded = isMobile ? openMobile : open || state === "collapsed" && isHovered;
+  const toggleHoverCard = React__default.default.useCallback((itemTitle, isOpen) => {
+    setHoverCardStates((prev) => ({
+      ...prev,
+      [itemTitle]: isOpen
+    }));
+  }, []);
+  const STORAGE_KEY = "sidebar-nav-collapse-states";
+  const Link = LinkComponentProp || LinkComponentContext || (({ href, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...props, children }));
+  const handleLinkClick = React__default.default.useCallback(
+    (onNavigationClick) => {
+      if (isMobile) {
+        setOpenMobile(false);
+      }
+      onNavigationClick?.();
+    },
+    [isMobile, setOpenMobile]
+  );
+  const hasActiveSubItem = React__default.default.useCallback(
+    (item) => {
+      return item.items?.some(
+        (subItem) => pathname === subItem.url || subItem.url !== "/" && pathname.startsWith(subItem.url + "/")
+      ) || false;
+    },
+    [pathname]
+  );
+  React__default.default.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__default.default.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__default.default.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    sidebar.SidebarGroup,
+    {
+      className: utils.cn({
+        "!px-1": !isExpanded
+      }),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative h-[18px] overflow-hidden", labelClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils.cn(
+                "absolute inset-0 -ml-2 flex items-center transition-opacity duration-300",
+                !showLabel ? "z-10 opacity-100" : "z-0 opacity-0"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarSeparator, { className: utils.cn("bg-ink-300s dark:bg-ink-400s w-full") })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          sidebar.SidebarMenu,
+          {
+            className: utils.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__ */ jsxRuntime.jsx(sidebar.SidebarMenuItem, { className: item.className, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    sidebar.SidebarMenuButton,
+                    {
+                      className: utils.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__ */ jsxRuntime.jsx(item.icon, {}),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: utils.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__ */ jsxRuntime.jsx(sidebar.SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                      ]
+                    }
+                  ) }, item.title);
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenuItem, { className: item.className, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  sidebar.SidebarMenuButton,
+                  {
+                    asChild: true,
+                    className: utils.cn(
+                      itemHoverClassName,
+                      itemClassName,
+                      isMainActive && (itemActiveClassName || "bg-white-200 hover:bg-white-200"),
+                      {
+                        "!flex-col !gap-1 !px-0 !py-2": !isExpanded && !isMobile
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      Link,
+                      {
+                        href: item.url || "#",
+                        onClick: (e) => {
+                          if (!item.url || item.url === "#") {
+                            e.preventDefault();
+                          }
+                          handleLinkClick(item.onNavigationClick);
+                        },
+                        prefetch: true,
+                        children: [
+                          item.icon && /* @__PURE__ */ jsxRuntime.jsx(item.icon, {}),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: utils.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__ */ jsxRuntime.jsx(sidebar.SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                        ]
+                      }
+                    )
+                  }
+                ) }, item.title);
+              }
+              if (!open) {
+                if (item.type === "button") {
+                  return /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenuItem, { className: item.className, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    sidebar.SidebarMenuButton,
+                    {
+                      className: utils.cn(
+                        itemHoverClassName,
+                        itemClassName,
+                        isMainActive && (itemActiveClassName || "bg-white-200 hover:bg-white-200")
+                      ),
+                      onClick: item.onClick,
+                      children: [
+                        item.icon && /* @__PURE__ */ jsxRuntime.jsx(item.icon, {}),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: item.title }),
+                        item.badge && /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                      ]
+                    }
+                  ) }, item.title);
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenuItem, { className: item.className, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  hoverCard.HoverCard,
+                  {
+                    openDelay: 200,
+                    closeDelay: 100,
+                    open: hoverCardStates[item.title] || false,
+                    onOpenChange: (isOpen) => toggleHoverCard(item.title, isOpen),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(hoverCard.HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        sidebar.SidebarMenuButton,
+                        {
+                          asChild: true,
+                          className: utils.cn(
+                            itemHoverClassName,
+                            itemClassName,
+                            isMainActive && (itemActiveClassName || "bg-white-200 hover:bg-white-200")
+                          ),
+                          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(item.icon, {}),
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: item.title }),
+                                item.badge && /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                              ]
+                            }
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        hoverCard.HoverCardContent,
+                        {
+                          side: "right",
+                          align: "start",
+                          className: "pointer-events-auto w-56 p-3",
+                          sideOffset: 8,
+                          onPointerDownOutside: () => toggleHoverCard(item.title, false),
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: item.items?.map((subItem) => {
+                              const isSubActive = pathname === subItem.url || subItem.url !== "/" && pathname.startsWith(subItem.url + "/");
+                              return /* @__PURE__ */ jsxRuntime.jsxs(
+                                Link,
+                                {
+                                  href: subItem.url,
+                                  onClick: (e) => {
+                                    if (!subItem.url || subItem.url === "#") {
+                                      e.preventDefault();
+                                    }
+                                    toggleHoverCard(item.title, false);
+                                    handleLinkClick(subItem.onNavigationClick);
+                                  },
+                                  prefetch: true,
+                                  className: utils.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__ */ jsxRuntime.jsx("span", { children: subItem.title }),
+                                    subItem.title === "Tin nh\u1EAFn" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                collapsible.Collapsible,
+                {
+                  asChild: true,
+                  open: openStates[item.title] || false,
+                  onOpenChange: () => toggleOpenState(item.title),
+                  className: "group/collapsible",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(sidebar.SidebarMenuItem, { className: item.className, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      sidebar.SidebarMenuButton,
+                      {
+                        className: utils.cn(
+                          itemHoverClassName,
+                          itemClassName,
+                          isMainActive && (itemActiveClassName || "bg-white-200 hover:bg-white-200")
+                        ),
+                        children: [
+                          item.icon && /* @__PURE__ */ jsxRuntime.jsx(item.icon, {}),
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full items-center justify-between", children: [
+                            item.title,
+                            /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowRightIcon, { className: "transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+                          ] }),
+                          item.badge && /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenuBadge, { className: item.badgeClassName, children: item.badge })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleContent, { children: /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenuSub, { children: item.items?.map((subItem) => {
+                      const isSubActive = pathname === subItem.url || subItem.url !== "/" && pathname.startsWith(subItem.url + "/");
+                      return /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenuSubItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                        sidebar.SidebarMenuSubButton,
+                        {
+                          asChild: true,
+                          className: utils.cn(
+                            subItemHoverClassName,
+                            subItemClassName,
+                            isSubActive && (subItemActiveClassName || "bg-white-200 hover:bg-white-200")
+                          ),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Link,
+                            {
+                              href: subItem.url,
+                              onClick: (e) => {
+                                if (!subItem.url || subItem.url === "#") {
+                                  e.preventDefault();
+                                }
+                                handleLinkClick(subItem.onNavigationClick);
+                              },
+                              prefetch: true,
+                              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: subItem.title })
+                            }
+                          )
+                        }
+                      ) }, subItem.title);
+                    }) }) })
+                  ] })
+                },
+                item.title
+              );
+            })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+exports.NavMain = NavMain;
+//# sourceMappingURL=nav-main.js.map
+//# sourceMappingURL=nav-main.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/display/sidebar/nav-main.tsx"],"names":["usePathname","useSidebar","useUISystemContext","React","jsx","Fragment","jsxs","SidebarGroup","cn","SidebarSeparator","SidebarMenu","SidebarMenuItem","SidebarMenuButton","SidebarMenuBadge","HoverCard","HoverCardTrigger","HoverCardContent","Collapsible","CollapsibleTrigger","ArrowRightIcon","CollapsibleContent","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton"],"mappings":"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","file":"nav-main.js","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"]}