xertica-ui 2.5.2 → 2.6.0

package/dist/{sidebar-BS1p2V7t.cjs → sidebar-BGJ0j567.cjs}

@@ -4,14 +4,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const lucideReact = require('lucide-react');
 const button = require('./button-0BlA47It.cjs');
-const XerticaXLogo = require('./XerticaXLogo-qBPhwK3g.cjs');
+const LanguageSelector = require('./LanguageSelector-1cINLJ23.cjs');
 const breadcrumb = require('./breadcrumb-BKtHF4gk.cjs');
 const dropdownMenu = require('./dropdown-menu-BMcykFDf.cjs');
 const avatar = require('./avatar-BCM7YQRC.cjs');
 const LayoutContext = require('./LayoutContext-BEq_-n98.cjs');
 const framerMotion = require('framer-motion');
 const reactI18next = require('react-i18next');
-const input = require('./input-C_UiS2Py.cjs');
+const input = require('./input-ByYuOv8A.cjs');
 const tooltip = require('./tooltip-D8n9UYoU.cjs');
 const CustomTooltipContent = require('./CustomTooltipContent-BhdIeBEg.cjs');
 
@@ -69,8 +69,8 @@ function Header({
           breadcrumbSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: breadcrumbSlot })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 shrink-0 ml-4", children: [
-          showLanguageSelector && /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.LanguageSelector, { variant: "minimal", showIcon: false, className: "hidden sm:flex" }),
-          showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.ThemeToggle, { className: "hover:bg-accent" }),
+          showLanguageSelector && /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector.LanguageSelector, { variant: "minimal", showIcon: false, className: "hidden sm:flex" }),
+          showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector.ThemeToggle, { className: "hover:bg-accent" }),
           actions?.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
             button.Button,
             {
@@ -236,7 +236,87 @@ function SidebarHeader({
         children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-5 h-5" })
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center h-10 justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: expanded ? logo || /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.XerticaLogo, { className: "h-5 w-auto", variant: "white" }) : logoCollapsed || /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.XerticaXLogo, { className: "h-5 w-auto", variant: "white" }) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center h-10 justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: expanded ? logo || /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector.XerticaLogo, { className: "h-5 w-auto", variant: "white" }) : logoCollapsed || /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector.XerticaXLogo, { className: "h-5 w-auto", variant: "white" }) }) }) })
+  ] });
+}
+function OverflowGroupsAccordion({
+  expanded,
+  overflowGroups,
+  location,
+  handleNavigate,
+  moreOptionsLabel,
+  onOpenChange
+}) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggle = () => {
+    const next = !isOpen;
+    setIsOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: toggle,
+        className: button.cn(
+          "w-full h-10 flex items-center rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground",
+          expanded ? "gap-3 px-3 justify-start" : "justify-center px-0"
+        ),
+        "aria-expanded": isOpen,
+        "aria-label": moreOptionsLabel,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5 flex-shrink-0" }),
+          expanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1 text-sidebar-foreground text-left", children: moreOptionsLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronRight,
+              {
+                className: button.cn("w-4 h-4 flex-shrink-0 transition-transform duration-200", isOpen && "rotate-90")
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.2 },
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 space-y-3", children: overflowGroups.map((group) => {
+          const GroupIcon = group.icon;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            (group.label || GroupIcon) && expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 mb-1 flex items-center gap-2", children: [
+              GroupIcon && (React.isValidElement(GroupIcon) ? GroupIcon : /* @__PURE__ */ jsxRuntime.jsx(GroupIcon, { className: "h-3 w-3 text-sidebar-foreground/60" })),
+              group.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-sidebar-foreground/60", children: group.label })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: group.items.map((item) => {
+              const Icon = item.icon;
+              const isActive = location.pathname === item.path || location.pathname.startsWith(item.path + "/");
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleNavigate(item.path),
+                  className: button.cn(
+                    "w-full h-9 flex items-center gap-2.5 rounded-[var(--radius-button)] transition-all duration-200 text-left text-sm",
+                    expanded ? "px-3" : "justify-center px-0",
+                    isActive ? "bg-sidebar-foreground/15 text-sidebar-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground"
+                  ),
+                  children: [
+                    Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4 flex-shrink-0" }),
+                    expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+                  ]
+                },
+                item.path
+              );
+            }) })
+          ] }, group.id);
+        }) })
+      }
+    ) })
   ] });
 }
 function SidebarNav({
@@ -244,13 +324,29 @@ function SidebarNav({
   routes = [],
   variant = "default"
 }) {
-  const { expanded, navigate, location, onToggle } = useSidebarContext();
+  const { expanded, isMobileViewport, navigate, location, onToggle } = useSidebarContext();
   const { t } = reactI18next.useTranslation();
   const navRef = React.useRef(null);
   const [localActiveItem, setLocalActiveItem] = React.useState(null);
   const [hasOverflow, setHasOverflow] = React.useState(false);
   const [visibleItems, setVisibleItems] = React.useState([]);
   const [overflowItems, setOverflowItems] = React.useState([]);
+  const [openSubmenus, setOpenSubmenus] = React.useState(/* @__PURE__ */ new Set());
+  const [hasGroupOverflow, setHasGroupOverflow] = React.useState(false);
+  const [visibleGroups, setVisibleGroups] = React.useState([]);
+  const [overflowGroups, setOverflowGroups] = React.useState([]);
+  const [isOverflowAccordionOpen, setIsOverflowAccordionOpen] = React.useState(false);
+  const toggleSubmenu = (path) => {
+    setOpenSubmenus((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
   const labelTranslations = React.useMemo(
     () => ({
       home: "Início",
@@ -290,6 +386,45 @@ function SidebarNav({
     window.addEventListener("resize", checkOverflow);
     return () => window.removeEventListener("resize", checkOverflow);
   }, [navigationItems.length, variant]);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (variant === "assistant") return;
+    if (!navigationGroups || navigationGroups.length === 0) return;
+    const checkGroupOverflow = () => {
+      if (!navRef.current) return;
+      const containerHeight = navRef.current.clientHeight;
+      const itemHeight = 40;
+      const groupHeaderHeight = 32;
+      const groupSpacing = 12;
+      const moreButtonHeight = 44;
+      const padding = 32;
+      let currentHeight = padding;
+      let visibleCount = 0;
+      for (let i = 0; i < navigationGroups.length; i++) {
+        const group = navigationGroups[i];
+        let groupHeight = 0;
+        if (group.label) groupHeight += groupHeaderHeight;
+        groupHeight += group.items.length * itemHeight;
+        if (i > 0) groupHeight += groupSpacing;
+        const wouldExceed = currentHeight + groupHeight + (visibleCount < navigationGroups.length - 1 ? moreButtonHeight : 0) > containerHeight;
+        if (wouldExceed && visibleCount > 0) break;
+        currentHeight += groupHeight;
+        visibleCount++;
+      }
+      if (visibleCount < navigationGroups.length) {
+        setHasGroupOverflow(true);
+        setVisibleGroups(navigationGroups.slice(0, visibleCount));
+        setOverflowGroups(navigationGroups.slice(visibleCount));
+      } else {
+        setHasGroupOverflow(false);
+        setVisibleGroups(navigationGroups);
+        setOverflowGroups([]);
+      }
+    };
+    checkGroupOverflow();
+    window.addEventListener("resize", checkGroupOverflow);
+    return () => window.removeEventListener("resize", checkGroupOverflow);
+  }, [navigationGroups, expanded, variant]);
   const handleNavigate = (path) => {
     setLocalActiveItem(path);
     navigate(path);
@@ -377,6 +512,80 @@ function SidebarNav({
         /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: item.label }) })
       ] }, item.path);
     }
+    if (isMobileViewport && hasChildren) {
+      const isOpen = openSubmenus.has(item.path);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: button.cn(
+              "group/item flex items-center w-full h-10 rounded-[var(--radius-button)] transition-all duration-200",
+              activeClass
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleNavigate(item.path),
+                  className: "flex items-center gap-3 px-3 flex-1 h-full min-w-0 text-left",
+                  children: [
+                    Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-5 h-5 flex-shrink-0" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: item.label })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    toggleSubmenu(item.path);
+                  },
+                  className: "h-full px-2 pr-2.5 flex items-center justify-center text-sidebar-foreground/40 hover:text-sidebar-foreground transition-colors",
+                  "aria-label": t("sidebar.submenu", { label: item.label }),
+                  "aria-expanded": isOpen,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.ChevronRight,
+                    {
+                      className: button.cn("w-4 h-4 transition-transform duration-200", isOpen && "rotate-90")
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.2 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 mt-0.5 mb-0.5 space-y-0.5", children: item.children.map((child) => {
+              const ChildIcon = child.icon;
+              const isChildActive = location.pathname === child.path || location.pathname.startsWith(child.path + "/");
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleNavigate(child.path),
+                  className: button.cn(
+                    "w-full h-9 flex items-center gap-2.5 px-3 rounded-[var(--radius-button)] transition-all duration-200 text-left",
+                    isChildActive ? "bg-sidebar-foreground/15 text-sidebar-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground"
+                  ),
+                  children: [
+                    ChildIcon && /* @__PURE__ */ jsxRuntime.jsx(ChildIcon, { className: "h-4 w-4 flex-shrink-0" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm", children: child.label })
+                  ]
+                },
+                child.path
+              );
+            }) })
+          }
+        ) })
+      ] }, item.path);
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -509,7 +718,85 @@ function SidebarNav({
     ] }, group.id);
   };
   if (variant === "assistant") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(input.ScrollArea, { className: "h-full px-4", children: navigationGroups.map((group) => renderAssistantGroup(group)) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "h-full px-4",
+        style: { overflowY: "auto", overflowX: "hidden" },
+        children: navigationGroups.map((group) => renderAssistantGroup(group))
+      }
+    ) });
+  }
+  if (isMobileViewport && isOverflowAccordionOpen) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "h-full",
+        style: { overflowY: "auto", overflowX: "hidden" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "nav",
+          {
+            id: "sidebar-nav",
+            "aria-label": t("sidebar.mainNavigation"),
+            className: "px-4 py-4",
+            ref: navRef,
+            children: navigationGroups && navigationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+              (hasGroupOverflow ? visibleGroups : navigationGroups).map((group) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderDefaultGroup(group) }, group.id)),
+              hasGroupOverflow && /* @__PURE__ */ jsxRuntime.jsx(
+                OverflowGroupsAccordion,
+                {
+                  expanded,
+                  overflowGroups,
+                  location,
+                  handleNavigate,
+                  moreOptionsLabel: t("sidebar.moreOptions"),
+                  onOpenChange: setIsOverflowAccordionOpen
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              (hasOverflow ? visibleItems : navigationItems).map((item) => renderDefaultItem(item)),
+              hasOverflow && /* @__PURE__ */ jsxRuntime.jsxs(input.Popover, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(input.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    className: expanded ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground" : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground",
+                    "aria-label": t("sidebar.moreOptions"),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5 flex-shrink-0" }),
+                      expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sidebar-foreground", children: t("sidebar.moreOptions") })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  input.PopoverContent,
+                  {
+                    side: "right",
+                    align: "start",
+                    className: "w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg",
+                    sideOffset: 8,
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: overflowItems.map((item) => {
+                      const Icon = item.icon;
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          onClick: () => handleNavigate(item.path),
+                          className: "w-full h-9 flex items-center gap-2 px-3 rounded-[var(--radius-button)] transition-all duration-200 text-popover-foreground/80 hover:bg-accent hover:text-accent-foreground text-left",
+                          children: [
+                            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4 flex-shrink-0" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+                          ]
+                        },
+                        item.path
+                      );
+                    }) })
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      }
+    ) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
@@ -518,7 +805,75 @@ function SidebarNav({
       "aria-label": t("sidebar.mainNavigation"),
       className: "h-full px-4 py-4 overflow-hidden",
       ref: navRef,
-      children: navigationGroups && navigationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: navigationGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderDefaultGroup(group) }, group.id)) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+      children: navigationGroups && navigationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        (hasGroupOverflow ? visibleGroups : navigationGroups).map((group) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderDefaultGroup(group) }, group.id)),
+        hasGroupOverflow && (isMobileViewport ? (
+          // Mobile: accordion inline abre abaixo, igual aos subitens
+          /* @__PURE__ */ jsxRuntime.jsx(
+            OverflowGroupsAccordion,
+            {
+              expanded,
+              overflowGroups,
+              location,
+              handleNavigate,
+              moreOptionsLabel: t("sidebar.moreOptions"),
+              onOpenChange: setIsOverflowAccordionOpen
+            }
+          )
+        ) : (
+          // Desktop: popover lateral direito
+          /* @__PURE__ */ jsxRuntime.jsxs(input.Popover, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(input.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                className: expanded ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground" : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground",
+                "aria-label": t("sidebar.moreOptions"),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5 flex-shrink-0" }),
+                  expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sidebar-foreground", children: t("sidebar.moreOptions") })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              input.PopoverContent,
+              {
+                side: "right",
+                align: "start",
+                className: "w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg",
+                sideOffset: 8,
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: overflowGroups.map((group) => {
+                  const GroupIcon = group.icon;
+                  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    (group.label || GroupIcon) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 mb-1 flex items-center gap-2", children: [
+                      GroupIcon && (React.isValidElement(GroupIcon) ? GroupIcon : /* @__PURE__ */ jsxRuntime.jsx(GroupIcon, { className: "h-3 w-3 text-popover-foreground/60" })),
+                      group.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-popover-foreground/60", children: group.label })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.items.map((item) => {
+                      const Icon = item.icon;
+                      const isActive = location.pathname === item.path || location.pathname.startsWith(item.path + "/");
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          onClick: () => handleNavigate(item.path),
+                          className: button.cn(
+                            "w-full h-9 flex items-center gap-2 px-2 rounded-[var(--radius-button)] transition-all duration-200 text-left text-sm",
+                            isActive ? "bg-accent text-accent-foreground font-medium" : "text-popover-foreground/80 hover:bg-accent hover:text-accent-foreground"
+                          ),
+                          children: [
+                            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4 flex-shrink-0" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+                          ]
+                        },
+                        item.path
+                      );
+                    }) })
+                  ] }, group.id);
+                }) })
+              }
+            )
+          ] })
+        ))
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
         (hasOverflow ? visibleItems : navigationItems).map((item) => renderDefaultItem(item)),
         hasOverflow && /* @__PURE__ */ jsxRuntime.jsxs(input.Popover, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(input.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -622,7 +977,10 @@ function SidebarSearch({
             onClick: () => fixedArea.onClick?.(),
             className: "h-10 w-10 flex items-center justify-center rounded-[var(--radius-button)] bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 transition-all",
             "aria-label": t("assistant.newConversation"),
-            children: React.isValidElement(fixedArea.icon) ? fixedArea.icon : /* @__PURE__ */ jsxRuntime.jsx(fixedArea.icon, { className: "h-5 w-5" })
+            children: React.isValidElement(fixedArea.icon) ? fixedArea.icon : (() => {
+              const FixedAreaIcon = fixedArea.icon;
+              return /* @__PURE__ */ jsxRuntime.jsx(FixedAreaIcon, { className: "h-5 w-5" });
+            })()
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", children: t("assistant.newConversation") })