"use client"; import { cn } from "@/lib/utils"; import React, { useState, createContext, useContext } from "react"; import { AnimatePresence, motion } from "motion/react"; import { IconMenu2, IconX } from "@tabler/icons-react"; interface Links { label: string; href: string; icon: React.JSX.Element | React.ReactNode; } interface SidebarContextProps { open: boolean; setOpen: React.Dispatch>; animate: boolean; } const SidebarContext = createContext( undefined ); export const useSidebar = () => { const context = useContext(SidebarContext); if (!context) { throw new Error("useSidebar must be used within a SidebarProvider"); } return context; }; export const SidebarProvider = ({ children, open: openProp, setOpen: setOpenProp, animate = true, }: { children: React.ReactNode; open?: boolean; setOpen?: React.Dispatch>; animate?: boolean; }) => { const [openState, setOpenState] = useState(false); const open = openProp !== undefined ? openProp : openState; const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState; return ( {children} ); }; export const Sidebar = ({ children, open, setOpen, animate, }: { children: React.ReactNode; open?: boolean; setOpen?: React.Dispatch>; animate?: boolean; }) => { return ( {children} ); }; export const SidebarBody = (props: React.ComponentProps) => { return ( <> )} /> ); }; export const DesktopSidebar = ({ className, children, ...props }: React.ComponentProps) => { const { open, setOpen, animate } = useSidebar(); return ( <> ); }; export const MobileSidebar = ({ className, children, ...props }: React.ComponentProps<"div">) => { const { open, setOpen } = useSidebar(); return ( <>

setOpen(!open)} />

{open && (

setOpen(!open)} >

{children} )}

); }; export const SidebarLink = ({ link, className, ...props }: { link: Links; className?: string; }) => { const { open, animate } = useSidebar(); return ( {link.icon} {link.label} ); };

Sidebar

Instalação

Dependências