laravel inertia

2026-03-04 20:28:57 +00:00 · 2025-04-01 16:53:52 +02:00
parent 9efe4b29b9
commit 414135f8a8
244 changed files with 23258 additions and 0 deletions
--- a/laravel-inertia/resources/js/components/ui/sidebar/Sidebar.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/Sidebar.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import Sheet from '@/components/ui/sheet/Sheet.vue';
+import SheetContent from '@/components/ui/sheet/SheetContent.vue';
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<{
+        side?: 'left' | 'right';
+        variant?: 'sidebar' | 'floating' | 'inset';
+        collapsible?: 'offcanvas' | 'icon' | 'none';
+        class?: HTMLAttributes['class'];
+    }>(),
+    {
+        side: 'left',
+        variant: 'sidebar',
+        collapsible: 'offcanvas',
+    },
+);
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+</script>
+
+<template>
+    <div
+        v-if="collapsible === 'none'"
+        :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
+        v-bind="$attrs"
+    >
+        <slot />
+    </div>
+
+    <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+        <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            :side="side"
+            class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            :style="{
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            }"
+        >
+            <div class="flex h-full w-full flex-col">
+                <slot />
+            </div>
+        </SheetContent>
+    </Sheet>
+
+    <div
+        v-else
+        class="group peer hidden md:block"
+        :data-state="state"
+        :data-collapsible="state === 'collapsed' ? collapsible : ''"
+        :data-variant="variant"
+        :data-side="side"
+    >
+        <!-- This is what handles the sidebar gap on desktop  -->
+        <div
+            :class="
+                cn(
+                    'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 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
+            :class="
+                cn(
+                    'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 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',
+                    props.class,
+                )
+            "
+            v-bind="$attrs"
+        >
+            <div
+                data-sidebar="sidebar"
+                class="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"
+            >
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarContent.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div
+        data-sidebar="content"
+        :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+    >
+        <slot />
+    </div>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarFooter.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
+        <slot />
+    </div>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarGroup.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarGroup.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
+        <slot />
+    </div>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarGroupAction.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarGroupAction.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<
+    PrimitiveProps & {
+        class?: HTMLAttributes['class'];
+    }
+>();
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="group-action"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                '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',
+                // Increases the hit area of the button on mobile.
+                'after:absolute after:-inset-2 after:md:hidden',
+                'group-data-[collapsible=icon]:hidden',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Primitive>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarGroupContent.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarGroupContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
+        <slot />
+    </div>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<
+    PrimitiveProps & {
+        class?: HTMLAttributes['class'];
+    }
+>();
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="group-label"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                '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] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Primitive>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarHeader.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
+        <slot />
+    </div>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarInput.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarInput.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Input from '@/components/ui/input/Input.vue';
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <Input data-sidebar="input" :class="cn('h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring', props.class)">
+        <slot />
+    </Input>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarInset.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarInset.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <main
+        :class="
+            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-0 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </main>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenu.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenu.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <ul data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
+        <slot />
+    </ul>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuAction.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuAction.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+const props = withDefaults(
+    defineProps<
+        PrimitiveProps & {
+            showOnHover?: boolean;
+            class?: HTMLAttributes['class'];
+        }
+    >(),
+    {
+        as: 'button',
+    },
+);
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="menu-action"
+        :class="
+            cn(
+                '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',
+                // Increases the hit area of the button on mobile.
+                'after:absolute after:-inset-2 after:md:hidden',
+                'peer-data-[size=sm]/menu-button:top-1',
+                'peer-data-[size=default]/menu-button:top-1.5',
+                'peer-data-[size=lg]/menu-button:top-2.5',
+                'group-data-[collapsible=icon]:hidden',
+                showOnHover &&
+                    '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',
+                props.class,
+            )
+        "
+        :as="as"
+        :as-child="asChild"
+    >
+        <slot />
+    </Primitive>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div
+        data-sidebar="menu-badge"
+        :class="
+            cn(
+                'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
+                'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+                'peer-data-[size=sm]/menu-button:top-1',
+                'peer-data-[size=default]/menu-button:top-1.5',
+                'peer-data-[size=lg]/menu-button:top-2.5',
+                'group-data-[collapsible=icon]:hidden',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </div>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuButton.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuButton.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Tooltip from '@/components/ui/tooltip/Tooltip.vue';
+import TooltipContent from '@/components/ui/tooltip/TooltipContent.vue';
+import TooltipTrigger from '@/components/ui/tooltip/TooltipTrigger.vue';
+import { computed, type Component } from 'vue';
+import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue';
+import { useSidebar } from './utils';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<
+        SidebarMenuButtonProps & {
+            tooltip?: string | Component;
+        }
+    >(),
+    {
+        as: 'button',
+        variant: 'default',
+        size: 'default',
+    },
+);
+
+const { isMobile, state } = useSidebar();
+
+const delegatedProps = computed(() => {
+    const { tooltip, ...delegated } = props;
+    return delegated;
+});
+</script>
+
+<template>
+    <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+    </SidebarMenuButtonChild>
+
+    <Tooltip v-else>
+        <TooltipTrigger as-child>
+            <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+                <slot />
+            </SidebarMenuButtonChild>
+        </TooltipTrigger>
+        <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
+            <template v-if="typeof tooltip === 'string'">
+                {{ tooltip }}
+            </template>
+            <component :is="tooltip" v-else />
+        </TooltipContent>
+    </Tooltip>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { sidebarMenuButtonVariants, type SidebarMenuButtonVariants } from '.';
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+    variant?: SidebarMenuButtonVariants['variant'];
+    size?: SidebarMenuButtonVariants['size'];
+    isActive?: boolean;
+    class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+    as: 'button',
+    variant: 'default',
+    size: 'default',
+});
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="menu-button"
+        :data-size="size"
+        :data-active="isActive"
+        :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+        :as="as"
+        :as-child="asChild"
+        v-bind="$attrs"
+    >
+        <slot />
+    </Primitive>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuItem.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuItem.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <li data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
+        <slot />
+    </li>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Skeleton from '@/components/ui/skeleton/Skeleton.vue';
+import { cn } from '@/lib/utils';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    showIcon?: boolean;
+    class?: HTMLAttributes['class'];
+}>();
+
+const width = computed(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+});
+</script>
+
+<template>
+    <div data-sidebar="menu-skeleton" :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
+        <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+
+        <Skeleton class="h-4 max-w-[--skeleton-width] flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
+    </div>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuSub.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuSub.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <ul
+        data-sidebar="menu-badge"
+        :class="
+            cn(
+                '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',
+                'group-data-[collapsible=icon]:hidden',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </ul>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+const props = withDefaults(
+    defineProps<
+        PrimitiveProps & {
+            size?: 'sm' | 'md';
+            isActive?: boolean;
+            class?: HTMLAttributes['class'];
+        }
+    >(),
+    {
+        as: 'a',
+        size: 'md',
+    },
+);
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="menu-sub-button"
+        :as="as"
+        :as-child="asChild"
+        :data-size="size"
+        :data-active="isActive"
+        :class="
+            cn(
+                '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',
+                'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+                size === 'sm' && 'text-xs',
+                size === 'md' && 'text-sm',
+                'group-data-[collapsible=icon]:hidden',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Primitive>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <li>
+        <slot />
+    </li>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarProvider.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarProvider.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import { TooltipProvider } from 'radix-vue';
+import { computed, ref, type HTMLAttributes, type Ref } from 'vue';
+import {
+    SIDEBAR_COOKIE_MAX_AGE,
+    SIDEBAR_COOKIE_NAME,
+    SIDEBAR_KEYBOARD_SHORTCUT,
+    SIDEBAR_WIDTH,
+    SIDEBAR_WIDTH_ICON,
+    provideSidebarContext,
+} from './utils';
+
+const props = withDefaults(
+    defineProps<{
+        defaultOpen?: boolean;
+        open?: boolean;
+        class?: HTMLAttributes['class'];
+    }>(),
+    {
+        defaultOpen: true,
+        open: undefined,
+    },
+);
+
+const emits = defineEmits<{
+    'update:open': [open: boolean];
+}>();
+
+const isMobile = useMediaQuery('(max-width: 768px)');
+const openMobile = ref(false);
+
+const open = useVModel(props, 'open', emits, {
+    defaultValue: props.defaultOpen ?? false,
+    passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+function setOpen(value: boolean) {
+    open.value = value; // emits('update:open', value)
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
+
+function setOpenMobile(value: boolean) {
+    openMobile.value = value;
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+    return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+    if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+    }
+});
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
+
+provideSidebarContext({
+    state,
+    open,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar,
+});
+</script>
+
+<template>
+    <TooltipProvider :delay-duration="0">
+        <div
+            :style="{
+                '--sidebar-width': SIDEBAR_WIDTH,
+                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+            }"
+            :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+        >
+            <slot />
+        </div>
+    </TooltipProvider>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarRail.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarRail.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+import { useSidebar } from './utils';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+    <button
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        :tabindex="-1"
+        title="Toggle Sidebar"
+        :class="
+            cn(
+                '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',
+                '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+                '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+                '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+                '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+                props.class,
+            )
+        "
+        @click="toggleSidebar"
+    >
+        <slot />
+    </button>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarSeparator.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarSeparator.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Separator from '@/components/ui/separator/Separator.vue';
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <Separator data-sidebar="separator" :class="cn('mx-2 w-auto bg-sidebar-border', props.class)">
+        <slot />
+    </Separator>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/SidebarTrigger.vue
+++ b/laravel-inertia/resources/js/components/ui/sidebar/SidebarTrigger.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue';
+import { cn } from '@/lib/utils';
+import { PanelLeft } from 'lucide-vue-next';
+import type { HTMLAttributes } from 'vue';
+import { useSidebar } from './utils';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+    <Button data-sidebar="trigger" variant="ghost" size="icon" :class="cn('h-7 w-7', props.class)" @click="toggleSidebar">
+        <PanelLeft />
+        <span class="sr-only">Toggle Sidebar</span>
+    </Button>
+</template>
--- a/laravel-inertia/resources/js/components/ui/sidebar/index.ts
+++ b/laravel-inertia/resources/js/components/ui/sidebar/index.ts
@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarContent } from './SidebarContent.vue';
+export { default as SidebarFooter } from './SidebarFooter.vue';
+export { default as SidebarGroup } from './SidebarGroup.vue';
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
+export { default as SidebarHeader } from './SidebarHeader.vue';
+export { default as SidebarInput } from './SidebarInput.vue';
+export { default as SidebarInset } from './SidebarInset.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
+export { default as SidebarProvider } from './SidebarProvider.vue';
+export { default as SidebarRail } from './SidebarRail.vue';
+export { default as SidebarSeparator } from './SidebarSeparator.vue';
+export { default as SidebarTrigger } from './SidebarTrigger.vue';
+
+export { useSidebar } from './utils';
+
+export 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',
+        },
+    },
+);
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>;
--- a/laravel-inertia/resources/js/components/ui/sidebar/utils.ts
+++ b/laravel-inertia/resources/js/components/ui/sidebar/utils.ts
@@ -0,0 +1,19 @@
+import { createContext } from 'radix-vue';
+import type { ComputedRef, Ref } from 'vue';
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+    state: ComputedRef<'expanded' | 'collapsed'>;
+    open: Ref<boolean>;
+    setOpen: (value: boolean) => void;
+    isMobile: Ref<boolean>;
+    openMobile: Ref<boolean>;
+    setOpenMobile: (value: boolean) => void;
+    toggleSidebar: () => void;
+}>('Sidebar');