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