feat(nav): menu em acordeão — cada grupo abre/fecha independente

Pedido do usuário: "usar o modelo de arcordeon no menu para que eu
poder reocler cada sub menu" — os 6 grupos com sub-itens (Discador,
Call Center, Telefonia, IA, Relatórios, Administração) ficavam sempre
todos abertos ao mesmo tempo, sem jeito de recolher.

NavList (compartilhado entre sidebar desktop, drawer mobile, Platform e
Tenant) ganhou estado de abrir/fechar por seção — não é exclusivo
(abrir um grupo não fecha os outros). Chevron gira 180° indicando
estado; aria-expanded no botão do cabeçalho. Default: só o grupo que
contém a rota atual começa aberto, os demais começam fechados —
resolve "menu cheio demais" sem esconder onde o usuário está agora.
Estado é local (não persiste num F5 de propósito, mas sobrevive à
navegação entre páginas normalmente, já que o layout não remonta em
troca de rota client-side).

Testado com Playwright de verdade: seção sem rota ativa começa
aria-expanded="false", clicar abre, clicar de novo fecha.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BFaBaBSQGhyXGEgtTYZGV8

apps/frontend/src/components/shell/nav-list.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { NavSection } from "./nav-types";
 
@@ -12,6 +14,25 @@ import type { NavSection } from "./nav-types";
 export function NavList({ items, collapsed = false, onNavigate }: { items: NavSection[]; collapsed?: boolean; onNavigate?: () => void }) {
   const pathname = usePathname();
 
+  // Acordeão (pedido do usuário: "poder recolher cada sub menu") — cada
+  // grupo abre/fecha independente dos outros, não é exclusivo (abrir um
+  // não fecha os demais). Default: só o grupo com a rota atual começa
+  // aberto — os outros começam fechados, já que a lista completa de
+  // grupos nunca cabe sem rolar. Estado local (não persiste num F5 de
+  // propósito: sobrevive normalmente à navegação entre páginas, porque o
+  // layout que contém a sidebar não remonta em troca de rota client-side).
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(
+      items
+        .filter((s) => s.children)
+        .map((s) => [s.label, s.children!.some((leaf) => leaf.href && pathname.startsWith(leaf.href))]),
+    ),
+  );
+
+  function toggleSection(label: string) {
+    setOpenSections((prev) => ({ ...prev, [label]: !prev[label] }));
+  }
+
   return (
     <ul className="space-y-0.5">
       {items.map((section) => {
@@ -60,19 +81,28 @@ export function NavList({ items, collapsed = false, onNavigate }: { items: NavSe
         }
 
         const sectionHasActiveChild = section.children?.some((leaf) => leaf.href && pathname.startsWith(leaf.href));
+        const isOpen = collapsed || (openSections[section.label] ?? false);
 
         return (
           <li key={section.label} className="pt-2">
-            <div
+            <button
+              type="button"
+              onClick={() => toggleSection(section.label)}
+              aria-expanded={isOpen}
               className={cn(
-                "flex items-center gap-3 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide",
+                "flex w-full items-center gap-3 rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors hover:bg-muted",
                 sectionHasActiveChild ? "text-foreground" : "text-muted-foreground/70",
               )}
             >
               <Icon className="h-4 w-4 shrink-0" aria-hidden />
-              {!collapsed && <span>{section.label}</span>}
-            </div>
-            {!collapsed && section.children && (
+              {!collapsed && (
+                <>
+                  <span className="flex-1 text-left">{section.label}</span>
+                  <ChevronDown className={cn("h-3.5 w-3.5 shrink-0 transition-transform", isOpen ? "rotate-180" : "")} aria-hidden />
+                </>
+              )}
+            </button>
+            {!collapsed && isOpen && section.children && (
               <ul className="ml-[26px] space-y-0.5 border-l border-border pl-3">
                 {section.children.map((leaf) => {
                   const leafActive = leaf.href && pathname.startsWith(leaf.href);