xertica-ui 2.5.0 → 2.5.2

package/components/layout/sidebar/sidebar.tsx

@@ -321,6 +321,120 @@ function SidebarHeader({
   );
 }
 
+/**
+ * Accordion inline para "mais opções" no mobile.
+ * Abre abaixo do botão, igual ao padrão dos subitens mobile.
+ */
+function OverflowGroupsAccordion({
+  expanded,
+  overflowGroups,
+  location,
+  handleNavigate,
+  moreOptionsLabel,
+  onOpenChange,
+}: {
+  expanded: boolean;
+  overflowGroups: RouteGroup[];
+  location: { pathname: string };
+  handleNavigate: (path: string) => void;
+  moreOptionsLabel: string;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => {
+    const next = !isOpen;
+    setIsOpen(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <div>
+      <button
+        onClick={toggle}
+        className={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}
+      >
+        <MoreVertical className="w-5 h-5 flex-shrink-0" />
+        {expanded && (
+          <>
+            <span className="truncate flex-1 text-sidebar-foreground text-left">
+              {moreOptionsLabel}
+            </span>
+            <ChevronRight
+              className={cn('w-4 h-4 flex-shrink-0 transition-transform duration-200', isOpen && 'rotate-90')}
+            />
+          </>
+        )}
+      </button>
+      <AnimatePresence initial={false}>
+        {isOpen && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="mt-1 space-y-3">
+              {overflowGroups.map(group => {
+                const GroupIcon = group.icon;
+                return (
+                  <div key={group.id}>
+                    {(group.label || GroupIcon) && expanded && (
+                      <div className="px-3 mb-1 flex items-center gap-2">
+                        {GroupIcon &&
+                          (React.isValidElement(GroupIcon) ? (
+                            GroupIcon
+                          ) : (
+                            <GroupIcon className="h-3 w-3 text-sidebar-foreground/60" />
+                          ))}
+                        {group.label && (
+                          <span className="text-xs font-semibold uppercase tracking-wider text-sidebar-foreground/60">
+                            {group.label}
+                          </span>
+                        )}
+                      </div>
+                    )}
+                    <div className="space-y-0.5">
+                      {group.items.map(item => {
+                        const Icon = item.icon;
+                        const isActive =
+                          location.pathname === item.path ||
+                          location.pathname.startsWith(item.path + '/');
+                        return (
+                          <button
+                            key={item.path}
+                            onClick={() => handleNavigate(item.path)}
+                            className={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'
+                            )}
+                          >
+                            {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
+                            {expanded && <span className="truncate">{item.label}</span>}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
 /**
  * Navigation area for the Sidebar (default variant).
  * Renders grouped or flat navigation items with overflow handling.
@@ -342,6 +456,10 @@ function SidebarNav({
   const [visibleItems, setVisibleItems] = useState<NavigationItem[]>([]);
   const [overflowItems, setOverflowItems] = useState<NavigationItem[]>([]);
   const [openSubmenus, setOpenSubmenus] = useState<Set<string>>(new Set());
+  const [hasGroupOverflow, setHasGroupOverflow] = useState(false);
+  const [visibleGroups, setVisibleGroups] = useState<RouteGroup[]>([]);
+  const [overflowGroups, setOverflowGroups] = useState<RouteGroup[]>([]);
+  const [isOverflowAccordionOpen, setIsOverflowAccordionOpen] = useState(false);
 
   const toggleSubmenu = (path: string) => {
     setOpenSubmenus(prev => {
@@ -398,6 +516,57 @@ function SidebarNav({
     return () => window.removeEventListener('resize', checkOverflow);
   }, [navigationItems.length, variant]);
 
+  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: string) => {
     setLocalActiveItem(path);
     navigate(path);
@@ -764,6 +933,86 @@ function SidebarNav({
     );
   }
 
+  if (isMobileViewport && isOverflowAccordionOpen) {
+    return (
+      <div className="flex-1 min-h-0 overflow-hidden">
+        <ScrollArea className="h-full">
+          <nav
+            id="sidebar-nav"
+            aria-label={t('sidebar.mainNavigation')}
+            className="px-4 py-4"
+            ref={navRef}
+          >
+            {navigationGroups && navigationGroups.length > 0 ? (
+              <div className="space-y-3">
+                {(hasGroupOverflow ? visibleGroups : navigationGroups).map(group => (
+                  <React.Fragment key={group.id}>{renderDefaultGroup(group)}</React.Fragment>
+                ))}
+                {hasGroupOverflow && (
+                  <OverflowGroupsAccordion
+                    expanded={expanded}
+                    overflowGroups={overflowGroups}
+                    location={location}
+                    handleNavigate={handleNavigate}
+                    moreOptionsLabel={t('sidebar.moreOptions')}
+                    onOpenChange={setIsOverflowAccordionOpen}
+                  />
+                )}
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {(hasOverflow ? visibleItems : navigationItems).map(item => renderDefaultItem(item))}
+                {hasOverflow && (
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <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')}
+                      >
+                        <MoreVertical className="w-5 h-5 flex-shrink-0" />
+                        {expanded && (
+                          <span className="truncate text-sidebar-foreground">
+                            {t('sidebar.moreOptions')}
+                          </span>
+                        )}
+                      </button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                      side="right"
+                      align="start"
+                      className="w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg"
+                      sideOffset={8}
+                    >
+                      <div className="space-y-1">
+                        {overflowItems.map(item => {
+                          const Icon = item.icon;
+                          return (
+                            <button
+                              key={item.path}
+                              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"
+                            >
+                              {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
+                              <span className="truncate">{item.label}</span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                )}
+              </div>
+            )}
+          </nav>
+        </ScrollArea>
+      </div>
+    );
+  }
+
   return (
     <div className="flex-1 min-h-0 overflow-hidden">
       <nav
@@ -774,9 +1023,97 @@ function SidebarNav({
       >
         {navigationGroups && navigationGroups.length > 0 ? (
           <div className="space-y-3">
-            {navigationGroups.map(group => (
+            {(hasGroupOverflow ? visibleGroups : navigationGroups).map(group => (
               <React.Fragment key={group.id}>{renderDefaultGroup(group)}</React.Fragment>
             ))}
+            {hasGroupOverflow && (
+              isMobileViewport ? (
+                // Mobile: accordion inline abre abaixo, igual aos subitens
+                <OverflowGroupsAccordion
+                  expanded={expanded}
+                  overflowGroups={overflowGroups}
+                  location={location}
+                  handleNavigate={handleNavigate}
+                  moreOptionsLabel={t('sidebar.moreOptions')}
+                  onOpenChange={setIsOverflowAccordionOpen}
+                />
+              ) : (
+                // Desktop: popover lateral direito
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <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')}
+                    >
+                      <MoreVertical className="w-5 h-5 flex-shrink-0" />
+                      {expanded && (
+                        <span className="truncate text-sidebar-foreground">
+                          {t('sidebar.moreOptions')}
+                        </span>
+                      )}
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    side="right"
+                    align="start"
+                    className="w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg"
+                    sideOffset={8}
+                  >
+                    <div className="space-y-3">
+                      {overflowGroups.map(group => {
+                        const GroupIcon = group.icon;
+                        return (
+                          <div key={group.id}>
+                            {(group.label || GroupIcon) && (
+                              <div className="px-2 mb-1 flex items-center gap-2">
+                                {GroupIcon &&
+                                  (React.isValidElement(GroupIcon) ? (
+                                    GroupIcon
+                                  ) : (
+                                    <GroupIcon className="h-3 w-3 text-popover-foreground/60" />
+                                  ))}
+                                {group.label && (
+                                  <span className="text-xs font-semibold uppercase tracking-wider text-popover-foreground/60">
+                                    {group.label}
+                                  </span>
+                                )}
+                              </div>
+                            )}
+                            <div className="space-y-1">
+                              {group.items.map(item => {
+                                const Icon = item.icon;
+                                const isActive =
+                                  location.pathname === item.path ||
+                                  location.pathname.startsWith(item.path + '/');
+                                return (
+                                  <button
+                                    key={item.path}
+                                    onClick={() => handleNavigate(item.path)}
+                                    className={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'
+                                    )}
+                                  >
+                                    {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
+                                    <span className="truncate">{item.label}</span>
+                                  </button>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              )
+            )}
           </div>
         ) : (
           <div className="space-y-1">