@aiquants/menu-bar

A React menu bar component with authentication support and theming for modern web applications.

Key Features

• Menu Navigation: Collapsible menu with smooth animations and hierarchical structure
• Dark/Light Theme: Comprehensive theming support with scoped CSS
• Session Management: Built-in session information display with user profiles
• Responsive Design: Mobile-friendly with overlay support
• TypeScript Support: Full TypeScript definitions included
• React Router Integration: Built for React Router with generic link component support
• CSS Scoped: All styles are scoped to prevent conflicts with host applications

Installation

npm install @aiquants/menu-bar

Exports

This package exports the following components and types:

// Components
export { MenuBar } from '@aiquants/menu-bar';
export { SessionInfo, DefaultLink } from '@aiquants/menu-bar';

// Types
export type { IMenu, ISubmenu } from '@aiquants/menu-bar';
export type { Theme } from '@aiquants/menu-bar';
export type { SessionInfoProps, LinkProps } from '@aiquants/menu-bar';
export type { UserProfile, UserPhoto } from '@aiquants/menu-bar';

// CSS (import separately)
import '@aiquants/menu-bar/css';

Basic Usage

import React, { useState } from 'react';
import { MenuBar } from '@aiquants/menu-bar';
import '@aiquants/menu-bar/css';

function App() {
  const [theme, setTheme] = useState('light');

  const menuList = [
    {
      id: 1,
      title: 'Dashboard',
      href: '/dashboard',
      submenu: []
    },
    {
      id: 2,
      title: 'Data',
      submenu: [
        { subid: 1, title: 'Reports', href: '/data/reports' },
        { subid: 2, title: 'Analytics', href: '/data/analytics' }
      ]
    }
  ];

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  const handleSignout = () => {
    console.log('Signing out...');
  };

  return (
    <div className="app">
      <MenuBar
        menuList={menuList}
        theme={theme}
        toggleTheme={toggleTheme}
        onClickSignout={handleSignout}
        menuHeader={<div>My App</div>}
      />
      {/* Your app content */}
    </div>
  );
}

Props

MenuBar Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | menuList | IMenu[] | Yes | Array of menu items to display | | theme | 'light' \| 'dark' | Yes | Theme mode for the menu bar | | toggleTheme | () => void | Yes | Function to toggle between light and dark themes | | onClickSignout | () => void | Yes | Callback function for sign out action | | menuHeader | React.ReactNode | No | Optional header content for the menu | | isMenuhide | boolean | No | Whether to hide the menu bar entirely |

IMenu Type

interface IMenu {
  id: number;
  title: string;
  href?: string;
  submenu: ISubmenu[];
}

ISubmenu Type

interface ISubmenu {
  subid: number;
  title?: string;
  href: string;
  mark?: string;
  new?: boolean;
}

UserProfile Type

interface UserProfile {
  displayName: string;
  photos: UserPhoto[];
  id?: string;
}

interface UserPhoto {
  value: string;
}

SessionInfoProps Type

interface SessionInfoProps {
  user: UserProfile | null;
  onLogout?: () => void;
  LinkComponent: React.ComponentType<LinkProps>;
}

interface LinkProps {
  to: string;
  className?: string;
  children: React.ReactNode;
}

Theming

The menu bar supports both light and dark themes. All styles are scoped with the .aiquants-menu-bar class to prevent conflicts with your application's styles.

Custom Styling

You can override the default styles by targeting the scoped classes:

.aiquants-menu-bar {
  /* Custom menu bar styles */
}

.aiquants-menu-bar.theme-dark {
  /* Dark theme overrides */
}

.aiquants-menu-bar.theme-light {
  /* Light theme overrides */
}

Usage with React Router

import React, { useState } from 'react';
import { MenuBar } from '@aiquants/menu-bar';

function App() {
  const [theme, setTheme] = useState('light');

  const menuList = [
    {
      id: 1,
      title: 'Home',
      href: '/',
      submenu: []
    },
    {
      id: 2,
      title: 'Products',
      submenu: [
        { subid: 1, title: 'All Products', href: '/products' },
        { subid: 2, title: 'Categories', href: '/products/categories' }
      ]
    }
  ];

  return (
    <MenuBar
      menuList={menuList}
      theme={theme}
      toggleTheme={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      onClickSignout={() => console.log('Signout')}
    />
  );
}

Advanced Usage

With Menu Header

import React from 'react';

const menuHeader = (
  <div className="flex items-center gap-2 p-4">
    <img src="/logo.png" alt="Logo" className="w-8 h-8" />
    <span className="font-bold">My Application</span>
  </div>
);

<MenuBar
  menuList={menuList}
  menuHeader={menuHeader}
  theme={theme}
  toggleTheme={toggleTheme}
  onClickSignout={handleSignout}
/>

Hiding the Menu

import React from 'react';

<MenuBar
  menuList={menuList}
  theme={theme}
  toggleTheme={toggleTheme}
  onClickSignout={handleSignout}
  isMenuhide={shouldHideMenu}
/>

Components

MenuBar

The main menu bar component that includes:

• Menu toggle button with hamburger icon
• Company logo and navigation menu
• Theme toggle functionality
• Responsive overlay for mobile devices
• Sign out functionality

SessionInfo

A standalone session information component that displays:

• User avatar/profile picture
• User display name
• Logout functionality with customizable link component

import { SessionInfo } from '@aiquants/menu-bar';

<SessionInfo
  user={{
    displayName: "John Doe",
    photos: [{ value: "https://example.com/avatar.jpg" }]
  }}
  onLogout={() => console.log('Logout')}
  LinkComponent={({ to, children, ...props }) => (
    <a href={to} {...props}>{children}</a>
  )}
/>

Menu Features

• Hierarchical Menu Structure: Support for main menu items with submenus
• Dynamic Navigation: Menu items can have direct links or submenu collections
• Visual Indicators: Support for special marks (lock icon, etc.) and "new" badges
• External Links: Option to open links in new tabs

CSS Classes

All CSS classes are scoped with .aiquants- prefix:

• .aiquants-menu-bar - Main container
• .aiquants-menu-switch - Menu toggle button
• .aiquants-menu-content - Menu content area
• .aiquants-session-info - Session information
• .aiquants-overlay-shadow - Mobile overlay

Browser Support

• Chrome/Edge 88+
• Firefox 78+
• Safari 14+
• Node.js 18+

Development

# Install dependencies
npm install

# Build the package
npm run build

# Run type checking
npm run typecheck

# Clean build files
npm run clean

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

fehde-k