Navigation

Two native-only chrome elements: a bottom nav and a top bar. Both render only when isNative; the web keeps its sidebar.

Bottom navigation

A fixed bar with the primary destinations. Banking-app convention: 3–5 items, icon + short label, the active item in primary (Azul Ação).

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

• Icons carry meaning. “Conta” points to the wallet (baseLinks.wallet), so it uses a bank glyph (RiBankLine), not a person. A person icon reads as “profile” and misled users.
• Fixed to the bottom, reserves calc(60px + env(safe-area-inset-bottom, 0px)).
• Hidden entirely on web (if (!isNative) return null).

Top bar

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

• Logo left, slightly larger on native (h-10 vs h-8 web). Never apply a gradient to the symbol or wordmark (VELON Manual da Marca v1.0 §6.2).
• Initials avatar right, links to /app/profile. Initials derive from name → email → "US" fallback. This is a DSM candidate (InitialsAvatar).
• Bar height includes the top safe-area: calc(3.5rem + env(safe-area-inset-top)).

Role-based navigation (planned)

Nav is access control, not restriction: items are shown according to the user’s RBAC role, not hidden as a punishment. Mapping under discussion:

Drive this off the existing permissionsStore / useNavigationPermissions (UserRole + ROLE_PERMISSIONS), the same source the web sidebar already filters on, never a separate mobile list. Tracked in Velon-user#534.