Navegação

Dois elementos de chrome exclusivos do nativo: uma bottom nav e uma top bar. Ambos renderizam apenas quando isNative; a web mantém sua sidebar.

Bottom navigation

Uma barra fixa com os destinos principais. Convenção de app bancário: 3 a 5 itens, ícone + label curto, o item ativo em primary (Azul Ação).

┌─────────────────────────────┐
│   ⌂        ⟳         ▤       │
│  Home   History    Conta    │   active = primary, rest = gray
└─────────────────────────────┘

• Ícones carregam significado. “Conta” aponta para a carteira (baseLinks.wallet), então usa um glyph de banco (RiBankLine), não de pessoa. Um ícone de pessoa é lido como “perfil” e confundia os usuários.
• Fixa na parte de baixo, reserva calc(60px + env(safe-area-inset-bottom, 0px)).
• Oculta por completo na web (if (!isNative) return null).

Top bar

┌─────────────────────────────┐
│ [ Velon logo ]      ( DL ) │
└─────────────────────────────┘
   larger on native      initials avatar → /app/profile

• Logo à esquerda, um pouco maior no nativo (h-10 vs h-8 na web). Nunca aplique um gradiente ao símbolo ou ao wordmark (VELON Manual da Marca v1.0 §6.2).
• Avatar com iniciais à direita, leva para /app/profile. As iniciais derivam do nome → email → fallback "US". Este é um candidato a DSM (InitialsAvatar).
• A altura da barra inclui a safe-area de cima: calc(3.5rem + env(safe-area-inset-top)).

Navegação baseada em papéis (planejada)

A nav é controle de acesso, não restrição: os itens são exibidos de acordo com o papel RBAC do usuário, não ocultados como punição. Mapeamento em discussão:

Conduza isso a partir do permissionsStore / useNavigationPermissions existente (UserRole + ROLE_PERMISSIONS), a mesma fonte que a sidebar web já filtra, nunca uma lista mobile separada. Acompanhado em velon-app#534.