my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	"use client"
#2
#3	import * as React from "react"
#4	import { Slot } from "@radix-ui/react-slot"
#5	import { VariantProps, cva } from "class-variance-authority"
#6	import { PanelLeft } from "lucide-react"
#7
#8	import { useIsMobile } from "@/hooks/use-mobile"
#9	import { cn } from "@/lib/utils"
#10	import { Button } from "@/components/ui/button"
#11	import { Input } from "@/components/ui/input"
#12	import { Separator } from "@/components/ui/separator"
#13	import { Sheet, SheetContent } from "@/components/ui/sheet"
#14	import { Skeleton } from "@/components/ui/skeleton"
#15	import {
#16	Tooltip,
#17	TooltipContent,
#18	TooltipProvider,
#19	TooltipTrigger,
#20	} from "@/components/ui/tooltip"
#21
#22	const SIDEBAR_COOKIE_NAME = "sidebar:state"
#23	const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
#24	const SIDEBAR_WIDTH = "16rem"
#25	const SIDEBAR_WIDTH_MOBILE = "18rem"
#26	const SIDEBAR_WIDTH_ICON = "3rem"
#27	const SIDEBAR_KEYBOARD_SHORTCUT = "b"
#28
#29	type SidebarContext = {
#30	state: "expanded" \| "collapsed"
#31	open: boolean
#32	setOpen: (open: boolean) => void
#33	openMobile: boolean
#34	setOpenMobile: (open: boolean) => void
#35	isMobile: boolean
#36	toggleSidebar: () => void
#37	}
#38
#39	const SidebarContext = React.createContext<SidebarContext \| null>(null)
#40
#41	function useSidebar() {
#42	const context = React.useContext(SidebarContext)
#43	if (!context) {
#44	throw new Error("useSidebar must be used within a SidebarProvider.")
#45	}
#46
#47	return context
#48	}
#49
#50	const SidebarProvider = React.forwardRef<
#51	HTMLDivElement,
#52	React.ComponentProps<"div"> & {
#53	defaultOpen?: boolean
#54	open?: boolean
#55	onOpenChange?: (open: boolean) => void
#56	}
#57	>(
#58	(
#59	{
#60	defaultOpen = true,
#61	open: openProp,
#62	onOpenChange: setOpenProp,
#63	className,
#64	style,
#65	children,
#66	...props
#67	},
#68	ref
#69	) => {
#70	const isMobile = useIsMobile()
#71	const [openMobile, setOpenMobile] = React.useState(false)
#72
#73	// This is the internal state of the sidebar.
#74	// We use openProp and setOpenProp for control from outside the component.
#75	const [_open, _setOpen] = React.useState(defaultOpen)
#76	const open = openProp ?? _open
#77	const setOpen = React.useCallback(
#78	(value: boolean \| ((value: boolean) => boolean)) => {
#79	const openState = typeof value === "function" ? value(open) : value
#80	if (setOpenProp) {
#81	setOpenProp(openState)
#82	} else {
#83	_setOpen(openState)
#84	}
#85
#86	// This sets the cookie to keep the sidebar state.
#87	document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
#88	},
#89	[setOpenProp, open]
#90	)
#91
#92	// Helper to toggle the sidebar.
#93	const toggleSidebar = React.useCallback(() => {
#94	return isMobile
#95	? setOpenMobile((open) => !open)
#96	: setOpen((open) => !open)
#97	}, [isMobile, setOpen, setOpenMobile])
#98
#99	// Adds a keyboard shortcut to toggle the sidebar.
#100	React.useEffect(() => {
#101	const handleKeyDown = (event: KeyboardEvent) => {
#102	if (
#103	event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
#104	(event.metaKey \|\| event.ctrlKey)
#105	) {
#106	event.preventDefault()
#107	toggleSidebar()
#108	}
#109	}
#110
#111	window.addEventListener("keydown", handleKeyDown)
#112	return () => window.removeEventListener("keydown", handleKeyDown)
#113	}, [toggleSidebar])
#114
#115	// We add a state so that we can do data-state="expanded" or "collapsed".
#116	// This makes it easier to style the sidebar with Tailwind classes.
#117	const state = open ? "expanded" : "collapsed"
#118
#119	const contextValue = React.useMemo<SidebarContext>(
#120	() => ({
#121	state,
#122	open,
#123	setOpen,
#124	isMobile,
#125	openMobile,
#126	setOpenMobile,
#127	toggleSidebar,
#128	}),
#129	[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
#130	)
#131
#132	return (
#133	<SidebarContext.Provider value={contextValue}>
#134	<TooltipProvider delayDuration={0}>
#135	<div
#136	style={
#137	{
#138	"--sidebar-width": SIDEBAR_WIDTH,
#139	"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
#140	...style,
#141	} as React.CSSProperties
#142	}
#143	className={cn(
#144	"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
#145	className
#146	)}
#147	ref={ref}
#148	{...props}
#149	>
#150	{children}
#151	</div>
#152	</TooltipProvider>
#153	</SidebarContext.Provider>
#154	)
#155	}
#156	)
#157	SidebarProvider.displayName = "SidebarProvider"
#158
#159	const Sidebar = React.forwardRef<
#160	HTMLDivElement,
#161	React.ComponentProps<"div"> & {
#162	side?: "left" \| "right"
#163	variant?: "sidebar" \| "floating" \| "inset"
#164	collapsible?: "offcanvas" \| "icon" \| "none"
#165	}
#166	>(
#167	(
#168	{
#169	side = "left",
#170	variant = "sidebar",
#171	collapsible = "offcanvas",
#172	className,
#173	children,
#174	...props
#175	},
#176	ref
#177	) => {
#178	const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
#179
#180	if (collapsible === "none") {
#181	return (
#182	<div
#183	className={cn(
#184	"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
#185	className
#186	)}
#187	ref={ref}
#188	{...props}
#189	>
#190	{children}
#191	</div>
#192	)
#193	}
#194
#195	if (isMobile) {
#196	return (
#197	<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
#198	<SheetContent
#199	data-sidebar="sidebar"
#200	data-mobile="true"
#201	className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
#202	style={
#203	{
#204	"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
#205	} as React.CSSProperties
#206	}
#207	side={side}
#208	>
#209	<div className="flex h-full w-full flex-col">{children}</div>
#210	</SheetContent>
#211	</Sheet>
#212	)
#213	}
#214
#215	return (
#216	<div
#217	ref={ref}
#218	className="group peer hidden md:block text-sidebar-foreground"
#219	data-state={state}
#220	data-collapsible={state === "collapsed" ? collapsible : ""}
#221	data-variant={variant}
#222	data-side={side}
#223	>
#224	{/* This is what handles the sidebar gap on desktop */}
#225	<div
#226	className={cn(
#227	"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
#228	"group-data-[collapsible=offcanvas]:w-0",
#229	"group-data-[side=right]:rotate-180",
#230	variant === "floating" \|\| variant === "inset"
#231	? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
#232	: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
#233	)}
#234	/>
#235	<div
#236	className={cn(
#237	"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
#238	side === "left"
#239	? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
#240	: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
#241	// Adjust the padding for floating and inset variants.
#242	variant === "floating" \|\| variant === "inset"
#243	? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
#244	: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
#245	className
#246	)}
#247	{...props}
#248	>
#249	<div
#250	data-sidebar="sidebar"
#251	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"
#252	>
#253	{children}
#254	</div>
#255	</div>
#256	</div>
#257	)
#258	}
#259	)
#260	Sidebar.displayName = "Sidebar"
#261
#262	const SidebarTrigger = React.forwardRef<
#263	React.ElementRef<typeof Button>,
#264	React.ComponentProps<typeof Button>
#265	>(({ className, onClick, ...props }, ref) => {
#266	const { toggleSidebar } = useSidebar()
#267
#268	return (
#269	<Button
#270	ref={ref}
#271	data-sidebar="trigger"
#272	variant="ghost"
#273	size="icon"
#274	className={cn("h-7 w-7", className)}
#275	onClick={(event) => {
#276	onClick?.(event)
#277	toggleSidebar()
#278	}}
#279	{...props}
#280	>
#281	<PanelLeft />
#282	<span className="sr-only">Toggle Sidebar</span>
#283	</Button>
#284	)
#285	})
#286	SidebarTrigger.displayName = "SidebarTrigger"
#287
#288	const SidebarRail = React.forwardRef<
#289	HTMLButtonElement,
#290	React.ComponentProps<"button">
#291	>(({ className, ...props }, ref) => {
#292	const { toggleSidebar } = useSidebar()
#293
#294	return (
#295	<button
#296	ref={ref}
#297	data-sidebar="rail"
#298	aria-label="Toggle Sidebar"
#299	tabIndex={-1}
#300	onClick={toggleSidebar}
#301	title="Toggle Sidebar"
#302	className={cn(
#303	"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
#304	"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
#305	"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
#306	"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
#307	"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
#308	"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
#309	className
#310	)}
#311	{...props}
#312	/>
#313	)
#314	})
#315	SidebarRail.displayName = "SidebarRail"
#316
#317	const SidebarInset = React.forwardRef<
#318	HTMLDivElement,
#319	React.ComponentProps<"main">
#320	>(({ className, ...props }, ref) => {
#321	return (
#322	<main
#323	ref={ref}
#324	className={cn(
#325	"relative flex min-h-svh flex-1 flex-col bg-background",
#326	"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",
#327	className
#328	)}
#329	{...props}
#330	/>
#331	)
#332	})
#333	SidebarInset.displayName = "SidebarInset"
#334
#335	const SidebarInput = React.forwardRef<
#336	React.ElementRef<typeof Input>,
#337	React.ComponentProps<typeof Input>
#338	>(({ className, ...props }, ref) => {
#339	return (
#340	<Input
#341	ref={ref}
#342	data-sidebar="input"
#343	className={cn(
#344	"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
#345	className
#346	)}
#347	{...props}
#348	/>
#349	)
#350	})
#351	SidebarInput.displayName = "SidebarInput"
#352
#353	const SidebarHeader = React.forwardRef<
#354	HTMLDivElement,
#355	React.ComponentProps<"div">
#356	>(({ className, ...props }, ref) => {
#357	return (
#358	<div
#359	ref={ref}
#360	data-sidebar="header"
#361	className={cn("flex flex-col gap-2 p-2", className)}
#362	{...props}
#363	/>
#364	)
#365	})
#366	SidebarHeader.displayName = "SidebarHeader"
#367
#368	const SidebarFooter = React.forwardRef<
#369	HTMLDivElement,
#370	React.ComponentProps<"div">
#371	>(({ className, ...props }, ref) => {
#372	return (
#373	<div
#374	ref={ref}
#375	data-sidebar="footer"
#376	className={cn("flex flex-col gap-2 p-2", className)}
#377	{...props}
#378	/>
#379	)
#380	})
#381	SidebarFooter.displayName = "SidebarFooter"
#382
#383	const SidebarSeparator = React.forwardRef<
#384	React.ElementRef<typeof Separator>,
#385	React.ComponentProps<typeof Separator>
#386	>(({ className, ...props }, ref) => {
#387	return (
#388	<Separator
#389	ref={ref}
#390	data-sidebar="separator"
#391	className={cn("mx-2 w-auto bg-sidebar-border", className)}
#392	{...props}
#393	/>
#394	)
#395	})
#396	SidebarSeparator.displayName = "SidebarSeparator"
#397
#398	const SidebarContent = React.forwardRef<
#399	HTMLDivElement,
#400	React.ComponentProps<"div">
#401	>(({ className, ...props }, ref) => {
#402	return (
#403	<div
#404	ref={ref}
#405	data-sidebar="content"
#406	className={cn(
#407	"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
#408	className
#409	)}
#410	{...props}
#411	/>
#412	)
#413	})
#414	SidebarContent.displayName = "SidebarContent"
#415
#416	const SidebarGroup = React.forwardRef<
#417	HTMLDivElement,
#418	React.ComponentProps<"div">
#419	>(({ className, ...props }, ref) => {
#420	return (
#421	<div
#422	ref={ref}
#423	data-sidebar="group"
#424	className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
#425	{...props}
#426	/>
#427	)
#428	})
#429	SidebarGroup.displayName = "SidebarGroup"
#430
#431	const SidebarGroupLabel = React.forwardRef<
#432	HTMLDivElement,
#433	React.ComponentProps<"div"> & { asChild?: boolean }
#434	>(({ className, asChild = false, ...props }, ref) => {
#435	const Comp = asChild ? Slot : "div"
#436
#437	return (
#438	<Comp
#439	ref={ref}
#440	data-sidebar="group-label"
#441	className={cn(
#442	"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",
#443	"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
#444	className
#445	)}
#446	{...props}
#447	/>
#448	)
#449	})
#450	SidebarGroupLabel.displayName = "SidebarGroupLabel"
#451
#452	const SidebarGroupAction = React.forwardRef<
#453	HTMLButtonElement,
#454	React.ComponentProps<"button"> & { asChild?: boolean }
#455	>(({ className, asChild = false, ...props }, ref) => {
#456	const Comp = asChild ? Slot : "button"
#457
#458	return (
#459	<Comp
#460	ref={ref}
#461	data-sidebar="group-action"
#462	className={cn(
#463	"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
#464	// Increases the hit area of the button on mobile.
#465	"after:absolute after:-inset-2 after:md:hidden",
#466	"group-data-[collapsible=icon]:hidden",
#467	className
#468	)}
#469	{...props}
#470	/>
#471	)
#472	})
#473	SidebarGroupAction.displayName = "SidebarGroupAction"
#474
#475	const SidebarGroupContent = React.forwardRef<
#476	HTMLDivElement,
#477	React.ComponentProps<"div">
#478	>(({ className, ...props }, ref) => (
#479	<div
#480	ref={ref}
#481	data-sidebar="group-content"
#482	className={cn("w-full text-sm", className)}
#483	{...props}
#484	/>
#485	))
#486	SidebarGroupContent.displayName = "SidebarGroupContent"
#487
#488	const SidebarMenu = React.forwardRef<
#489	HTMLUListElement,
#490	React.ComponentProps<"ul">
#491	>(({ className, ...props }, ref) => (
#492	<ul
#493	ref={ref}
#494	data-sidebar="menu"
#495	className={cn("flex w-full min-w-0 flex-col gap-1", className)}
#496	{...props}
#497	/>
#498	))
#499	SidebarMenu.displayName = "SidebarMenu"
#500
#501	const SidebarMenuItem = React.forwardRef<
#502	HTMLLIElement,
#503	React.ComponentProps<"li">
#504	>(({ className, ...props }, ref) => (
#505	<li
#506	ref={ref}
#507	data-sidebar="menu-item"
#508	className={cn("group/menu-item relative", className)}
#509	{...props}
#510	/>
#511	))
#512	SidebarMenuItem.displayName = "SidebarMenuItem"
#513
#514	const sidebarMenuButtonVariants = cva(
#515	"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",
#516	{
#517	variants: {
#518	variant: {
#519	default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
#520	outline:
#521	"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))]",
#522	},
#523	size: {
#524	default: "h-8 text-sm",
#525	sm: "h-7 text-xs",
#526	lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
#527	},
#528	},
#529	defaultVariants: {
#530	variant: "default",
#531	size: "default",
#532	},
#533	}
#534	)
#535
#536	const SidebarMenuButton = React.forwardRef<
#537	HTMLButtonElement,
#538	React.ComponentProps<"button"> & {
#539	asChild?: boolean
#540	isActive?: boolean
#541	tooltip?: string \| React.ComponentProps<typeof TooltipContent>
#542	} & VariantProps<typeof sidebarMenuButtonVariants>
#543	>(
#544	(
#545	{
#546	asChild = false,
#547	isActive = false,
#548	variant = "default",
#549	size = "default",
#550	tooltip,
#551	className,
#552	...props
#553	},
#554	ref
#555	) => {
#556	const Comp = asChild ? Slot : "button"
#557	const { isMobile, state } = useSidebar()
#558
#559	const button = (
#560	<Comp
#561	ref={ref}
#562	data-sidebar="menu-button"
#563	data-size={size}
#564	data-active={isActive}
#565	className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
#566	{...props}
#567	/>
#568	)
#569
#570	if (!tooltip) {
#571	return button
#572	}
#573
#574	if (typeof tooltip === "string") {
#575	tooltip = {
#576	children: tooltip,
#577	}
#578	}
#579
#580	return (
#581	<Tooltip>
#582	<TooltipTrigger asChild>{button}</TooltipTrigger>
#583	<TooltipContent
#584	side="right"
#585	align="center"
#586	hidden={state !== "collapsed" \|\| isMobile}
#587	{...tooltip}
#588	/>
#589	</Tooltip>
#590	)
#591	}
#592	)
#593	SidebarMenuButton.displayName = "SidebarMenuButton"
#594
#595	const SidebarMenuAction = React.forwardRef<
#596	HTMLButtonElement,
#597	React.ComponentProps<"button"> & {
#598	asChild?: boolean
#599	showOnHover?: boolean
#600	}
#601	>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
#602	const Comp = asChild ? Slot : "button"
#603
#604	return (
#605	<Comp
#606	ref={ref}
#607	data-sidebar="menu-action"
#608	className={cn(
#609	"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
#610	// Increases the hit area of the button on mobile.
#611	"after:absolute after:-inset-2 after:md:hidden",
#612	"peer-data-[size=sm]/menu-button:top-1",
#613	"peer-data-[size=default]/menu-button:top-1.5",
#614	"peer-data-[size=lg]/menu-button:top-2.5",
#615	"group-data-[collapsible=icon]:hidden",
#616	showOnHover &&
#617	"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
#618	className
#619	)}
#620	{...props}
#621	/>
#622	)
#623	})
#624	SidebarMenuAction.displayName = "SidebarMenuAction"
#625
#626	const SidebarMenuBadge = React.forwardRef<
#627	HTMLDivElement,
#628	React.ComponentProps<"div">
#629	>(({ className, ...props }, ref) => (
#630	<div
#631	ref={ref}
#632	data-sidebar="menu-badge"
#633	className={cn(
#634	"absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
#635	"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
#636	"peer-data-[size=sm]/menu-button:top-1",
#637	"peer-data-[size=default]/menu-button:top-1.5",
#638	"peer-data-[size=lg]/menu-button:top-2.5",
#639	"group-data-[collapsible=icon]:hidden",
#640	className
#641	)}
#642	{...props}
#643	/>
#644	))
#645	SidebarMenuBadge.displayName = "SidebarMenuBadge"
#646
#647	const SidebarMenuSkeleton = React.forwardRef<
#648	HTMLDivElement,
#649	React.ComponentProps<"div"> & {
#650	showIcon?: boolean
#651	}
#652	>(({ className, showIcon = false, ...props }, ref) => {
#653	// Random width between 50 to 90%.
#654	const width = React.useMemo(() => {
#655	return `${Math.floor(Math.random() * 40) + 50}%`
#656	}, [])
#657
#658	return (
#659	<div
#660	ref={ref}
#661	data-sidebar="menu-skeleton"
#662	className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
#663	{...props}
#664	>
#665	{showIcon && (
#666	<Skeleton
#667	className="size-4 rounded-md"
#668	data-sidebar="menu-skeleton-icon"
#669	/>
#670	)}
#671	<Skeleton
#672	className="h-4 flex-1 max-w-[--skeleton-width]"
#673	data-sidebar="menu-skeleton-text"
#674	style={
#675	{
#676	"--skeleton-width": width,
#677	} as React.CSSProperties
#678	}
#679	/>
#680	</div>
#681	)
#682	})
#683	SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
#684
#685	const SidebarMenuSub = React.forwardRef<
#686	HTMLUListElement,
#687	React.ComponentProps<"ul">
#688	>(({ className, ...props }, ref) => (
#689	<ul
#690	ref={ref}
#691	data-sidebar="menu-sub"
#692	className={cn(
#693	"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
#694	"group-data-[collapsible=icon]:hidden",
#695	className
#696	)}
#697	{...props}
#698	/>
#699	))
#700	SidebarMenuSub.displayName = "SidebarMenuSub"
#701
#702	const SidebarMenuSubItem = React.forwardRef<
#703	HTMLLIElement,
#704	React.ComponentProps<"li">
#705	>(({ ...props }, ref) => <li ref={ref} {...props} />)
#706	SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
#707
#708	const SidebarMenuSubButton = React.forwardRef<
#709	HTMLAnchorElement,
#710	React.ComponentProps<"a"> & {
#711	asChild?: boolean
#712	size?: "sm" \| "md"
#713	isActive?: boolean
#714	}
#715	>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
#716	const Comp = asChild ? Slot : "a"
#717
#718	return (
#719	<Comp
#720	ref={ref}
#721	data-sidebar="menu-sub-button"
#722	data-size={size}
#723	data-active={isActive}
#724	className={cn(
#725	"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
#726	"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
#727	size === "sm" && "text-xs",
#728	size === "md" && "text-sm",
#729	"group-data-[collapsible=icon]:hidden",
#730	className
#731	)}
#732	{...props}
#733	/>
#734	)
#735	})
#736	SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
#737
#738	export {
#739	Sidebar,
#740	SidebarContent,
#741	SidebarFooter,
#742	SidebarGroup,
#743	SidebarGroupAction,
#744	SidebarGroupContent,
#745	SidebarGroupLabel,
#746	SidebarHeader,
#747	SidebarInput,
#748	SidebarInset,
#749	SidebarMenu,
#750	SidebarMenuAction,
#751	SidebarMenuBadge,
#752	SidebarMenuButton,
#753	SidebarMenuItem,
#754	SidebarMenuSkeleton,
#755	SidebarMenuSub,
#756	SidebarMenuSubButton,
#757	SidebarMenuSubItem,
#758	SidebarProvider,
#759	SidebarRail,
#760	SidebarSeparator,
#761	SidebarTrigger,
#762	useSidebar,
#763	}
#764

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public