sass-imobiliaria/.specify/features/013-header-only-nav/spec.md

2.9 KiB

Feature Specification: Navegação Unificada no Header (remoção do Sidebar)

Feature Branch: 013-header-only-nav Created: 2026-04-14 Status: In Progress

Contexto

Atualmente o painel admin (AdminLayout) e a área do cliente (ClientLayout) possuem sidebars verticais com os itens de navegação. O layout com sidebar ocupa espaço horizontal desnecessário e fragmenta a navegação entre header e sidebar. Esta feature remove os sidebars de ambos os layouts e move todos os itens de navegação para o Navbar (header fixo) através de dropdowns, mantendo a experiência consistente e o layout de tela cheia para o conteúdo principal.

Estado atual

  • AdminLayout.tsx: sidebar com 7 itens (Imóveis, Clientes, Boletos, Visitas, Favoritos, Cidades, Amenidades) + Navbar
  • ClientLayout.tsx: sidebar com 5 itens (Painel, Favoritos, Comparar, Visitas, Boletos) + link admin + Navbar
  • Navbar.tsx: links públicos + botão "Painel Admin" único sem dropdown

User Stories

US1 — Admin sem sidebar (P1)

Given admin autenticado acessando qualquer rota /admin/*, When visualiza o header, Then vê um dropdown "Admin ▾" com todos os 7 itens de navegação admin, sem sidebar lateral.

US2 — Área do cliente sem sidebar (P1)

Given cliente autenticado acessando qualquer rota /area-do-cliente/*, When visualiza o header, Then vê um dropdown "Minha Conta ▾" com todos os 5 itens de navegação da área do cliente, sem sidebar lateral.

US3 — Conteúdo usa 100% da largura (P1)

Given qualquer rota admin ou cliente, When sidebar é removido, Then o main content ocupa 100% da largura disponível (sem w-56 reservado para sidebar).

US4 — Dropdown fecha ao clicar fora (P2)

Given dropdown aberto no header, When usuário clica fora do dropdown, Then dropdown fecha automaticamente.

US5 — Navegação mobile (P1)

Given usuário em dispositivo mobile, When abre o menu hamburger, Then vê todos os itens admin ou cliente no menu mobile expandido.

US6 — Item ativo destacado no dropdown (P2)

Given usuário em rota ativa (ex: /admin/clientes), When abre o dropdown admin, Then o item correspondente aparece destacado visualmente.

Acceptance Criteria

  • AdminLayout.tsx: remover <aside> sidebar, remover estrutura pt-14/flex redundante, main ocupa 100% da largura
  • ClientLayout.tsx: remover <aside> sidebar, remover mobile nav bar extra, main ocupa 100% da largura
  • Navbar.tsx: adicionar dropdown "Admin ▾" visível apenas para isAdmin, com os 7 itens do admin
  • Navbar.tsx: adicionar dropdown "Minha Conta ▾" visível apenas para isAuthenticated e não-admin, com os 5 itens do cliente
  • Dropdown fecha ao clicar fora (useEffect + ref ou onBlur)
  • Sem dependências externas novas (apenas React + react-router-dom + Tailwind já utilizados)
  • Mobile: itens de dropdown aparecem expandidos no menu hamburger