342 lines
12 KiB
TypeScript
342 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Slot } from "@radix-ui/react-slot"
|
|
import { type VariantProps, cva } from "class-variance-authority"
|
|
import { ChevronRight, PanelLeft } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { Sheet, SheetContent } from "@/components/ui/sheet"
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
|
|
|
import { useSidebar } from "@/components/sidebar-provider"
|
|
|
|
const Sidebar = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.ComponentProps<"div"> & {
|
|
side?: "left" | "right"
|
|
variant?: "sidebar" | "floating" | "inset"
|
|
collapsible?: "offcanvas" | "icon" | "none"
|
|
}
|
|
>(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
|
|
const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar()
|
|
|
|
if (collapsible === "none") {
|
|
return (
|
|
<div
|
|
className={cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)}
|
|
ref={ref}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
|
<SheetContent
|
|
data-sidebar="sidebar"
|
|
data-mobile="true"
|
|
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
|
style={
|
|
{
|
|
"--sidebar-width": "18rem",
|
|
} as React.CSSProperties
|
|
}
|
|
side={side}
|
|
>
|
|
<div className="flex h-full w-full flex-col">{children}</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="group peer hidden md:block text-sidebar-foreground"
|
|
data-state={state}
|
|
data-collapsible={state === "collapsed" ? collapsible : ""}
|
|
data-variant={variant}
|
|
data-side={side}
|
|
>
|
|
{/* This is what handles the sidebar gap on desktop */}
|
|
<div
|
|
className={cn(
|
|
"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
|
|
"group-data-[collapsible=offcanvas]:w-0",
|
|
"group-data-[side=right]:rotate-180",
|
|
variant === "floating" || variant === "inset"
|
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
|
|
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
|
|
)}
|
|
/>
|
|
<div
|
|
className={cn(
|
|
"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
|
|
side === "left"
|
|
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
|
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
// Adjust the padding for floating and inset variants.
|
|
variant === "floating" || variant === "inset"
|
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
|
|
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<div
|
|
data-sidebar="sidebar"
|
|
className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
|
|
>
|
|
{children}
|
|
</div>
|
|
|
|
{/* Expand indicator and clickable area when sidebar is collapsed */}
|
|
{state === "collapsed" && (
|
|
<>
|
|
{/* Wider clickable area along the entire edge */}
|
|
<div
|
|
onClick={toggleSidebar}
|
|
className={cn(
|
|
"absolute inset-y-0 w-6 cursor-pointer transition-colors hover:bg-primary/10",
|
|
side === "left" ? "left-full" : "right-full",
|
|
)}
|
|
aria-label="Expand sidebar"
|
|
/>
|
|
|
|
{/* Visual indicator */}
|
|
<div
|
|
onClick={toggleSidebar}
|
|
className={cn(
|
|
"absolute flex h-24 w-6 items-center justify-center rounded-r-md bg-primary/10 opacity-0 shadow-sm transition-opacity duration-200 hover:opacity-100 focus:opacity-100 group-hover:opacity-80",
|
|
side === "left" ? "left-full top-20" : "right-full top-20",
|
|
)}
|
|
>
|
|
<ChevronRight className={cn("h-4 w-4 text-primary", side === "right" && "rotate-180")} />
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
Sidebar.displayName = "Sidebar"
|
|
|
|
const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
|
|
({ className, onClick, ...props }, ref) => {
|
|
const { toggleSidebar, state } = useSidebar()
|
|
|
|
return (
|
|
<Button
|
|
ref={ref}
|
|
data-sidebar="trigger"
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn(
|
|
"h-7 w-7 transition-transform duration-200",
|
|
state === "collapsed" ? "rotate-180" : "",
|
|
className,
|
|
)}
|
|
onClick={(event) => {
|
|
onClick?.(event)
|
|
toggleSidebar()
|
|
}}
|
|
{...props}
|
|
>
|
|
<PanelLeft />
|
|
<span className="sr-only">Toggle Sidebar</span>
|
|
</Button>
|
|
)
|
|
},
|
|
)
|
|
SidebarTrigger.displayName = "SidebarTrigger"
|
|
|
|
const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
|
|
return <div ref={ref} data-sidebar="header" className={cn("flex flex-col gap-2 p-2", className)} {...props} />
|
|
})
|
|
SidebarHeader.displayName = "SidebarHeader"
|
|
|
|
const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
|
|
return <div ref={ref} data-sidebar="footer" className={cn("flex flex-col gap-2 p-2", className)} {...props} />
|
|
})
|
|
SidebarFooter.displayName = "SidebarFooter"
|
|
|
|
const SidebarSeparator = React.forwardRef<React.ElementRef<typeof Separator>, React.ComponentProps<typeof Separator>>(
|
|
({ className, ...props }, ref) => {
|
|
return (
|
|
<Separator
|
|
ref={ref}
|
|
data-sidebar="separator"
|
|
className={cn("mx-2 w-auto bg-sidebar-border", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
},
|
|
)
|
|
SidebarSeparator.displayName = "SidebarSeparator"
|
|
|
|
const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
data-sidebar="content"
|
|
className={cn(
|
|
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
SidebarContent.displayName = "SidebarContent"
|
|
|
|
const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
data-sidebar="group"
|
|
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
SidebarGroup.displayName = "SidebarGroup"
|
|
|
|
const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<"div"> & { asChild?: boolean }>(
|
|
({ className, asChild = false, ...props }, ref) => {
|
|
const Comp = asChild ? Slot : "div"
|
|
|
|
return (
|
|
<Comp
|
|
ref={ref}
|
|
data-sidebar="group-label"
|
|
className={cn(
|
|
"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
},
|
|
)
|
|
SidebarGroupLabel.displayName = "SidebarGroupLabel"
|
|
|
|
const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
|
|
({ className, ...props }, ref) => (
|
|
<div ref={ref} data-sidebar="group-content" className={cn("w-full text-sm", className)} {...props} />
|
|
),
|
|
)
|
|
SidebarGroupContent.displayName = "SidebarGroupContent"
|
|
|
|
const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => (
|
|
<ul ref={ref} data-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />
|
|
))
|
|
SidebarMenu.displayName = "SidebarMenu"
|
|
|
|
const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
|
|
<li ref={ref} data-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props} />
|
|
))
|
|
SidebarMenuItem.displayName = "SidebarMenuItem"
|
|
|
|
const sidebarMenuButtonVariants = cva(
|
|
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
outline:
|
|
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
|
},
|
|
size: {
|
|
default: "h-8 text-sm",
|
|
sm: "h-7 text-xs",
|
|
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
},
|
|
},
|
|
)
|
|
|
|
const SidebarMenuButton = React.forwardRef<
|
|
HTMLButtonElement,
|
|
React.ComponentProps<"button"> & {
|
|
asChild?: boolean
|
|
isActive?: boolean
|
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
|
} & VariantProps<typeof sidebarMenuButtonVariants>
|
|
>(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
|
|
const Comp = asChild ? Slot : "button"
|
|
const { isMobile, state } = useSidebar()
|
|
|
|
const button = (
|
|
<Comp
|
|
ref={ref}
|
|
data-sidebar="menu-button"
|
|
data-size={size}
|
|
data-active={isActive}
|
|
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
|
|
if (!tooltip) {
|
|
return button
|
|
}
|
|
|
|
if (typeof tooltip === "string") {
|
|
tooltip = {
|
|
children: tooltip,
|
|
}
|
|
}
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
|
<TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
)
|
|
})
|
|
SidebarMenuButton.displayName = "SidebarMenuButton"
|
|
|
|
const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(({ className, ...props }, ref) => {
|
|
return (
|
|
<main
|
|
ref={ref}
|
|
className={cn(
|
|
"relative flex min-h-svh flex-1 flex-col bg-background",
|
|
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
SidebarInset.displayName = "SidebarInset"
|
|
|
|
export {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarInset,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarSeparator,
|
|
SidebarTrigger,
|
|
}
|
|
|