sgh-navbar 0.1.4 → 0.2.0

package/README.md

@@ -22,29 +22,24 @@ A comprehensive Angular navigation library that provides a responsive sidebar na
 ## 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
+- 🎨 **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** - Modern notification panel with badges and animations
-- 👤 **User Profile** - Redesigned profile dropdown integration
-- ⚡ **Performance Optimized** - Hardware-accelerated animations and transitions
+- 🔔 **Notifications** - Notification panel support
+- 👤 **User Profile** - Profile dropdown integration
+- ⚡ **Performance Optimized** - Lazy loading and memory leak prevention
 - 🎯 **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
+- Angular 20.x
+- Angular Material 20.x
+- Angular CDK 20.x
 - RxJS 7.x
 
 ### Install via npm
@@ -162,123 +157,6 @@ body {
 }
 ```
 
-## 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:
-```scss
-// 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
-
-```scss
-// 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>`
@@ -678,97 +556,7 @@ npm publish
 | 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 |
-| 19 | 0.1.4           | **Security Hardening** - Comprehensive security fixes including XSS prevention, input validation, and type safety |
-
-### Latest Changes (v0.1.4) - Security Hardening
-
-#### **Critical Security Fixes**
-- **XSS Prevention**: Implemented `DomSanitizer` with `SecurityContext.HTML` for all dynamic HTML content rendering
-- **Theme Validation**: Added strict theme whitelist to prevent CSS injection attacks via malicious theme values
-- **URL Validation**: Image sources are now validated against a whitelist of allowed protocols (`http:`, `https:`, `data:`)
-
-#### **Input Validation**
-- **Dialog Data Validation**: Sub-client dialog now validates all input data with proper type checking
-- **Null Safety**: Added comprehensive null checks throughout components to prevent runtime errors
-- **Type-Safe Interfaces**: Replaced `any` types with proper TypeScript interfaces for better compile-time safety
-
-#### **Code Quality Improvements**
-- **Strict Equality**: Changed all loose equality checks (`==`) to strict equality (`===`)
-- **Development Logging**: Console statements wrapped in `ngDevMode` checks for production builds
-- **Input Sanitization**: All user-provided data is sanitized before rendering or processing
-
-#### **Security Best Practices**
-- Implemented defense-in-depth strategy with multiple validation layers
-- Added proper error handling for malformed input data
-- Enhanced type safety to catch potential issues at compile time
-
-### Previous 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
+| 20 | 0.2.00          | Angular 20 support |
 
 ## Browser Support