Top Bar

• File: src/components/UI/Topbar.svelte

Overview

The global navigation bar rendered in src/routes/secure/+layout.svelte. It is built from @rkosafo/cai.components (Avatar, Button, Dropdown items, Modal, Tooltip, IconifyIcon) and provides:

1. Logo — Hippo logo; navigates to /secure/dashboard.
2. Nav links — generateMenu(): Dashboard, Contacts (if ViewContacts), Calendar, Ledger (if ViewLedger). Desktop inline + mobile hamburger menu.
3. QR code — opens a Modal with Top Bar QR Code.
4. User details — ContactAvatar + name; dropdown with Settings, Admin (if isAdmin), and Sign Out (onsignout → confirmed by the secure layout).
5. Action buttons — chat toggle (permission Chat, badge when there are notices), notifications bell, help link.

Behavior

• Active nav item is derived from the current route path (isActive).
• Chat toggle flips appStore.showChat, which opens the chat Drawer.
• Profile image URL is cache-busted with a timestamp.

Related

• Secure Layout
• Shared Components
• Chat