Navigation Bar

• File: src/components/topBar.svelte

Overview

The Navigation Bar (implemented by TopBar) is the primary navigation chrome of the app, rendered once in pages/private/_layout.svelte. It is divided into four parts:

1. Logo Section — the Hippo logo on the left; clicking navigates to the dashboard.
2. Nav Links Section — the main navigation links (Dashboard, Contacts, Calendar, Ledger), generated by generateMenu() and gated by permissions. Renders inline on desktop and behind a hamburger menu on mobile.
3. User Details Section — the user's profile picture/initials and name. Clicking the profile opens a dropdown: Settings, Admin (if the user is an admin), and Sign Out (with a SimpleAlert confirmation).
4. Action Buttons Section — quick access to chat (toggles the chat panel, shows a badge when there are notices), notifications (bell), the QR code modal, and a help link.

Key behaviors

• Dark blue navbar (#2d4e8c), responsive: desktop inline links + mobile hamburger menu.
• Nav links are permission-gated: Contacts (Permissions.viewContacts), Ledger (Permissions.viewLedger); active state via Routify $isActive.
• Chat button toggles $showChat (store) and shows a badge when $notices.length > 0.
• QR button opens a Modal containing Top Bar QR Code.

Related

• Action Buttons
• Add Nav Links
• Chat Panel
• Top Bar