@elavarasanbititude/ng-cwr-sidebar 0.0.7 → 0.0.8

package/README.md

@@ -1,4 +1,8 @@
-# @yourname/ng-cwr-sidebar
+# @elavarasanbititude/ng-cwr-sidebar
+
+[![npm version](https://badge.fury.io/js/%40elavarasanbititude%2Fng-cwr-sidebar.svg)](https://badge.fury.io/js/%40elavarasanbititude%2Fng-cwr-sidebar)
+[![npm downloads](https://img.shields.io/npm/dm/@elavarasanbititude/ng-cwr-sidebar.svg)](https://www.npmjs.com/package/@elavarasanbititude/ng-cwr-sidebar)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 A modern, flexible, and fully customizable Angular sidebar component library built with Angular 21 and SCSS. Perfect for building responsive navigation sidebars with nested menus, icons, and badges.
 
@@ -17,7 +21,20 @@ A modern, flexible, and fully customizable Angular sidebar component library bui
 ## Installation
 
 ```bash
-npm install @yourname/ng-cwr-sidebar
+npm install @elavarasanbititude/ng-cwr-sidebar
+```
+
+## Requirements
+
+This library requires the following peer dependencies:
+
+- **Angular**: ^21.2.0
+- **RxJS**: ~7.8.0
+
+Make sure these packages are already installed in your project:
+
+```bash
+npm install @angular/common @angular/core @angular/router rxjs
 ```
 
 ## Quick Start
@@ -25,7 +42,7 @@ npm install @yourname/ng-cwr-sidebar
 ### 1. Import the Component
 
 ```typescript
-import { Sidebar } from '@yourname/ng-cwr-sidebar';
+import { Sidebar } from '@elavarasanbititude/ng-cwr-sidebar';
 
 @Component({
   selector: 'app-root',
@@ -70,7 +87,7 @@ export class AppComponent {
 ### 2. Using the Sidebar Service
 
 ```typescript
-import { SidebarService } from '@yourname/ng-cwr-sidebar';
+import { SidebarService } from '@elavarasanbititude/ng-cwr-sidebar';
 
 export class MyComponent {
   constructor(private sidebarService: SidebarService) {}
@@ -112,17 +129,35 @@ interface SidebarConfig {
 
 ```typescript
 interface SidebarMenuItem {
-  id?: string;                   // Unique identifier
-  label: string;                 // Display label
-  icon?: string;                 // Icon (emoji or HTML)
-  route?: string;                // Router link
-  action?: () => void;           // Click action function
-  children?: SidebarMenuItem[];  // Nested menu items
-  disabled?: boolean;            // Disable menu item
+  // Identification & Display
+  id?: string;                              // Unique identifier
+  label: string;                            // Display label (required)
+  icon?: string;                            // Icon (emoji or HTML)
+  tooltip?: string;                         // Tooltip text on hover
+  cssClass?: string;                        // Additional CSS classes to apply
+
+  // Navigation & Actions
+  route?: string;                           // Router link
+  queryParams?: Record<string, any>;        // Query parameters to pass with the route
+  queryParamsHandling?: 'merge' | 'preserve'; // How to handle query parameters
+  action?: () => void;                      // Custom click action function
+  target?: '_blank' | '_self' | '_parent' | '_top'; // Link target attribute
+
+  // Appearance & Structure
+  children?: SidebarMenuItem[];             // Nested menu items
   badge?: {
     text: string;
-    color?: string;              // Badge background color
+    color?: string;                         // Badge background color
   };
+  divider?: boolean;                        // Show a divider line after this item
+
+  // State & Visibility
+  disabled?: boolean;                       // Disable/grey out menu item
+  visible?: boolean;                        // Show/hide menu item based on custom logic
+  expandedByDefault?: boolean;              // Whether to expand nested children by default
+
+  // Custom Logic
+  isActive?: () => boolean;                 // Custom function to determine if item is active
 }
 ```
 
@@ -185,6 +220,58 @@ const menuItems: SidebarMenuItem[] = [
 ];
 ```
 
+### Advanced Features
+
+```typescript
+const menuItems: SidebarMenuItem[] = [
+  {
+    label: 'Dashboard',
+    icon: '📊',
+    route: '/dashboard',
+    tooltip: 'Go to dashboard',
+    expandedByDefault: true,
+  },
+  {
+    label: 'External Link',
+    icon: '🔗',
+    route: 'https://example.com',
+    target: '_blank',
+  },
+  {
+    label: 'Admin Panel',
+    icon: '⚙️',
+    visible: userRole === 'admin', // Hide for non-admin users
+    children: [
+      {
+        label: 'Settings',
+        route: '/admin/settings',
+        tooltip: 'Configure application',
+      },
+      {
+        label: 'Users',
+        route: '/admin/users',
+      },
+    ],
+  },
+  {
+    label: 'Reports',
+    icon: '📈',
+    route: '/reports',
+    queryParams: { year: 2026, month: 4 },
+    queryParamsHandling: 'merge',
+  },
+  {
+    divider: true,
+  },
+  {
+    label: 'Help',
+    icon: '❓',
+    disabled: maintenanceMode,
+    isActive: () => router.url.includes('/help'),
+  },
+];
+```
+
 ### Themed Configuration
 
 ```typescript
@@ -291,13 +378,42 @@ The component uses SCSS and includes both light and dark theme variants. You can
 - Safari (latest)
 - Edge (latest)
 
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for detailed information about each release.
+
 ## License
 
-MIT
+MIT © [Bititude](https://github.com/bititude)
+
+## Support
+
+For issues, questions, or contributions:
+
+- **Create an Issue**: [GitHub Issues](https://github.com/bititude/ng-cwr-sidebar/issues)
+- **Documentation**: Check this README for comprehensive usage examples
+- **Community**: Open to pull requests and community contributions
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions are welcome! Please feel free to submit a Pull Request. To contribute:
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+Please ensure your code follows the project's coding standards and includes appropriate tests.
+
+## Related Packages
+
+- [@elavarasanbititude/design-system](https://github.com/bititude/design-system) - Design tokens and styles
+- Other CWR packages available in the [Bititude Platform](https://github.com/bititude/platform)
+
+---
+
+Made with ❤️ by [Bititude](https://github.com/bititude)
 
 ## Support
 

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@elavarasanbititude/ng-cwr-sidebar",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "A modern, flexible, and customizable Angular sidebar component library",
   "author": "elavarasanbititude",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/ng-cwr-sidebar"
+    "url": "https://github.com/bititude/platform",
+    "directory": "packages/ng-cwr-sidebar"
   },
   "bugs": {
-    "url": "https://github.com/yourusername/ng-cwr-sidebar/issues"
+    "url": "https://github.com/bititude/platform/issues"
   },
-  "homepage": "https://github.com/yourusername/ng-cwr-sidebar#readme",
+  "homepage": "https://github.com/bititude/platform/tree/main/packages/ng-cwr-sidebar#readme",
   "keywords": [
     "angular",
     "sidebar",