# AppSidebar Component A modern, responsive sidebar component for Vue 3 applications with PrimeVue icons support. ## Overview The `AppSidebar` component provides a collapsible navigation sidebar that adapts seamlessly between desktop and mobile views. It supports customizable logos, navigation links, bottom action links, and smooth animations. ## Features - ✅ **Responsive Design** - Adapts to desktop and mobile viewports - ✅ **Collapsible** - Collapse to icon-only mode on desktop - ✅ **Full-screen Mobile Menu** - Hamburger menu with full-width overlay on mobile - ✅ **Customizable Logo** - Support for both icon and image logos - ✅ **Navigation Links** - Main and bottom navigation sections - ✅ **Badge Support** - Display notification counts on links - ✅ **Smooth Animations** - Elegant transitions for all interactions - ✅ **PrimeIcons Integration** - Uses PrimeVue icon library --- ## Installation ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `logo` | `LogoConfig` | `{ icon: 'pi-box', text: 'App' }` | Logo configuration object | | `title` | `string` | `'Dashboard'` | Page title (used for accessibility) | | `links` | `SidebarLink[]` | `[]` | Main navigation links | | `bottomLinks` | `SidebarLink[]` | `[]` | Links displayed above the collapse button | | `isCollapsed` | `boolean` | `false` | Whether the sidebar is collapsed | | `isMobile` | `boolean` | `false` | Whether the viewport is mobile | | `isMobileOpen` | `boolean` | `false` | Whether the mobile menu is open | --- ## Type Definitions ### LogoConfig ```typescript interface LogoConfig { icon?: string; // PrimeIcon class (e.g., 'pi-box') image?: string; // Image URL or imported image text: string; // Logo text displayed next to icon } ``` ### SidebarLink ```typescript interface SidebarLink { label: string; // Display text icon: string; // PrimeIcon class (e.g., 'pi-home') href?: string; // URL for navigation route?: string; // Vue Router route name (optional) active?: boolean; // Whether the link is currently active badge?: string | number; // Badge content (e.g., notification count) onClick?: () => void; // Custom click handler } ``` --- ## Events | Event | Payload | Description | |-------|---------|-------------| | `toggle` | `void` | Emitted when the collapse button is clicked | | `close` | `void` | Emitted when the mobile close button is clicked | | `link-click` | `SidebarLink` | Emitted when any navigation link is clicked | --- ## Usage Examples ### Basic Usage ```vue ``` ### With Image Logo ```vue ``` ### With Badges ```vue ``` ### With Bottom Links ```vue ``` ### Full Implementation with Main Layout ```vue ``` --- ## Styling ### CSS Variables The component uses the following design tokens that can be customized: | Variable | Default | Description | |----------|---------|-------------| | Sidebar Background | `#1a1f2e → #252b3d` | Dark gradient background | | Primary Color | `#25b395` | Accent color for active states | | Primary Dark | `#1e9077` | Darker accent for gradients | | Expanded Width | `260px` | Sidebar width when expanded | | Collapsed Width | `72px` | Sidebar width when collapsed | ### Customizing Styles To customize the sidebar appearance, you can override the scoped styles in your parent component or create a global CSS file: ```css /* Example: Change sidebar background */ .sidebar { background: linear-gradient(180deg, #1e3a5f 0%, #0d1b2a 100%) !important; } /* Example: Change primary accent color */ .nav-link.active { background: linear-gradient(135deg, rgba(100, 149, 237, 0.2) 0%, rgba(65, 105, 225, 0.15) 100%) !important; color: #6495ed !important; } ``` --- ## Breakpoints | Breakpoint | Behavior | |------------|----------| | `≥ 1024px` | Desktop mode - Collapsible sidebar | | `< 1024px` | Mobile mode - Full-width overlay menu | --- ## Accessibility - Uses semantic HTML elements (`