sgh-navbar 0.0.54 → 0.0.57

package/README.md

@@ -1,33 +1,589 @@
-# SghNavbar
+# SGH-Navbar Library
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.
+[![npm version](https://badge.fury.io/js/sgh-navbar.svg)](https://badge.fury.io/js/sgh-navbar)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-## Code scaffolding
+A comprehensive Angular navigation library that provides a responsive sidebar navigation, toolbar with theme switching, breadcrumbs, and client management features.
 
-Run `ng generate component component-name --project sgh-navbar` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project sgh-navbar`.
-> Note: Don't forget to add `--project sgh-navbar` or else it will be added to the default project in your `angular.json` file. 
+## Table of Contents
 
-## Build
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Components](#components)
+- [Configuration](#configuration)
+- [Customization](#customization)
+- [API Reference](#api-reference)
+- [Examples](#examples)
+- [Troubleshooting](#troubleshooting)
+- [Development](#development)
+- [License](#license)
 
-Run `ng build sgh-navbar` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Features
 
-## Publishing
+✨ **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
 
-After building your library with `ng build sgh-navbar`, go to the dist folder `cd dist/sgh-navbar` and run `npm publish`.
+## Installation
 
-## Running unit tests
+### Prerequisites
 
-Run `ng test sgh-navbar` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- Angular 19.x
+- Angular Material 19.x
+- Angular CDK 19.x
+- RxJS 7.x
 
-## Further help
+### Install via npm
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+```bash
+npm install sgh-navbar
+```
 
-##  Version details
+### Install Peer Dependencies
 
-#   Angular Version    Library Version    Description
-    15                 0.0.43
-    16                 0.0.50
-    17                 0.0.51
-    18                 0.0.52
-    19                 0.0.53
+```bash
+npm install @angular/material @angular/cdk @angular/animations @angular/forms
+```
+
+## Quick Start
+
+### 1. Import the Module
+
+```typescript
+// 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
+
+```typescript
+// 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
+
+```scss
+// 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
+
+```typescript
+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
+
+```typescript
+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`
+```typescript
+interface SidenavData {
+  navData: INavbarData[];
+  bgColor: string;
+  imgSm: string;
+  imgLg: string;
+  client?: ClientListItem;
+  subclient?: SubClientListItem;
+  activeRole?: string;
+}
+```
+
+#### `INavbarData`
+```typescript
+interface INavbarData {
+  routeLink: string;
+  icon: string;
+  label: string;
+  visible: boolean;
+  expanded?: boolean;
+  items?: INavbarData[];
+  customLinkCSS?: string;
+}
+```
+
+#### `ToolbarData`
+```typescript
+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
+
+```typescript
+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
+
+```scss
+// 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**
+```typescript
+// Make sure you have BrowserAnimationsModule imported
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule // Required for animations
+  ]
+})
+```
+
+#### 2. **Icons not displaying**
+```html
+<!-- 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**
+```scss
+// Make sure to import Angular Material theme
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+```
+
+#### 4. **Navigation not working**
+```typescript
+// Ensure RouterModule is configured
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes)
+  ]
+})
+```
+
+## Development
+
+### Building the Library
+
+```bash
+# Build the library
+ng build sgh-navbar
+
+# Build in watch mode
+ng build sgh-navbar --watch
+```
+
+### Running Tests
+
+```bash
+# Run unit tests
+ng test sgh-navbar
+
+# Run tests with coverage
+ng test sgh-navbar --code-coverage
+```
+
+### Publishing
+
+```bash
+# 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 |
+
+### Latest Changes (v0.0.55)
+- ✅ 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**