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
<nav aria-label="Documentation" class="w-56 text-sm"> <details open="open" class="group/collapsible [interpolate-size:allow-keywords] [&::details-content]:[block-size:0] [&::details-content]:overflow-hidden [&::details-content]:transition-[block-size,content-visibility] [&::details-content]:duration-200 [&::details-content]:[transition-behavior:allow-discrete] open:[&::details-content]:[block-size:auto] motion-reduce:[&::details-content]:transition-none"> <summary class="flex w-full cursor-pointer list-none items-center gap-2 rounded-md [&::-webkit-details-marker]:hidden transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background px-3 py-1.5 text-sm font-medium hover:bg-accent"> <span class="min-w-0 flex-1 truncate">Forms</span> <i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-open/collapsible:rotate-90 motion-reduce:transition-none" aria-hidden="true"></i> </summary> <div class="pt-1 ml-3 space-y-0.5 border-l pl-2"> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Input</a> <a href="#" aria-current="page" class="block rounded-md bg-primary/10 px-3 py-1.5 font-medium text-primary">Textarea</a> <details class="group/collapsible [interpolate-size:allow-keywords] [&::details-content]:[block-size:0] [&::details-content]:overflow-hidden [&::details-content]:transition-[block-size,content-visibility] [&::details-content]:duration-200 [&::details-content]:[transition-behavior:allow-discrete] open:[&::details-content]:[block-size:auto] motion-reduce:[&::details-content]:transition-none"> <summary class="flex w-full cursor-pointer list-none items-center gap-2 rounded-md [&::-webkit-details-marker]:hidden transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"> <span class="min-w-0 flex-1 truncate">Choices</span> <i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-open/collapsible:rotate-90 motion-reduce:transition-none" aria-hidden="true"></i> </summary> <div class="pt-1 ml-3 space-y-0.5 border-l pl-2"> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Select</a> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Checkbox</a> </div> </details> </div> </details> <details class="group/collapsible [interpolate-size:allow-keywords] [&::details-content]:[block-size:0] [&::details-content]:overflow-hidden [&::details-content]:transition-[block-size,content-visibility] [&::details-content]:duration-200 [&::details-content]:[transition-behavior:allow-discrete] open:[&::details-content]:[block-size:auto] motion-reduce:[&::details-content]:transition-none"> <summary class="flex w-full cursor-pointer list-none items-center gap-2 rounded-md [&::-webkit-details-marker]:hidden transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background px-3 py-1.5 text-sm font-medium hover:bg-accent"> <span class="min-w-0 flex-1 truncate">Overlays</span> <i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-open/collapsible:rotate-90 motion-reduce:transition-none" aria-hidden="true"></i> </summary> <div class="pt-1 ml-3 space-y-0.5 border-l pl-2"> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Dialog</a> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Sheet</a> </div> </details></nav>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%# A sidebar tree: branches open on click, and the one holding the current page starts open. %><nav aria-label="Documentation" class="w-56 text-sm"> <%= render(UI::Collapsible.new(open: true, trigger_class: "font-medium hover:bg-accent", content_class: "ml-3 space-y-0.5 border-l pl-2")) do |c| %> <% c.with_trigger { "Forms" } %> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Input</a> <a href="#" aria-current="page" class="block rounded-md bg-primary/10 px-3 py-1.5 font-medium text-primary">Textarea</a> <%= render(UI::Collapsible.new(trigger_class: "text-muted-foreground hover:bg-accent hover:text-foreground", content_class: "ml-3 space-y-0.5 border-l pl-2")) do |inner| %> <% inner.with_trigger { "Choices" } %> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Select</a> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Checkbox</a> <% end %> <% end %> <%= render(UI::Collapsible.new(trigger_class: "font-medium hover:bg-accent", content_class: "ml-3 space-y-0.5 border-l pl-2")) do |c| %> <% c.with_trigger { "Overlays" } %> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Dialog</a> <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Sheet</a> <% end %></nav>No notes provided.
No params configured.