Sidebar Component
Navigation sidebar with collapsible sections and responsive behavior.
Live Demo
The sidebar is visible on the left side of this page. It includes:
- Grouped navigation sections
- Active state highlighting
- Collapsible on mobile
- Smooth animations
Navigation Sections:
Getting StartedLayout ComponentsExamplesGYDE ComponentsTesting
Implementation
Usage
import { Sidebar } from '@/components/Sidebar';
<Sidebar currentPath={Astro.url.pathname} />Props
interface SidebarProps {
currentPath?: string; // Highlights active nav item
}Features
- • Grouped navigation with section headers
- • Active state based on current path
- • Collapsible via header toggle
- • Mobile overlay with backdrop
- • Keyboard accessible (Escape to close)
State Management
import { sidebarOpenStore } from '@/stores/appStore';
// Toggle sidebar
sidebarOpenStore.set(!sidebarOpenStore.get());File Location
src/components/Sidebar.tsx