@almadar/ui 6.11.0 → 6.13.0

package/dist/components/index.cjs

@@ -24113,6 +24113,18 @@ var init_useAuthContext = __esm({
   "hooks/useAuthContext.ts"() {
   }
 });
+function resolveActiveNavHref(items, currentPath) {
+  let best;
+  for (const item of items) {
+    for (const href of item.children?.length ? [item.href, ...item.children.map((c) => c.href)] : [item.href]) {
+      if (currentPath === href) return href;
+      if (currentPath.startsWith(href + "/") && (!best || href.length > best.length)) {
+        best = href;
+      }
+    }
+  }
+  return best;
+}
 exports.DashboardLayout = void 0; var NavLink, NavLinkTopnav, NavLinkBottom;
 var init_DashboardLayout = __esm({
   "components/core/templates/DashboardLayout.tsx"() {
@@ -24184,6 +24196,7 @@ var init_DashboardLayout = __esm({
       const location = reactRouterDom.useLocation();
       const ctxPagePath = providers.useCurrentPagePath();
       const activePath = (currentPath || void 0) ?? ctxPagePath ?? location.pathname;
+      const activeHref = React79.useMemo(() => resolveActiveNavHref(navItems, activePath), [navItems, activePath]);
       const { user: authUser, signOut: authSignOut } = useAuthContext();
       const user = userProp || (authUser ? {
         name: authUser.displayName || authUser.email?.split("@")[0] || "User",
@@ -24280,7 +24293,7 @@ var init_DashboardLayout = __esm({
                         NavLink,
                         {
                           item,
-                          currentPath: activePath,
+                          activeHref,
                           compact: isRail
                         },
                         item.href
@@ -24347,7 +24360,7 @@ var init_DashboardLayout = __esm({
                                 NavLinkTopnav,
                                 {
                                   item,
-                                  currentPath: activePath
+                                  activeHref
                                 },
                                 item.href
                               ))
@@ -24523,7 +24536,7 @@ var init_DashboardLayout = __esm({
                     NavLinkBottom,
                     {
                       item,
-                      currentPath: activePath
+                      activeHref
                     },
                     item.href
                   )) })
@@ -24537,15 +24550,71 @@ var init_DashboardLayout = __esm({
     exports.DashboardLayout.displayName = "DashboardLayout";
     NavLink = ({
       item,
-      currentPath,
+      activeHref,
       compact = false
     }) => {
-      const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
+      const hasChildren = !!item.children?.length;
+      const childActive = hasChildren && item.children.some((child) => child.href === activeHref);
+      const isActive = item.href === activeHref || childActive;
+      const [open, setOpen] = React79.useState(childActive);
       const iconClassName = cn(
         "h-5 w-5",
         isActive ? "text-primary-foreground" : "text-muted-foreground"
       );
       if (compact) {
+        if (hasChildren) {
+          return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Button,
+              {
+                variant: "ghost",
+                title: item.label,
+                "aria-label": item.label,
+                "aria-expanded": open,
+                className: cn(
+                  "flex items-center justify-center w-full px-2 py-2 rounded-lg transition-colors",
+                  isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                ),
+                onClick: () => setOpen(!open),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { as: "span", className: "relative inline-flex", children: [
+                  item.icon ? typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "font-semibold", as: "span", children: item.label.charAt(0).toUpperCase() }),
+                  item.badge && /* @__PURE__ */ jsxRuntime.jsx(
+                    exports.Badge,
+                    {
+                      variant: isActive ? "primary" : "default",
+                      size: "sm",
+                      className: "absolute -top-2 -right-2 px-1 py-0 text-[10px] leading-4",
+                      children: item.badge
+                    }
+                  )
+                ] })
+              }
+            ),
+            open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
+              /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "absolute left-full top-0 ml-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: item.children.map((child) => {
+                const childIsActive = child.href === activeHref;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactRouterDom.Link,
+                  {
+                    to: child.href,
+                    onClick: () => setOpen(false),
+                    className: cn(
+                      "flex items-center gap-2 px-3 py-2 text-sm transition-colors",
+                      childIsActive ? "bg-muted text-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                    ),
+                    children: [
+                      child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(child.icon, { className: "h-4 w-4" })),
+                      /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
+                      child.badge && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
+                    ]
+                  },
+                  child.href
+                );
+              }) })
+            ] })
+          ] });
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           reactRouterDom.Link,
           {
@@ -24571,6 +24640,78 @@ var init_DashboardLayout = __esm({
           }
         );
       }
+      if (hasChildren) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            exports.Button,
+            {
+              variant: "ghost",
+              "aria-expanded": open,
+              className: cn(
+                "flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm font-medium transition-colors",
+                isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+              ),
+              onClick: () => setOpen(!open),
+              children: [
+                item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName })),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Typography,
+                  {
+                    variant: "small",
+                    color: isActive ? "inherit" : "primary",
+                    className: "flex-1 text-left",
+                    as: "span",
+                    children: item.label
+                  }
+                ),
+                item.badge && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Icon,
+                  {
+                    name: "chevron-down",
+                    className: cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-180")
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsxRuntime.jsx(
+            exports.VStack,
+            {
+              gap: "none",
+              className: "mt-1 ml-4 pl-4 border-l border-border dark:border-border space-y-1",
+              children: item.children.map((child) => {
+                const childIsActive = child.href === activeHref;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactRouterDom.Link,
+                  {
+                    to: child.href,
+                    className: cn(
+                      "flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors",
+                      childIsActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                    ),
+                    children: [
+                      child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(child.icon, { className: "h-4 w-4" })),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        exports.Typography,
+                        {
+                          variant: "small",
+                          color: childIsActive ? "inherit" : "primary",
+                          className: "flex-1",
+                          as: "span",
+                          children: child.label
+                        }
+                      ),
+                      child.badge && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
+                    ]
+                  },
+                  child.href
+                );
+              })
+            }
+          )
+        ] });
+      }
       return /* @__PURE__ */ jsxRuntime.jsxs(
         reactRouterDom.Link,
         {
@@ -24599,9 +24740,63 @@ var init_DashboardLayout = __esm({
     NavLink.displayName = "NavLink";
     NavLinkTopnav = ({
       item,
-      currentPath
+      activeHref
     }) => {
-      const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
+      const hasChildren = !!item.children?.length;
+      const childActive = hasChildren && item.children.some((child) => child.href === activeHref);
+      const isActive = item.href === activeHref || childActive;
+      const [open, setOpen] = React79.useState(false);
+      if (hasChildren) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            exports.Button,
+            {
+              variant: "ghost",
+              "aria-expanded": open,
+              className: cn(
+                "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap",
+                isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+              ),
+              onClick: () => setOpen(!open),
+              children: [
+                item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: "h-4 w-4" })),
+                /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "inherit", className: "flex-1", as: "span", children: item.label }),
+                item.badge && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Icon,
+                  {
+                    name: "chevron-down",
+                    className: cn("h-3.5 w-3.5 shrink-0 transition-transform", open && "rotate-180")
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "absolute left-0 top-full mt-1 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: item.children.map((child) => {
+              const childIsActive = child.href === activeHref;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                reactRouterDom.Link,
+                {
+                  to: child.href,
+                  onClick: () => setOpen(false),
+                  className: cn(
+                    "flex items-center gap-2 px-3 py-2 text-sm transition-colors",
+                    childIsActive ? "bg-muted text-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                  ),
+                  children: [
+                    child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(child.icon, { className: "h-4 w-4" })),
+                    /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
+                    child.badge && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
+                  ]
+                },
+                child.href
+              );
+            }) })
+          ] })
+        ] });
+      }
       return /* @__PURE__ */ jsxRuntime.jsxs(
         reactRouterDom.Link,
         {
@@ -24621,9 +24816,9 @@ var init_DashboardLayout = __esm({
     NavLinkTopnav.displayName = "NavLinkTopnav";
     NavLinkBottom = ({
       item,
-      currentPath
+      activeHref
     }) => {
-      const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
+      const isActive = item.href === activeHref;
       const iconClassName = cn(
         "h-5 w-5",
         isActive ? "text-primary" : "text-muted-foreground"

package/dist/components/index.js

@@ -24038,6 +24038,18 @@ var init_useAuthContext = __esm({
   "hooks/useAuthContext.ts"() {
   }
 });
+function resolveActiveNavHref(items, currentPath) {
+  let best;
+  for (const item of items) {
+    for (const href of item.children?.length ? [item.href, ...item.children.map((c) => c.href)] : [item.href]) {
+      if (currentPath === href) return href;
+      if (currentPath.startsWith(href + "/") && (!best || href.length > best.length)) {
+        best = href;
+      }
+    }
+  }
+  return best;
+}
 var DashboardLayout, NavLink, NavLinkTopnav, NavLinkBottom;
 var init_DashboardLayout = __esm({
   "components/core/templates/DashboardLayout.tsx"() {
@@ -24109,6 +24121,7 @@ var init_DashboardLayout = __esm({
       const location = useLocation();
       const ctxPagePath = useCurrentPagePath();
       const activePath = (currentPath || void 0) ?? ctxPagePath ?? location.pathname;
+      const activeHref = useMemo(() => resolveActiveNavHref(navItems, activePath), [navItems, activePath]);
       const { user: authUser, signOut: authSignOut } = useAuthContext();
       const user = userProp || (authUser ? {
         name: authUser.displayName || authUser.email?.split("@")[0] || "User",
@@ -24205,7 +24218,7 @@ var init_DashboardLayout = __esm({
                         NavLink,
                         {
                           item,
-                          currentPath: activePath,
+                          activeHref,
                           compact: isRail
                         },
                         item.href
@@ -24272,7 +24285,7 @@ var init_DashboardLayout = __esm({
                                 NavLinkTopnav,
                                 {
                                   item,
-                                  currentPath: activePath
+                                  activeHref
                                 },
                                 item.href
                               ))
@@ -24448,7 +24461,7 @@ var init_DashboardLayout = __esm({
                     NavLinkBottom,
                     {
                       item,
-                      currentPath: activePath
+                      activeHref
                     },
                     item.href
                   )) })
@@ -24462,15 +24475,71 @@ var init_DashboardLayout = __esm({
     DashboardLayout.displayName = "DashboardLayout";
     NavLink = ({
       item,
-      currentPath,
+      activeHref,
       compact = false
     }) => {
-      const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
+      const hasChildren = !!item.children?.length;
+      const childActive = hasChildren && item.children.some((child) => child.href === activeHref);
+      const isActive = item.href === activeHref || childActive;
+      const [open, setOpen] = useState(childActive);
       const iconClassName = cn(
         "h-5 w-5",
         isActive ? "text-primary-foreground" : "text-muted-foreground"
       );
       if (compact) {
+        if (hasChildren) {
+          return /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                title: item.label,
+                "aria-label": item.label,
+                "aria-expanded": open,
+                className: cn(
+                  "flex items-center justify-center w-full px-2 py-2 rounded-lg transition-colors",
+                  isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                ),
+                onClick: () => setOpen(!open),
+                children: /* @__PURE__ */ jsxs(Box, { as: "span", className: "relative inline-flex", children: [
+                  item.icon ? typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsx(item.icon, { className: iconClassName }) : /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold", as: "span", children: item.label.charAt(0).toUpperCase() }),
+                  item.badge && /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: isActive ? "primary" : "default",
+                      size: "sm",
+                      className: "absolute -top-2 -right-2 px-1 py-0 text-[10px] leading-4",
+                      children: item.badge
+                    }
+                  )
+                ] })
+              }
+            ),
+            open && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
+              /* @__PURE__ */ jsx(Box, { className: "absolute left-full top-0 ml-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: item.children.map((child) => {
+                const childIsActive = child.href === activeHref;
+                return /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    to: child.href,
+                    onClick: () => setOpen(false),
+                    className: cn(
+                      "flex items-center gap-2 px-3 py-2 text-sm transition-colors",
+                      childIsActive ? "bg-muted text-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                    ),
+                    children: [
+                      child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsx(child.icon, { className: "h-4 w-4" })),
+                      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
+                      child.badge && /* @__PURE__ */ jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
+                    ]
+                  },
+                  child.href
+                );
+              }) })
+            ] })
+          ] });
+        }
         return /* @__PURE__ */ jsx(
           Link,
           {
@@ -24496,6 +24565,78 @@ var init_DashboardLayout = __esm({
           }
         );
       }
+      if (hasChildren) {
+        return /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              "aria-expanded": open,
+              className: cn(
+                "flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm font-medium transition-colors",
+                isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+              ),
+              onClick: () => setOpen(!open),
+              children: [
+                item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsx(item.icon, { className: iconClassName })),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "small",
+                    color: isActive ? "inherit" : "primary",
+                    className: "flex-1 text-left",
+                    as: "span",
+                    children: item.label
+                  }
+                ),
+                item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: "chevron-down",
+                    className: cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-180")
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsx(
+            VStack,
+            {
+              gap: "none",
+              className: "mt-1 ml-4 pl-4 border-l border-border dark:border-border space-y-1",
+              children: item.children.map((child) => {
+                const childIsActive = child.href === activeHref;
+                return /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    to: child.href,
+                    className: cn(
+                      "flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors",
+                      childIsActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                    ),
+                    children: [
+                      child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsx(child.icon, { className: "h-4 w-4" })),
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "small",
+                          color: childIsActive ? "inherit" : "primary",
+                          className: "flex-1",
+                          as: "span",
+                          children: child.label
+                        }
+                      ),
+                      child.badge && /* @__PURE__ */ jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
+                    ]
+                  },
+                  child.href
+                );
+              })
+            }
+          )
+        ] });
+      }
       return /* @__PURE__ */ jsxs(
         Link,
         {
@@ -24524,9 +24665,63 @@ var init_DashboardLayout = __esm({
     NavLink.displayName = "NavLink";
     NavLinkTopnav = ({
       item,
-      currentPath
+      activeHref
     }) => {
-      const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
+      const hasChildren = !!item.children?.length;
+      const childActive = hasChildren && item.children.some((child) => child.href === activeHref);
+      const isActive = item.href === activeHref || childActive;
+      const [open, setOpen] = useState(false);
+      if (hasChildren) {
+        return /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              "aria-expanded": open,
+              className: cn(
+                "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap",
+                isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+              ),
+              onClick: () => setOpen(!open),
+              children: [
+                item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4" })),
+                /* @__PURE__ */ jsx(Typography, { variant: "small", color: "inherit", className: "flex-1", as: "span", children: item.label }),
+                item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: "chevron-down",
+                    className: cn("h-3.5 w-3.5 shrink-0 transition-transform", open && "rotate-180")
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
+            /* @__PURE__ */ jsx(Box, { className: "absolute left-0 top-full mt-1 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: item.children.map((child) => {
+              const childIsActive = child.href === activeHref;
+              return /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  to: child.href,
+                  onClick: () => setOpen(false),
+                  className: cn(
+                    "flex items-center gap-2 px-3 py-2 text-sm transition-colors",
+                    childIsActive ? "bg-muted text-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                  ),
+                  children: [
+                    child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsx(child.icon, { className: "h-4 w-4" })),
+                    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
+                    child.badge && /* @__PURE__ */ jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
+                  ]
+                },
+                child.href
+              );
+            }) })
+          ] })
+        ] });
+      }
       return /* @__PURE__ */ jsxs(
         Link,
         {
@@ -24546,9 +24741,9 @@ var init_DashboardLayout = __esm({
     NavLinkTopnav.displayName = "NavLinkTopnav";
     NavLinkBottom = ({
       item,
-      currentPath
+      activeHref
     }) => {
-      const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
+      const isActive = item.href === activeHref;
       const iconClassName = cn(
         "h-5 w-5",
         isActive ? "text-primary" : "text-muted-foreground"