x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<div class="relative h-[600px] overflow-hidden rounded-lg border transform-gpu"> <div data-slot="sidebar-wrapper" data-controller="ui--sidebar" style="--sidebar-width: 16rem; --sidebar-width-mobile: 18rem; --sidebar-width-icon: 3rem" class="group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex w-full min-h-full"> <aside id="preview-sidebar-groups" data-slot="sidebar" data-variant="sidebar" data-collapsible="none" data-side="left" data-state="expanded" data-ui--sidebar-target="sidebar" class="group peer text-sidebar-foreground md:block"> <div data-slot="sidebar-gap" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180 group-data-[collapsible=icon]:w-(--sidebar-width-icon)"></div> <div data-slot="sidebar-container" class="fixed inset-y-0 z-10 h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l"> <div data-sidebar="sidebar" data-slot="sidebar-inner" class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"> <div data-slot="sidebar-header" data-sidebar="sidebar" class="flex flex-col gap-2 p-2"> <div class="flex h-9 min-w-0 items-center px-2 group-data-[collapsible=icon]:px-0"> <span class="group-data-[collapsible=icon]:hidden"> <img src="/velvetkit/logo-light.svg" alt="VelvetKit" class="h-8 w-auto max-w-none dark:hidden"> <img src="/velvetkit/logo-dark.svg" alt="VelvetKit" class="hidden h-8 w-auto max-w-none dark:block"> </span> <span class="hidden size-8 shrink-0 items-center justify-center group-data-[collapsible=icon]:flex"> <img src="/velvetkit/mark-light.svg" alt="VelvetKit" class="size-7 max-w-none shrink-0 object-contain dark:hidden"> <img src="/velvetkit/mark-dark.svg" alt="VelvetKit" class="hidden size-7 max-w-none shrink-0 object-contain dark:block"> </span> </div> </div> <div data-slot="sidebar-content" data-sidebar="content" class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden"> <div data-slot="sidebar-group" data-sidebar="group" class="relative flex w-full min-w-0 flex-col p-2"> <div data-slot="sidebar-group-label" data-sidebar="group-label" class="text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0">Navigation</div> <ul data-slot="sidebar-menu" data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-1"> <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="true" aria-current="page" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md 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: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-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current 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 h-8 bg-accent" href="#"> <i data-lucide="home" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> <span>Home</span> </a> </li> <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="false" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md 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: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-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current 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 h-8" href="#"> <i data-lucide="layout-dashboard" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> <span>Dashboard</span> </a> </li> <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="false" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md 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: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-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current 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 h-8" href="#"> <i data-lucide="mail" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> <span>Messages</span> </a> </li> </ul> </div> <div data-slot="sidebar-group" data-sidebar="group" class="relative flex w-full min-w-0 flex-col p-2"> <div data-slot="sidebar-group-label" data-sidebar="group-label" class="text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0">Settings</div> <ul data-slot="sidebar-menu" data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-1"> <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="false" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md 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: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-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current 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 h-8" href="#"> <i data-lucide="settings" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> <span>General</span> </a> </li> <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="false" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md 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: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-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current 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 h-8" href="#"> <i data-lucide="shield" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> <span>Security</span> </a> </li> <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary before:opacity-0 before:transition-opacity has-[[data-active=true]]:before:opacity-100"><a data-slot="sidebar-menu-button" data-sidebar="menu-button" data-active="false" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md 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: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-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current 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 h-8" href="#"> <i data-lucide="bell" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> <span>Notifications</span> </a> </li> </ul> </div> </div> </div> </div> </aside> <main data-slot="sidebar-inset" class="bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2"> <header class="flex h-14 shrink-0 items-center gap-2 border-b px-4"> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-9 w-9 disabled:cursor-not-allowed size-7!" aria-controls="preview-sidebar-groups" aria-expanded="true" aria-label="Toggle sidebar" data-action="ui--sidebar#toggle" data-ui--sidebar-target="trigger"><i data-lucide="panel-left" class="inline-block shrink-0 w-5 h-5" aria-hidden="true"></i> </button> <span class="text-sm font-medium">Dashboard</span> </header> <div class="p-6"> <p class="text-muted-foreground">Two labelled groups sharing one sidebar.</p> </div> </main> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<% brand = render("ui/sidebar_preview/brand") %><% main = capture do %> <p class="text-muted-foreground">Two labelled groups sharing one sidebar.</p><% end %><%= render "ui/sidebar_preview/shell", sidebar_id: "preview-sidebar-groups", brand: brand, main: main, groups: [ { label: "Navigation", items: [ { icon: "home", text: "Home", active: true }, { icon: "layout-dashboard", text: "Dashboard" }, { icon: "mail", text: "Messages" } ] }, { label: "Settings", items: [ { icon: "settings", text: "General" }, { icon: "shield", text: "Security" }, { icon: "bell", text: "Notifications" } ] } ] %>No notes provided.
No params configured.