drag-to-resize-sidebar

Enhanced Resizable Sidebar for Next.js with Shadcn/UI and Persistent State

This component significantly extends the shadcn/ui Sidebar for Next.js applications by introducing robust drag-to-resize functionality. It features persisted state via cookies, ensuring user preferences for sidebar width and collapse status are remembered across sessions. Developers can leverage advanced resizing capabilities, including VS Code-like continuous drag, auto-collapse/expand functionality, and customizable width limits, to build highly dynamic and user-friendly interfaces using a modern tech stack.

Features:

• Extended shadcn/ui Sidebar: Builds upon the existing shadcn/ui component for enhanced functionality.
• Drag-to-Resize Width: Users can interactively adjust the sidebar's width by dragging its edge.
• Collapsible Sidebar: Supports collapsing and expanding the sidebar with smooth, fluid animations.
• Theme Support (Light/Dark Mode): Adapts to different application themes, including light and dark modes.
• Keyboard Shortcuts: Provides keyboard accessibility for common sidebar interactions.
• Persistent State with Cookies: Remembers sidebar width and collapsed/expanded state across sessions using cookies.
• VS Code-like Resizing: Offers continuous drag-to-collapse/expand behavior, mimicking the Visual Studio Code sidebar.
• Customizable Auto-Collapse Threshold: Allows customization of the threshold at which the sidebar automatically collapses during resizing.
• Auto-Expand Functionality: Automatically expands the sidebar when dragged in the opposite direction from a collapsed state.
• Configurable Width Limits: Set minimum and maximum allowable widths for the sidebar during resizing.
• Direction-Aware Resizing: Supports both left and right-positioned sidebars, adapting resize logic accordingly.
• Customizable Cookie Settings: Allows configuration of cookie name and max age for state persistence.
• Toggleable Drag Functionality: Provides an option to programmatically enable or disable the drag-to-resize feature.
• Event Callbacks: Offers 'onResize' and 'onToggle' callbacks for developers to hook into sidebar state changes.

Summary:

This Next.js sidebar component, an enhancement of shadcn/ui, delivers a highly interactive and customizable user experience through its drag-to-resize capabilities and persistent state management. It incorporates advanced features such as VS Code-style resizing, automatic collapse/expand mechanisms, and configurable thresholds. Developers can easily integrate this component to improve application layouts, offering a flexible and intuitive sidebar solution compatible with React 19 and Tailwind v4.