VS Code-Style Shadcn/ui Resizable Sidebar for Next.js Apps

shadcn/ui Resizable Sidebar is an extended version of the popular shadcn-ui sidebar component that adds drag-to-resize functionality for Next.js applications.

You can use this component to create flexible and user-friendly layouts, such as admin panels, documentation sites, or any application that benefits from a collapsible navigation area.

Features

Preview

Use Cases

• Admin Dashboards: Implement a main navigation menu that users can shrink to maximize the content area or expand to view all options. The persisted state ensures the user’s layout choice is remembered on their next visit.
• Web-Based IDEs: Create a file explorer or tool panel that mimics the behavior of desktop code editors like VS Code. The auto-collapse and expand features allow for a fluid and intuitive user experience.
• Documentation Websites: Add a table of contents or API reference in a sidebar that readers can resize for comfort or collapse completely to focus on the main content.
• Content Management Systems (CMS): Build an interface with a sidebar for managing assets, pages, or settings.

Installation

1. Set up a Next.js project with shadcn-ui:

npx create-next-app@latest my-project
cd my-project
npx shadcn-ui@latest init

2. Clone the resizable sidebar repository:

git clone https://github.com/lumpinif/shadcn-resizable-sidebar.git
cd shadcn-resizable-sidebar

3. Install dependencies:

bun install
# or
npm install

4. Copy the resizable sidebar components to your project:

# Copy the resizable sidebar hook and components
cp -r components/ui/resizable-sidebar your-project/components/ui/

Usage

This example shows how to set up a left-positioned sidebar. The direction property is set to "right", meaning the resize handle is on the right edge of the sidebar.

// For a left-positioned sidebar (default)
const { dragRef, handleMouseDown } = useSidebarResize({
  direction: "right", // Resize handle on right side
  // other options...
});

For a right-positioned sidebar, you would change the direction to "left".

// For a right-positioned sidebar
const { dragRef, handleMouseDown } = useSidebarResize({
  direction: "left", // Resize handle on left side
  // other options...
});

The useSidebarResize hook offers several options for customization, including callbacks for resize events, minimum and maximum widths, and thresholds for the auto-collapse feature.

const { dragRef, handleMouseDown } = useSidebarResize({
  direction: "right",
  currentWidth: width,
  onResize: setWidth,
  onToggle: toggleSidebar,
  isCollapsed: state === "collapsed",
  minResizeWidth: "14rem",
  maxResizeWidth: "22rem",
  enableAutoCollapse: true,
  widthCookieName: "sidebar:width",
});

FAQs

Q: How do I change the sidebar’s position from left to right?
A: You can change the sidebar’s position by setting the direction property in the useSidebarResize hook to "left". This places the resize handle on the left side of the sidebar, which is appropriate for a right-aligned sidebar.

Q: Can I disable the auto-collapse feature?
A: Yes, you can disable this feature by setting enableAutoCollapse: false in the configuration options for the useSidebarResize hook.

Q: How is the sidebar’s state persisted?
A: The component uses cookies to store the sidebar’s width and collapsed/expanded state. You can specify the cookie name and expiration time in the hook’s configuration.