Docs
Animations sidebar

Animations sidebar

Animations sidebar.

Installation

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Animations sidebar code into your project.

API Reference

SidebarProvider

Wraps components to provide context for managing the sidebar's state.

Props

PropTypeDescription
childrenReact.ReactNodeThe content to be wrapped inside the provider.
openbooleanControls whether the sidebar is open.
setOpenReact.Dispatch<React.SetStateAction<boolean>>Function to update the open state.
animatebooleanEnables or disables sidebar animations.

Sidebar

The main container for the sidebar. Uses the SidebarProvider for context.

Props

PropTypeDescription
childrenReact.ReactNodeThe content of the sidebar.
openbooleanControls whether the sidebar is open.
setOpenReact.Dispatch<React.SetStateAction<boolean>>Function to update the open state.
animatebooleanEnables or disables sidebar animations.

SidebarBody

Renders the content of the sidebar for both desktop and mobile views.

Props

PropTypeDescription
classNamestringAdditional classes for the sidebar body.
...propsmotion.div propsOther props forwarded to the motion div.

SidebarLink

Renders a link within the sidebar with an optional icon and animation.

Props

PropTypeDescription
linkLinksThe link details (label, href, icon).
classNamestringAdditional classes for the link.
propsLinkPropsProps forwarded to the Next.js Link component.

Usage

import { Sidebar, SidebarBody, SidebarLink, DesktopSidebar, MobileSidebar } from "./Sidebar";
 
export default function App() {
  const links = [
    { label: "Dashboard", href: "/dashboard", icon: <Icons.dashboard /> },
    { label: "Profile", href: "/profile", icon: <Icons.profile /> },
  ];
 
  return (
    <Sidebar animate={true}>
      <SidebarBody>
        <DesktopSidebar>
          {links.map((link, idx) => (
            <SidebarLink key={idx} link={link} />
          ))}
        </DesktopSidebar>
        <MobileSidebar>
          {links.map((link, idx) => (
            <SidebarLink key={idx} link={link} />
          ))}
        </MobileSidebar>
      </SidebarBody>
    </Sidebar>
  );
}