# Quickstart — 030-navbar-topo-ux

Guia curto para implementar e validar a revisão UX/UI da navbar do topo.

---

## Pré-requisitos

- Ambiente do projeto iniciado via `./start.ps1` na raiz.
- Frontend disponível em `http://localhost:5174`.
- Branch de trabalho: `030-navbar-topo-ux`.

Credenciais úteis encontradas no frontend atual:

- Admin: `admin@demo.com` / `admin1234`
- Usuário: `usuario@demo.com` / `demo1234`

---

## Superfícies de implementação

Arquivos com maior probabilidade de edição:

- `frontend/src/components/Navbar.tsx`
- `frontend/src/contexts/AuthContext.tsx`
- `frontend/src/index.css`
- Opcionalmente `frontend/src/layouts/ClientLayout.tsx` e `frontend/src/layouts/AdminLayout.tsx` se houver ajuste fino de offset/spacing

---

## Ordem recomendada de trabalho

### 1. Revisar a arquitetura local da navbar

- Mapear os grupos de links públicos, cliente e admin.
- Definir o modelo de estado único para overlays/contextos abertos.
- Garantir fechamento em clique fora, troca de rota e logout.

### 2. Ajustar a hierarquia visual desktop

- Reequilibrar logo, links primários, CTA e ações de conta.
- Limitar ruído visual e reforçar separação entre navegação pública e contextual.
- Validar truncamento do nome e destaque do CTA em ambos os temas.

### 3. Ajustar o comportamento mobile

- Garantir ordem lógica dos destinos no menu hambúrguer.
- Exibir seções `Minha Conta` e `Admin` apenas para os perfis corretos.
- Validar alvo de toque, foco e estados abertos/fechados.

### 4. Refinar logout e previsibilidade

- Conferir se logout fecha menus e retorna imediatamente ao estado visual de visitante.
- Se necessário, ajustar o comportamento atual de redirecionamento em `AuthContext.tsx` para evitar fricção visual desnecessária.

---

## Validação executável

Na pasta `frontend/`:

```bash
npm run build
```

Esse é o guardrail mínimo obrigatório antes de concluir a implementação.

---

## Checklist manual por persona

### Visitante

- Desktop: links principais legíveis, CTA `Anunciar imóvel` destacado e ação `Entrar` visível.
- Mobile: hambúrguer abre e fecha corretamente, com os mesmos destinos públicos em ordem lógica.
- Tema claro/escuro: contraste suficiente em texto, hover e estado ativo.

### Usuário autenticado

- Desktop: avatar/inicial, primeiro nome truncado e dropdown `Minha conta` funcionam.
- Dropdown: `Favoritos`, `Comparar`, `Visitas`, `Minha conta` e `Sair` fecham menu após clique.
- Mobile: seção `Minha Conta` aparece apenas quando autenticado não-admin.

### Admin

- Desktop: gatilho `Admin` visível e separado da navegação pública.
- Dropdown: atalhos admin navegam corretamente e fecham o menu.
- Mobile: seção `Admin` aparece e não conflita com outros contextos.

---

## Checklist de comportamento global

- Abrir dropdown admin fecha dropdown cliente.
- Abrir dropdown cliente fecha dropdown admin.
- Trocar de rota fecha menu mobile e dropdowns.
- Clique fora fecha o contexto aberto.
- `Tab`, `Enter` e `Espaço` funcionam nos gatilhos relevantes.
- Em 320 px, 768 px, 1024 px e 1280 px não há quebra ou sobreposição.

---

## Risco conhecido para implementação

O comportamento atual de logout em `AuthContext.tsx` usa redirecionamento forçado para `/login`. Isso é funcional, mas pode entrar em tensão com o objetivo da spec de “retornar à navbar de visitante” com mínima fricção visual. A implementação deve decidir se mantém esse fluxo por regra de produto ou se o suaviza no frontend sem alterar segurança.