@almadar/ui 6.11.0 → 6.13.0

package/dist/avl/index.cjs

@@ -29035,6 +29035,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"() {
@@ -29106,6 +29118,7 @@ var init_DashboardLayout = __esm({
       const location = reactRouterDom.useLocation();
       const ctxPagePath = providers.useCurrentPagePath();
       const activePath = (currentPath || void 0) ?? ctxPagePath ?? location.pathname;
+      const activeHref = React96.useMemo(() => resolveActiveNavHref(navItems, activePath), [navItems, activePath]);
       const { signOut: authSignOut } = useAuthContext();
       const user = userProp || (null);
       const { t } = hooks.useTranslate();
@@ -29198,7 +29211,7 @@ var init_DashboardLayout = __esm({
                         NavLink,
                         {
                           item,
-                          currentPath: activePath,
+                          activeHref,
                           compact: isRail
                         },
                         item.href
@@ -29265,7 +29278,7 @@ var init_DashboardLayout = __esm({
                                 NavLinkTopnav,
                                 {
                                   item,
-                                  currentPath: activePath
+                                  activeHref
                                 },
                                 item.href
                               ))
@@ -29441,7 +29454,7 @@ var init_DashboardLayout = __esm({
                     NavLinkBottom,
                     {
                       item,
-                      currentPath: activePath
+                      activeHref
                     },
                     item.href
                   )) })
@@ -29455,15 +29468,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] = React96.useState(childActive);
       const iconClassName = cn(
         "h-5 w-5",
         isActive ? "text-primary-foreground" : "text-muted-foreground"
       );
       if (compact) {
+        if (hasChildren) {
+          return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box, { as: "span", className: "relative inline-flex", children: [
+                  item.icon ? typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold", as: "span", children: item.label.charAt(0).toUpperCase() }),
+                  item.badge && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
+              /* @__PURE__ */ jsxRuntime.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__ */ 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(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(child.icon, { className: "h-4 w-4" })),
+                      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
+                      child.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
+                    ]
+                  },
+                  child.href
+                );
+              }) })
+            ] })
+          ] });
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           reactRouterDom.Link,
           {
@@ -29489,6 +29558,78 @@ var init_DashboardLayout = __esm({
           }
         );
       }
+      if (hasChildren) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName })),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Typography,
+                  {
+                    variant: "small",
+                    color: isActive ? "inherit" : "primary",
+                    className: "flex-1 text-left",
+                    as: "span",
+                    children: item.label
+                  }
+                ),
+                item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon,
+                  {
+                    name: "chevron-down",
+                    className: cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-180")
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsxRuntime.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__ */ 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(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(child.icon, { className: "h-4 w-4" })),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Typography,
+                        {
+                          variant: "small",
+                          color: childIsActive ? "inherit" : "primary",
+                          className: "flex-1",
+                          as: "span",
+                          children: child.label
+                        }
+                      ),
+                      child.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
+                    ]
+                  },
+                  child.href
+                );
+              })
+            }
+          )
+        ] });
+      }
       return /* @__PURE__ */ jsxRuntime.jsxs(
         reactRouterDom.Link,
         {
@@ -29517,9 +29658,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] = React96.useState(false);
+      if (hasChildren) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: "h-4 w-4" })),
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "inherit", className: "flex-1", as: "span", children: item.label }),
+                item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  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(Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
+            /* @__PURE__ */ jsxRuntime.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__ */ 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(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(child.icon, { className: "h-4 w-4" })),
+                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
+                    child.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
+                  ]
+                },
+                child.href
+              );
+            }) })
+          ] })
+        ] });
+      }
       return /* @__PURE__ */ jsxRuntime.jsxs(
         reactRouterDom.Link,
         {
@@ -29539,9 +29734,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/avl/index.js

@@ -28959,6 +28959,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"() {
@@ -29030,6 +29042,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 { signOut: authSignOut } = useAuthContext();
       const user = userProp || (null);
       const { t } = useTranslate();
@@ -29122,7 +29135,7 @@ var init_DashboardLayout = __esm({
                         NavLink,
                         {
                           item,
-                          currentPath: activePath,
+                          activeHref,
                           compact: isRail
                         },
                         item.href
@@ -29189,7 +29202,7 @@ var init_DashboardLayout = __esm({
                                 NavLinkTopnav,
                                 {
                                   item,
-                                  currentPath: activePath
+                                  activeHref
                                 },
                                 item.href
                               ))
@@ -29365,7 +29378,7 @@ var init_DashboardLayout = __esm({
                     NavLinkBottom,
                     {
                       item,
-                      currentPath: activePath
+                      activeHref
                     },
                     item.href
                   )) })
@@ -29379,15 +29392,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,
           {
@@ -29413,6 +29482,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,
         {
@@ -29441,9 +29582,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,
         {
@@ -29463,9 +29658,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"