sidebar

1<script setup lang="ts">
2import type { SidebarProps } from "."
3import { cn } from "@/lib/utils"
4import { Sheet, SheetContent } from "@/registry/new-york/ui/sheet"
5import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils"
6 
7defineOptions({
8  inheritAttrs: false,
9})
10 
11const props = withDefaults(defineProps<SidebarProps>(), {
12  side: "left",
13  variant: "sidebar",
14  collapsible: "offcanvas",
15})
16 
17const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
18</script>
19 
20<template>
21  <div
22    v-if="collapsible === 'none'"
23    :class="cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', props.class)"
24    v-bind="$attrs"
25  >
26    <slot />
27  </div>
28 
29  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
30    <SheetContent
31      data-sidebar="sidebar"
32      data-mobile="true"
33      :side="side"
34      class="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
35      :style="{
36        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
37      }"
38    >
39      <div class="flex h-full w-full flex-col">
40        <slot />
41      </div>
42    </SheetContent>
43  </Sheet>
44 
45  <div
46    v-else class="group peer hidden md:block"
47    :data-state="state"
48    :data-collapsible="state === 'collapsed' ? collapsible : ''"
49    :data-variant="variant"
50    :data-side="side"
51  >
52    <!-- This is what handles the sidebar gap on desktop  -->
53    <div
54      :class="cn(
55        'duration-200 relative h-svh w-(--sidebar-width) bg-transparent transition-[width] ease-linear',
56        'group-data-[collapsible=offcanvas]:w-0',
57        'group-data-[side=right]:rotate-180',
58        variant === 'floating' || variant === 'inset'
59          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
60          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
61      )"
62    />
63    <div
64      :class="cn(
65        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex',
66        side === 'left'
67          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
68          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
69        // Adjust the padding for floating and inset variants.
70        variant === 'floating' || variant === 'inset'
71          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+_2px)]'
72// … truncated