@virtuaportal/shared-header

A shared, reusable, and responsive header component for VirtuaPortal applications.

Installation

Assuming you have this package locally or published to a registry:

npm install @virtuaportal/shared-header
# or
yarn add @virtuaportal/shared-header

Peer Dependencies

Ensure you have the required peer dependencies installed in your consuming application:

• react (^18.0.0)
• react-dom (^18.0.0)
• lucide-react (^0.475.0)

Basic Usage

Import the SharedHeader component and use it in your application, typically inside your main layout wrapper.

import React, { useState } from 'react';
import { SharedHeader } from '@virtuaportal/shared-header';
// Important: if there are CSS files exported by the library, import them here
// import '@virtuaportal/shared-header/dist/style.css'; 

const MyLayout = () => {
  const [theme, setTheme] = useState<"light" | "dark">("light");

  const mockUser = {
    firstName: "John",
    lastName: "Doe",
    email: "[email protected]"
  };

  const mockOrg = {
    id: "org_123",
    name: "VirtuaPortal Inc"
  };

  return (
    <div className="layout-container">
      <SharedHeader
        user={mockUser}
        selectedOrg={mockOrg}
        notificationCount={3}
        supportCount={1}
        theme={theme}
        onThemeToggle={() => setTheme(theme === "light" ? "dark" : "light")}
        onLogout={() => console.log("User logged out")}
        onNavigate={(path) => console.log("Navigate to", path)}
      />
      <main>
        {/* Your app content goes here */}
      </main>
    </div>
  );
};

export default MyLayout;

Props API Reference

The SharedHeader component accepts the following props:

Required Props

| Prop | Type | Description | | :--- | :--- | :--- | | user | { firstName: string; lastName: string; email: string; } \| null | User details to display in the profile dropdown. | | onLogout | () => void | Callback fired when the user clicks the Logout button. | | onNavigate | (path: string) => void | Callback fired when the header needs to navigate to a specific path (e.g., app routing). |

Optional Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | selectedOrg | { id: string \| number; name: string; organization_id?: string \| number; } \| null | undefined | The currently active organization. | | notificationCount | number | 0 | Number of unread notifications to display on the bell icon. | | supportCount | number | 0 | Number of support tickets/messages to display on the headset icon. | | theme | "light" \| "dark" | "light" | Current theme mode for the header. | | onThemeToggle | () => void | undefined | Callback fired when the user toggles the theme. | | apps | AppItem[] | Internal Fetch | List of installed apps. If not provided, it will auto-fetch apps for selectedOrg. | | appsLoading | boolean | false | Loading state for the apps grid. | | onOpenApp | (app: AppItem) => void | undefined | Custom handler when an app is clicked. If not provided, it uses default routing/window behavior. | | onSupportClick | () => void | undefined | Custom handler for support icon click. Overrides the internal support modal. | | onNotificationsClick| () => void | undefined | Custom handler for notification icon click. Overrides the internal notifications modal. | | modalAlign | "left" \| "right" \| "center" | "right" | Alignment of the internal Support/Notifications modal. | | renderThemeSwitcher | () => React.ReactNode | undefined | Custom renderer to completely replace the theme switcher button inside the user dropdown. |

AppItem Interface

interface AppItem {
  app_id: string;
  project_name: string;
  logo_path?: string;
  access_url?: string;
  description?: string;
  type?: string;
  version?: string;
}

Features

• Responsive Design: Full desktop header with dedicated icons, and a simplified mobile header with a 3-dot "more" menu.
• Built-in Apps Menu: Features a grid displaying apps associated with the organization, complete with auto-fetching if apps aren't passed manually.
• Support & Notifications: Built-in modal functionality to handle support requests and notifications.
• Dark Mode Support: Seamlessly toggles between dark and light themes.
• User Profile Menu: Dropdown displaying user info, active organization, theme toggle, and logout.
• Built-in Calendar: Self-contained calendar component for quick date referencing.