Sidebar - Copy this React, Tailwind Component to your project

Create a responsive Sidebar component using React and SCSS, adhering precisely to the specifications below for styling, functionality, and behavior. 1. Component Structure Main Container (SideBarContainer): Background color var(--white), border var(--border-in-light), border-radius 20px, box-shadow var(--shadow), flex layout, min-width 600px, max-width 1200px. Responsive adjustments include full viewport width/height on large screens (100vw), border-radius 0. Resizable via drag handle, collapses on toggle. Sidebar (.sidebar): Flex column layout, width var(--sidebar-width), background color var(--second), padding 20px, inset shadow. Hover and active states include slight color shift, SVG opacity increase. Drag handle (.sidebar-drag) positioned to the right, width 14px, cursor ew-resize, with hover effect triggering background change. Header (.sidebar-header): Contains title, subtitle, logo, with slide-in animation effect (0.3s) for both title and subtitle. Body (.sidebar-body): Scrollable area for chat items, hidden overflow on the x-axis. Tail (.sidebar-tail): Primary actions include settings, delete, external link buttons, with a flex layout aligning items to the bottom. 2. Styling Highlights Base styles use SCSS mixin .container for consistent design, smooth width resizing with transition: width 0.05s, disabled transitions on iOS to prevent lag. Narrow state (.narrow-sidebar) hides titles, centers icons, adjusts button margins. Mobile behavior sets sidebar off-screen by default, sliding in on activation (left: 0). 3. Functional Requirements Resizing logic includes drag handle toggling width, collapsing if clicked within 300ms. Keyboard shortcuts use Alt/Option + Arrow keys for session navigation, with dynamic content like ChatList loading lazily for performance. 4. Animations & Transitions Sidebar animation includes smooth resizing (0.05s), SVG icons fading in on interaction, chat item hover effects with background color changes and delete icon transitions, Selector component with UI dimming and fade-in effect for focus. 5. Interactive Elements Buttons implemented as IconButton for settings, delete, discovery, with hover states including subtle scaling and shadow effect. SVG optimization ensures sharp display across all resolutions. 6. Accessibility & Responsive Design ARIA compliance for screen reader labels, full keyboard navigation, responsive design behavior includes full-width sidebar on mobile, adjustable width on desktop. 7. Code Structure & State Management Use hooks like useAppConfig and useChatStore for state, with file organization separating logic, styles, and hooks for readability. Ensure dependencies include React, React Router, and dynamic imports with Next.js. 8. Specific Styles Chat items (.chat-item) include padding 10px 14px, background var(--white), hover effect changing color, selected state with border-color var(--primary). Delete icon fades in on hover with smooth transitions. Narrow sidebar adjustments center-align icons, hide text elements, minimize padding for compact display.