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
Prop | Type | Description |
---|---|---|
children | React.ReactNode | The content to be wrapped inside the provider. |
open | boolean | Controls whether the sidebar is open. |
setOpen | React.Dispatch<React.SetStateAction<boolean>> | Function to update the open state. |
animate | boolean | Enables or disables sidebar animations. |
Sidebar
The main container for the sidebar. Uses the SidebarProvider
for context.
Props
Prop | Type | Description |
---|---|---|
children | React.ReactNode | The content of the sidebar. |
open | boolean | Controls whether the sidebar is open. |
setOpen | React.Dispatch<React.SetStateAction<boolean>> | Function to update the open state. |
animate | boolean | Enables or disables sidebar animations. |
SidebarBody
Renders the content of the sidebar for both desktop and mobile views.
Props
Prop | Type | Description |
---|---|---|
className | string | Additional classes for the sidebar body. |
...props | motion.div props | Other props forwarded to the motion div. |
SidebarLink
Renders a link within the sidebar with an optional icon and animation.
Props
Prop | Type | Description |
---|---|---|
link | Links | The link details (label, href, icon). |
className | string | Additional classes for the link. |
props | LinkProps | Props 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>
);
}