Overview

• File: src/components/topBar.svelte

The TopBar component is the main navigation header for the HVC Web application. It provides essential navigation, user profile management, and system features access.

Component Features

Imports

// Routing
import { isActive, goto } from "@roxi/routify";

// Icons
import { Icon } from "@steeze-ui/svelte-icon";
import { ChevronDown, Logout, Bell, /* ... */ } from "@steeze-ui/heroicons";

// State Management
import { writable } from "svelte/store";
import { tenantInfo, notices, showChat /* ... */ } from "../stores/shared";

// Services
import { userInfo, logout } from "../lib/services/keycloak";
import { Permissions, hasPermission } from "../lib/services/permissions";

Core Features

1. Navigation Menu

// Dynamic menu generation based on permissions
function* generateMenu(_) {
  yield { text: "Dashboard", url: "/private/dashboard" };
  if (hasPermission(Permissions.viewContacts))
    yield { text: "Contacts", url: "/private/contacts" };
  yield { text: "Calendar", url: "/private/calendar" };
  if (hasPermission(Permissions.viewLedger))
    yield { text: "Ledger", url: "/private/ledger" };
}

• Dynamic menu generation based on user permissions
• Responsive design with mobile menu support
• Active route highlighting
• Permission-based menu items

2. User Profile Section

$: profileImageUrl = user?.profileImageUrl
  ? `${user.profileImageUrl}?${changeCount}`
  : null;

• User avatar display
• Online/offline status indication
• Profile image handling with cache busting
• Dropdown menu for user actions

State Management

Props

export let online = writable(true);  // Online status
export let status = "Online";        // Status text

Stores

import {
  tenantInfo,
  notices,
  showChat,
  forceLogout,
  showSelectedUsers,
  showDetailsPanel,
  showPendingDetailsPanel,
} from "../stores/shared";

Local State

let showMainMenu = false;    // Mobile menu visibility
let showMenu = false;        // Profile dropdown visibility
let showLogoutModal = false; // Logout confirmation
let showModal = false;       // QR code modal
let qrCodeUrl;              // QR code data

Reactive Statements

$: user = $userInfo;
$: menuItems = [...generateMenu(user)];
$: navigateTo = $homePage || "/private/dashboard";

UI Components

1. Main Navigation Bar

<nav class="bg-[#2d4e8c] shadow-lg mx-auto">
  <!-- Logo -->
  <div class="flex-shrink-0 flex items-center">
    <img src={logoUrl} alt="logo" />
  </div>
  
  <!-- Menu Items -->
  <div class="hidden sm:ml-6 sm:flex sm:space-x-0">
    {#each menuItems as menuItem}
      <a href={menuItem.url}>{menuItem.text}</a>
    {/each}
  </div>
</nav>

2. User Actions

<!-- Profile Section -->
<div class="avatar placeholder" class:online={$online}>
  <img src={profileImageUrl} alt="" />
</div>

<!-- Action Icons -->
<div class="flex items-center">
  <Icon src={ChatAlt2} /> <!-- Chat -->
  <Icon src={Bell} />     <!-- Notifications -->
  <Icon src={Qrcode} />   <!-- QR Code -->
</div>

3. User Profile Dropdown

<div class="dropdown dropdown-end" class:dropdown-open={showMenu}>
  <!-- Profile menu items -->
</div>

Styling

CSS Classes

.active-menu {
  @apply border-[#ce5097] text-white bg-[#23407c] border-b-2;
}

.menu-item {
  @apply border-transparent text-gray-500 hover:bg-gray-50 
         hover:border-gray-300 hover:text-gray-700;
}

Theme Colors

• Primary: #2d4e8c (Navigation background)
• Accent: #ce5097 (Active menu indicator)
• Text: White/Gray scale for different states

Functions

Navigation

function goHome() {
  $goto("/private/dashboard");
}

function redirectAndLogout() {
  $goto(navigateTo);
  $forceLogout = true;
}

UI Interactions

function toggleChat() {
  $showChat = !$showChat;
}

function toggleMenu() {
  showMainMenu = !showMainMenu;
}

function initLogout() {
  showMenu = false;
  showLogoutModal = true;
}

Events & Actions

Click Handlers

• Outside click detection for dropdowns
• Menu item navigation
• Modal triggers
• Chat toggle

Custom Actions

use:tip={{ content: "Generate QR Code" }}
use:clickOutside

Permission System

Available Permissions

Permissions.viewContacts  // Access contacts page
Permissions.viewLedger   // Access ledger page
Permissions.canChat      // Access chat feature

Usage

if (hasPermission(Permissions.viewContacts)) {
  // Show contacts menu item
}

Modals & Dialogs

1. Logout Modal

This makes uses of the SimpleAlert component

<Alert
  title="Log Out"
  icon={Logout}
  dangerous
  primaryButtonText="Yes"
  primaryFn={redirectAndLogout}
  secondaryButtonText="Cancel"
  bind:open={showLogoutModal}
>

2. QR Code Modal

This makes use of the TopBarQrCode component

<Modal showIcon={false} bind:open={showModal} title="QR Code">
  <TopBarQrCode on:close={closeModal} />
</Modal>

Responsive Design

Desktop View

• Full navigation menu
• Expanded user profile
• All action icons visible

Mobile View

• Hamburger menu
• Collapsed navigation
• Essential actions only

Implementation Guide

Basic Usage

<script>
  import TopBar from "../components/topBar.svelte";
</script>

<TopBar />

Required Store Setup

// Ensure these stores are initialized
userInfo.set(/* user data */);
tenantInfo.set(/* tenant data */);
notices.set(/* notifications */);