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 (Default, Light, Blue)
• 🔧 Highly Configurable - Extensive customization options
• 📱 Responsive Design - Mobile-friendly collapsible navigation
• 🧭 Navigation Management - Multi-level menu support with animations
• 👥 Client Management - Built-in client/sub-client selection
• 🍞 Breadcrumbs - Automatic breadcrumb generation
• 🔔 Notifications - Notification panel support
• 👤 User Profile - Profile dropdown integration
• ⚡ Performance Optimized - Lazy loading and memory leak prevention
• 🎯 Type Safe - Full TypeScript support

Installation

Prerequisites

• Angular 20.x
• Angular Material 20.x
• Angular CDK 20.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);
}

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 | | 20 | 0.2.00 | Angular 20 support |

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