SGH-Navbar Library

A comprehensive Angular navigation library that provides a responsive sidebar navigation, toolbar with theme switching, breadcrumbs, and client management features.

Table of Contents

• Features
• Installation
• Quick Start
• Components
• Configuration
• Customization
• API Reference
• Examples
• Troubleshooting
• Development
• License

Features

✨ Rich Feature Set

• 🎨 Multiple Themes - Built-in theme switching with modern radio button design
• 🔧 Highly Configurable - Extensive customization options with CSS variables
• 📱 Responsive Design - Mobile-first design with adaptive layouts
• 🧭 Navigation Management - Multi-level menu support with smooth animations
• 👥 Client Management - Enhanced client/sub-client selection with search
• 🍞 Breadcrumbs - Automatic breadcrumb generation
• 🔔 Notifications - Modern notification panel with badges and animations
• 👤 User Profile - Redesigned profile dropdown integration
• ⚡ Performance Optimized - Hardware-accelerated animations and transitions
• 🎯 Type Safe - Full TypeScript support
• ♿ Accessible - WCAG compliant with ARIA labels and keyboard navigation
• 🌓 Dark Mode - Automatic dark mode support
• 🎭 Modern UI - Glassmorphism effects with backdrop blur
• 🔍 Enhanced Search - Redesigned search bar with submit button
• 🎬 Smooth Animations - Professional transitions and micro-interactions

Installation

Prerequisites

• Angular 19.x
• Angular Material 19.x
• Angular CDK 19.x
• RxJS 7.x

Install via npm

npm install sgh-navbar

Install Peer Dependencies

npm install @angular/material @angular/cdk @angular/animations @angular/forms

Quick Start

1. Import the Module

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SghNavbarModule } from 'sgh-navbar';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Required for animations
    SghNavbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Basic Implementation

// app.component.ts
import { Component } from '@angular/core';
import { 
  SidenavData, 
  ToolbarData, 
  DEFAULT_SIDENAV_CONFIG, 
  DEFAULT_TOOLBAR_CONFIG 
} from 'sgh-navbar';

@Component({
  selector: 'app-root',
  template: `
    <lib-sgh-navbar
      [sidenavData]="sidenavConfig"
      [toolbarData]="toolbarConfig"
      [expanded]="isNavExpanded"
      [showBreadcrumbs]="true"
      (toggleSidebarEvent)="onToggleSidebar($event)"
      (searchInputEvent)="onSearch($event)"
      (clientChange)="onClientChange($event)"
      (subClientChange)="onSubClientChange($event)">
      
      <!-- Your main content goes here -->
      <div class="main-content">
        <router-outlet></router-outlet>
      </div>
      
    </lib-sgh-navbar>
  `
})
export class AppComponent {
  isNavExpanded = false;
  sidenavConfig: SidenavData = DEFAULT_SIDENAV_CONFIG;
  toolbarConfig: ToolbarData = DEFAULT_TOOLBAR_CONFIG;

  onToggleSidebar(expanded: boolean): void {
    this.isNavExpanded = expanded;
  }

  onSearch(searchTerm: string): void {
    console.log('Search:', searchTerm);
  }

  onClientChange(client: any): void {
    console.log('Client changed:', client);
  }

  onSubClientChange(subClient: any): void {
    console.log('Sub-client changed:', subClient);
  }
}

3. Add Required Styles

// styles.scss or in your component
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

// Optional: Add Font Awesome for icons
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

// Basic layout styles
body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

.main-content {
  padding: 20px;
  min-height: calc(100vh - 64px);
}

Modern Toolbar Redesign ✨

The toolbar component has been completely redesigned with a modern, professional look and enhanced user experience.

🎨 Design Improvements

Layout Structure

┌─────────────────────────────────────────────────────────────────┐
│  [Logo] [☰] [🔍 Search.................→]    [🔔³] [⚙] [👤]     │
│    ↑     ↑           ↑                        ↑    ↑   ↑        │
│  Fixed  Menu    Flexible Center          Notifications         │
│  Left   Toggle  (grows to fill)         Settings              │
│                                          Profile               │
└─────────────────────────────────────────────────────────────────┘

Key Visual Enhancements

• Glassmorphism: Backdrop blur effects on toolbar and dropdowns
• Modern Shadows: Multiple shadow levels for depth hierarchy
• Smooth Transitions: 150ms fast and 300ms base transitions
• Hover Effects: Subtle lift animations with color changes
• Active States: Button press feedback with scale effects
• Rounded Corners: 12px-16px border radius for modern look
• Notification Badge: Animated pulsing badge with count display
• Focus States: Clear keyboard navigation indicators

Component Redesign

🔤 Logo

• Adaptive sizing: 42px (desktop), 36px (mobile), 48px (large screens)
• Hover scale effect with drop shadow
• Positioned at far left with proper constraints

🍔 Menu Toggle

• 42x42px button with 12px border radius
• Hover effects with background and icon scale
• Positioned next to logo for easy access

🔍 Search Bar

• Modern rounded design with icon-first layout
• Hover: Background change with border highlight
• Focus: Primary color border with glow effect
• Submit button with arrow icon and slide animation
• Adaptive sizing: 600px max (desktop), 400px (tablet), hidden (mobile)

🔔 Notification Button

• Animated notification badge showing count
• Pulsing animation to attract attention
• Modern dropdown with smooth slide-in animation

⚙️ Settings Menu

• Icons added to menu items for visual clarity
• Enhanced theme selector with custom radio buttons
• Improved client selector with search functionality

👤 Profile Button

• Larger icon for better visibility
• Redesigned dropdown card with modern styling

📱 Responsive Breakpoints

| Screen Size | Toolbar Height | Logo Size | Search | Special Features | |-------------|---------------|-----------|---------|------------------| | Mobile (≤768px) | 56px | 36px × 140px | Hidden | Tighter spacing, overlay mode | | Tablet (≤1024px) | 64px | 42px × 200px | 400px max | Optimized spacing | | Desktop (default) | 64px | 42px × 200px | 600px max | Full features | | Large (≥1920px) | 64px | 48px × 240px | 700px max | Enhanced sizing |

♿ Accessibility Features

• ARIA Labels: All interactive elements have descriptive labels
• Keyboard Navigation: Full keyboard support with visible focus indicators
• Screen Reader: Semantic HTML with proper roles and labels
• High Contrast: Special styles for high contrast mode
• Reduced Motion: Respects user's motion preferences
• Focus Management: Proper focus trapping in dropdowns

🌓 Dark Mode Support

Automatic dark mode detection with proper color adjustments:

// Dark mode colors
--sgh-toolbar-bg: rgba(15, 23, 42, 0.95)
--sgh-surface-color: #1e293b
--sgh-text-primary: #f1f5f9
--sgh-border-color: #334155

🎬 Animations & Transitions

• Dropdown Slide-In: 250ms cubic-bezier animation
• Button Hover: 150ms fast transition
• Badge Pulse: 2s infinite subtle pulse
• Icon Scale: Smooth scale on hover
• Submit Arrow: Slide animation on hover

🎨 Customization with CSS Variables

// Primary customizable variables
--sgh-primary-color: #3b82f6
--sgh-toolbar-bg: rgba(255, 255, 255, 0.95)
--sgh-text-primary: #1e293b
--sgh-text-secondary: #64748b
--sgh-border-color: #e2e8f0
--sgh-hover-bg: rgba(59, 130, 246, 0.08)

🚀 Performance Optimizations

• Hardware-accelerated transforms
• Optimized animations using transform and opacity
• Efficient CSS with proper specificity
• Minimal repaints and reflows
• Debounced search input handling

Components

Main Component: <lib-sgh-navbar>

The primary component that wraps your entire application layout.

Inputs

• sidenavData: SidenavData - Configuration for sidebar navigation
• toolbarData: ToolbarData - Configuration for toolbar
• expanded: boolean - Controls sidebar expanded state
• showBreadcrumbs: boolean - Show/hide breadcrumb navigation

Outputs

• toggleSidebarEvent: EventEmitter<boolean> - Sidebar toggle events
• searchInputEvent: EventEmitter<string> - Search input events
• clientChange: EventEmitter<ClientListItem> - Client selection events
• subClientChange: EventEmitter<SubClientListItem> - Sub-client selection events
• sidenavToggle: EventEmitter<any> - Sidenav toggle events

Individual Components

<sgh-toolbar>

Top navigation bar with logo, search, notifications, and user profile.

<sgh-sidenav>

Collapsible sidebar navigation with multi-level menu support.

<sgh-sublevel-menu>

Handles nested navigation menu items with animations.

<sgh-notification-list>

Dropdown notification panel.

<sgh-menu-list-item>

Individual menu item with expand/collapse functionality.

Configuration

Sidenav Configuration

import { SidenavData, INavbarData } from 'sgh-navbar';

const customSidenavConfig: SidenavData = {
  navData: [
    {
      label: 'Dashboard',
      icon: 'dashboard',
      routeLink: '/dashboard',
      visible: true,
      items: [
        {
          label: 'Analytics',
          icon: 'analytics',
          routeLink: '/dashboard/analytics',
          visible: true
        },
        {
          label: 'Reports',
          icon: 'assessment',
          routeLink: '/dashboard/reports',
          visible: true,
          items: [
            {
              label: 'Sales Report',
              icon: '',
              routeLink: '/dashboard/reports/sales',
              visible: true
            }
          ]
        }
      ]
    },
    {
      label: 'Users',
      icon: 'people',
      routeLink: '/users',
      visible: true
    },
    {
      label: 'Settings',
      icon: 'settings',
      routeLink: '/settings',
      visible: true
    }
  ],
  bgColor: '#2c3e50',
  imgSm: 'assets/logo-sm.png',
  imgLg: 'assets/logo-lg.png',
  activeRole: 'Administrator'
};

Toolbar Configuration

import { ToolbarData, ThemeOption, ClientListItem } from 'sgh-navbar';

const customToolbarConfig: ToolbarData = {
  themeOptions: [
    {
      name: 'Dark Theme',
      value: 'dark-theme',
      checked: true
    },
    {
      name: 'Light Theme',
      value: 'light-theme',
      checked: false
    },
    {
      name: 'Blue Theme',
      value: 'blue-theme',
      checked: false
    }
  ],
  bgColor: '#1976d2',
  img: 'assets/company-logo.svg',
  searchEnable: true,
  notificationEnable: true,
  profileEnable: true,
  settingsEnable: true,
  profileView: false,
  profileContent: `
    <div class="profile-info">
      <h4>John Doe</h4>
      <p>Administrator</p>
      <button class="btn-logout">Logout</button>
    </div>
  `,
  clientConfigurationEnable: true,
  applicationConfigurationEnable: true,
  clientList: [
    {
      text: 'Acme Corporation',
      value: 'ACME_CORP',
      selected: true,
      subClientList: [
        {
          text: 'Marketing Department',
          value: 'MARKETING',
          checked: true
        },
        {
          text: 'Sales Department',
          value: 'SALES',
          checked: false
        }
      ]
    }
  ]
};

API Reference

Interfaces

SidenavData

interface SidenavData {
  navData: INavbarData[];
  bgColor: string;
  imgSm: string;
  imgLg: string;
  client?: ClientListItem;
  subclient?: SubClientListItem;
  activeRole?: string;
}

INavbarData

interface INavbarData {
  routeLink: string;
  icon: string;
  label: string;
  visible: boolean;
  expanded?: boolean;
  items?: INavbarData[];
  customLinkCSS?: string;
}

ToolbarData

interface ToolbarData {
  themeOptions: ThemeOption[];
  clientList?: ClientListItem[];
  bgColor: string;
  img: string;
  searchEnable?: boolean;
  notificationEnable?: boolean;
  profileEnable?: boolean;
  settingsEnable?: boolean;
  profileView?: boolean;
  profileContent?: string;
  clientConfigurationEnable?: boolean;
  applicationConfigurationEnable?: boolean;
  isThemeCollapsed?: boolean;
  isNotifNavCollapsed?: boolean;
}

Examples

Basic E-commerce Application

import { Component } from '@angular/core';
import { SidenavData, ToolbarData } from 'sgh-navbar';

@Component({
  selector: 'app-ecommerce',
  template: `
    <lib-sgh-navbar
      [sidenavData]="sidenavConfig"
      [toolbarData]="toolbarConfig"
      [expanded]="navExpanded">
      <router-outlet></router-outlet>
    </lib-sgh-navbar>
  `
})
export class EcommerceComponent {
  navExpanded = false;
  
  sidenavConfig: SidenavData = {
    navData: [
      {
        label: 'Dashboard',
        icon: 'dashboard',
        routeLink: '/dashboard',
        visible: true
      },
      {
        label: 'Products',
        icon: 'inventory',
        routeLink: '/products',
        visible: true,
        items: [
          {
            label: 'All Products',
            icon: 'list',
            routeLink: '/products/list',
            visible: true
          },
          {
            label: 'Add Product',
            icon: 'add',
            routeLink: '/products/add',
            visible: true
          }
        ]
      },
      {
        label: 'Orders',
        icon: 'shopping_cart',
        routeLink: '/orders',
        visible: true
      }
    ],
    bgColor: '#1976d2',
    imgSm: 'assets/logo-sm.png',
    imgLg: 'assets/logo-lg.png'
  };

  toolbarConfig: ToolbarData = {
    themeOptions: [
      { name: 'Blue Theme', value: 'blue-theme', checked: true },
      { name: 'Dark Theme', value: 'dark-theme', checked: false }
    ],
    bgColor: '#1976d2',
    img: 'assets/company-logo.svg',
    searchEnable: true,
    notificationEnable: true,
    profileEnable: true,
    settingsEnable: true
  };
}

Custom Theme Example

// custom-theme.scss
.my-custom-theme {
  // Toolbar customization
  .toolbar-main-wrapper {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  // Sidebar customization
  .sgh-sidebar {
    background: linear-gradient(180deg, #2c3e50 0%, #3498db 100%);
    
    .sidebar_div a {
      color: #ecf0f1;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(52, 152, 219, 0.2);
        transform: translateX(5px);
      }
      
      &.item-active {
        background: rgba(52, 152, 219, 0.3);
        border-left: 4px solid #3498db;
      }
    }
  }
}

Troubleshooting

Common Issues

1. Animations not working

// Make sure you have BrowserAnimationsModule imported
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule // Required for animations
  ]
})

2. Icons not displaying

<!-- Add Font Awesome to your index.html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

3. Styles not applied

// Make sure to import Angular Material theme
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

4. Navigation not working

// Ensure RouterModule is configured
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ]
})

Development

Building the Library

# Build the library
ng build sgh-navbar

# Build in watch mode
ng build sgh-navbar --watch

Running Tests

# Run unit tests
ng test sgh-navbar

# Run tests with coverage
ng test sgh-navbar --code-coverage

Publishing

# Build the library
ng build sgh-navbar

# Navigate to dist folder
cd dist/sgh-navbar

# Publish to npm
npm publish

Version History

| Angular Version | Library Version | Description | |----------------|-----------------|-------------| | 15 | 0.0.43 | Initial release | | 16 | 0.0.50 | Angular 16 support | | 17 | 0.0.51 | Angular 17 support | | 18 | 0.0.52 | Angular 18 support | | 19 | 0.0.54 | Angular 19 support, Major fixes and improvements | | 19 | 0.0.57 | Enhanced layout behavior, responsive design improvements | | 19 | 0.0.58 | Modern Toolbar Redesign - Complete UI overhaul with glassmorphism, accessibility, and performance improvements |

Latest Changes (v0.0.58) - Modern Toolbar Redesign 🎨

Complete Toolbar Overhaul

• ✅ Modern UI Design: Complete redesign with glassmorphism and modern aesthetics
• ✅ Enhanced Layout: Logo at far left, hamburger menu next to logo, responsive search bar, action buttons on right
• ✅ Semantic HTML: Changed to <header> tag with proper ARIA roles and labels
• ✅ Improved Search: New search bar design with icon-first layout and submit button
• ✅ Notification Badge: Animated badge showing notification count with pulse effect
• ✅ Better Icons: Updated FontAwesome icons (fa-cog, fa-user-circle) for better clarity

Visual Enhancements

• ✅ Glassmorphism: Backdrop blur effects on toolbar and all dropdowns
• ✅ Modern Shadows: 4-level shadow system (sm, md, lg, xl) for proper depth
• ✅ Smooth Animations: Professional transitions (150ms fast, 300ms base)
• ✅ Hover Effects: Subtle lift animations with color changes on all interactive elements
• ✅ Active States: Button press feedback with scale effects
• ✅ Rounded Corners: Consistent 12-16px border radius throughout
• ✅ Focus States: Clear keyboard navigation indicators for accessibility

Enhanced Components

• ✅ Settings Menu: Added icons to menu items, modern theme selector with custom radio buttons
• ✅ Client Menu: Enhanced with search icon, check icon for selected items, "no results" state
• ✅ Notification List: Redesigned with modern card styling and smooth animations
• ✅ Profile Dropdown: New card-based design with proper spacing

Responsive Design

• ✅ Mobile (≤768px): 56px height, 36px logo, hidden search, tighter spacing
• ✅ Tablet (≤1024px): Optimized spacing with 400px search max-width
• ✅ Desktop: Full features with 600px search max-width
• ✅ Large Screens (≥1920px): Enhanced sizing with 700px search and 48px logo

Accessibility Improvements

• ✅ ARIA Labels: Complete aria-label coverage on all buttons and interactive elements
• ✅ Keyboard Navigation: Full keyboard support with visible focus indicators
• ✅ Screen Readers: Proper semantic HTML with roles and labels
• ✅ High Contrast Mode: Special styling for high contrast display
• ✅ Reduced Motion: Respects prefers-reduced-motion user preference
• ✅ Tooltips: Title attributes on all action buttons

Performance & Technical

• ✅ CSS Variables: Complete design system with customizable CSS custom properties
• ✅ Hardware Acceleration: Optimized animations using transform and opacity
• ✅ Efficient CSS: Proper specificity and minimal repaints
• ✅ Dark Mode: Automatic dark mode detection with proper color adjustments
• ✅ Print Styles: Toolbar hidden in print mode
• ✅ Cross-browser: Fallbacks for backdrop-filter and other modern CSS

Code Quality

• ✅ Better Structure: Organized SCSS with clear sections and comments
• ✅ Maintainability: Variables-based design system for easy customization
• ✅ Documentation: Comprehensive inline comments explaining each section
• ✅ Best Practices: Following Angular and SCSS best practices

Previous Changes (v0.0.55-57)

• ✅ Fixed notification component typo
• ✅ Added proper TypeScript types throughout
• ✅ Updated component selectors to use sgh- prefix
• ✅ Extracted hardcoded configurations
• ✅ Added proper error handling and null checks
• ✅ Improved performance and memory management
• ✅ Added comprehensive documentation
• ✅ Enhanced Layout Behavior: Content area now properly moves right and adjusts width when sidebar is open
• ✅ Responsive Design: Smart layout adjustments for desktop (content shifts), tablet (content shifts), and mobile (overlay mode)
• ✅ Smooth Animations: Added smooth transitions for layout changes and content positioning
• ✅ Visual Enhancements: Added subtle shadows and overlay effects for better depth perception
• ✅ Fixed Toggle Logic: Resolved double-click toggle issue - sidebar now toggles correctly with single click

Browser Support

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+
• iOS Safari 12+
• Android Browser 81+

License

This project is licensed under the MIT License.

Made with ❤️ by the SGH Team