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
<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-dropdown" 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="relative inline-block" data-controller="ui--menu"><button type="button" class="inline-flex items-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! disabled:cursor-not-allowed w-full justify-start px-2 h-auto py-1.5 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0" aria-busy="false" id="ui-menu-trigger-ui-menu-77a0f381" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-77a0f381" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown"> <img src="/velvetkit/mark-light.svg" alt="" class="size-8 max-w-none shrink-0 object-contain dark:hidden"><img src="/velvetkit/mark-dark.svg" alt="" class="hidden size-8 max-w-none shrink-0 object-contain dark:block"> <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden"> <span class="truncate font-medium">VelvetKit</span> <span class="truncate text-xs text-muted-foreground">Workspace</span> </div> <i data-lucide="chevrons-up-down" class="inline-block shrink-0 w-4 h-4 ml-auto group-data-[collapsible=icon]:hidden" aria-hidden="true"></i> </button> <div id="ui-menu-content-ui-menu-77a0f381" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-56" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="right" data-align="start" tabindex="-1"> <div class="px-2 py-1.5 text-sm font-semibold text-muted-foreground">Workspaces</div> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">VelvetKit</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Marketing site</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Internal tools</button> </div> </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">Applications</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="layout-dashboard" class="inline-block shrink-0 w-4 h-4 stroke-orange-500" 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="users" class="inline-block shrink-0 w-4 h-4 stroke-purple-500" aria-hidden="true"></i> <span>Team</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-dropdown" 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">Sidebar with a dropdown menu inside the header for context switching.</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
23
24
25
26
27
28
29
30
31
32
33
<% brand = capture do %> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger(variant: :ghost, class: "w-full justify-start px-2 h-auto py-1.5 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0") do %> <img src="/velvetkit/mark-light.svg" alt="" class="size-8 max-w-none shrink-0 object-contain dark:hidden"><img src="/velvetkit/mark-dark.svg" alt="" class="hidden size-8 max-w-none shrink-0 object-contain dark:block"> <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden"> <span class="truncate font-medium">VelvetKit</span> <span class="truncate text-xs text-muted-foreground">Workspace</span> </div> <%= render(UI::Icon.new(name: "chevrons-up-down", size: :sm, class: "ml-auto group-data-[collapsible=icon]:hidden")) %> <% end %> <% menu.with_content(side: :right, align: :start, class: "w-56") do |content| %> <% content.with_label("Workspaces") %> <% content.with_item("VelvetKit") %> <% content.with_item("Marketing site") %> <% content.with_item("Internal tools") %> <% end %> <% end %><% end %><% main = capture do %> <p class="text-muted-foreground">Sidebar with a dropdown menu inside the header for context switching.</p><% end %><%= render "ui/sidebar_preview/shell", sidebar_id: "preview-sidebar-dropdown", brand: brand, main: main, groups: [ { label: "Applications", items: [ { icon: "layout-dashboard", text: "Dashboard", active: true, icon_class: "stroke-orange-500" }, { icon: "users", text: "Team", icon_class: "stroke-purple-500" } ] } ] %>No notes provided.
No params configured.