Skip to content

Commit 75eb973

Browse files
zernoniazernonia
committed
chore: build registry, add sidebar block
1 parent 64c0371 commit 75eb973

File tree

22 files changed

+1920
-263
lines changed

22 files changed

+1920
-263
lines changed

‎apps/www/src/lib/registry/default/block/Sidebar01.vue‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<script lang="ts">
2+
export const iframeHeight = '800px'
3+
export const description
4+
= 'A simple sidebar with navigation grouped by section.'
5+
</script>
6+
7+
<script setup lang="ts">
8+
import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'
9+
import { ref } from 'vue'
10+
11+
// Import components from the custom library
12+
import {
13+
Breadcrumb,
14+
BreadcrumbItem,
15+
BreadcrumbLink,
16+
BreadcrumbList,
17+
BreadcrumbPage,
18+
BreadcrumbSeparator,
19+
} from '@/lib/registry/default/ui/breadcrumb'
20+
import {
21+
DropdownMenu,
22+
DropdownMenuContent,
23+
DropdownMenuItem,
24+
DropdownMenuTrigger,
25+
} from '@/lib/registry/default/ui/dropdown-menu'
26+
import { Label } from '@/lib/registry/default/ui/label'
27+
import { Separator } from '@/lib/registry/default/ui/separator'
28+
import {
29+
Sidebar,
30+
SidebarContent,
31+
SidebarGroup,
32+
SidebarGroupContent,
33+
SidebarGroupLabel,
34+
SidebarHeader,
35+
SidebarInput,
36+
SidebarInset,
37+
SidebarMenu,
38+
SidebarMenuButton,
39+
SidebarMenuItem,
40+
SidebarProvider,
41+
SidebarRail,
42+
SidebarTrigger,
43+
} from '@/lib/registry/default/ui/sidebar'
44+
45+
const data = {
46+
versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
47+
navMain: [
48+
{
49+
title: 'Getting Started',
50+
url: '#',
51+
items: [
52+
{ title: 'Installation', url: '#' },
53+
{ title: 'Project Structure', url: '#' },
54+
],
55+
},
56+
{
57+
title: 'Building Your Application',
58+
url: '#',
59+
items: [
60+
{ title: 'Routing', url: '#' },
61+
{ title: 'Data Fetching', url: '#', isActive: true },
62+
{ title: 'Rendering', url: '#' },
63+
{ title: 'Caching', url: '#' },
64+
{ title: 'Styling', url: '#' },
65+
{ title: 'Optimizing', url: '#' },
66+
{ title: 'Configuring', url: '#' },
67+
{ title: 'Testing', url: '#' },
68+
{ title: 'Authentication', url: '#' },
69+
{ title: 'Deploying', url: '#' },
70+
{ title: 'Upgrading', url: '#' },
71+
{ title: 'Examples', url: '#' },
72+
],
73+
},
74+
{
75+
title: 'API Reference',
76+
url: '#',
77+
items: [
78+
{ title: 'Components', url: '#' },
79+
{ title: 'File Conventions', url: '#' },
80+
{ title: 'Functions', url: '#' },
81+
{ title: 'next.config.js Options', url: '#' },
82+
{ title: 'CLI', url: '#' },
83+
{ title: 'Edge Runtime', url: '#' },
84+
],
85+
},
86+
{
87+
title: 'Architecture',
88+
url: '#',
89+
items: [
90+
{ title: 'Accessibility', url: '#' },
91+
{ title: 'Fast Refresh', url: '#' },
92+
{ title: 'Next.js Compiler', url: '#' },
93+
{ title: 'Supported Browsers', url: '#' },
94+
{ title: 'Turbopack', url: '#' },
95+
],
96+
},
97+
],
98+
}
99+
100+
const selectedVersion = ref(data.versions[0])
101+
const dropdownOpen = ref(false)
102+
const search = ref('')
103+
104+
function toggleDropdown() {
105+
dropdownOpen.value = !dropdownOpen.value
106+
}
107+
108+
function setSelectedVersion(version: string) {
109+
selectedVersion.value = version
110+
}
111+
</script>
112+
113+
<template>
114+
<SidebarProvider>
115+
<Sidebar>
116+
<SidebarHeader>
117+
<SidebarMenu>
118+
<SidebarMenuItem>
119+
<DropdownMenu>
120+
<DropdownMenuTrigger as-child>
121+
<SidebarMenuButton
122+
size="lg"
123+
:class="{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }"
124+
@click="toggleDropdown"
125+
>
126+
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
127+
<GalleryVerticalEnd class="size-4" />
128+
</div>
129+
<div class="flex flex-col gap-0.5 leading-none">
130+
<span class="font-semibold">Documentation</span>
131+
<span>v{{ selectedVersion }}</span>
132+
</div>
133+
<ChevronsUpDown class="ml-auto" />
134+
</SidebarMenuButton>
135+
</DropdownMenuTrigger>
136+
<DropdownMenuContent
137+
v-if="dropdownOpen"
138+
class="w-[--radix-dropdown-menu-trigger-width]"
139+
align="start"
140+
>
141+
<DropdownMenuItem
142+
v-for="version in data.versions"
143+
:key="version"
144+
@click="setSelectedVersion(version)"
145+
>
146+
v{{ version }}
147+
<Check v-if="version === selectedVersion" class="ml-auto" />
148+
</DropdownMenuItem>
149+
</DropdownMenuContent>
150+
</DropdownMenu>
151+
</SidebarMenuItem>
152+
</SidebarMenu>
153+
154+
<form @submit.prevent>
155+
<SidebarGroup class="py-0">
156+
<SidebarGroupContent class="relative">
157+
<Label for="search" class="sr-only">Search</Label>
158+
<SidebarInput
159+
id="search"
160+
v-model="search"
161+
placeholder="Search the docs..."
162+
class="pl-8"
163+
/>
164+
<Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
165+
</SidebarGroupContent>
166+
</SidebarGroup>
167+
</form>
168+
</SidebarHeader>
169+
170+
<SidebarContent>
171+
<SidebarGroup v-for="item in data.navMain" :key="item.title">
172+
<SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>
173+
<SidebarGroupContent>
174+
<SidebarMenu>
175+
<SidebarMenuItem v-for="subItem in item.items" :key="subItem.title">
176+
<SidebarMenuButton :class="{ 'is-active': subItem.isActive }" as-child>
177+
<a :href="subItem.url">{{ subItem.title }}</a>
178+
</SidebarMenuButton>
179+
</SidebarMenuItem>
180+
</SidebarMenu>
181+
</SidebarGroupContent>
182+
</SidebarGroup>
183+
</SidebarContent>
184+
185+
<SidebarRail />
186+
</Sidebar>
187+
188+
<SidebarInset>
189+
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
190+
<SidebarTrigger class="-ml-1" />
191+
<Separator orientation="vertical" class="mr-2 h-4" />
192+
<Breadcrumb>
193+
<BreadcrumbList>
194+
<BreadcrumbItem class="hidden md:block">
195+
<BreadcrumbLink href="#">
196+
Building Your Application
197+
</BreadcrumbLink>
198+
</BreadcrumbItem>
199+
<BreadcrumbSeparator class="hidden md:block" />
200+
<BreadcrumbItem>
201+
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
202+
</BreadcrumbItem>
203+
</BreadcrumbList>
204+
</Breadcrumb>
205+
</header>
206+
207+
<div class="flex flex-1 flex-col gap-4 p-4">
208+
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
209+
<div class="aspect-video rounded-xl bg-muted/50" />
210+
<div class="aspect-video rounded-xl bg-muted/50" />
211+
<div class="aspect-video rounded-xl bg-muted/50" />
212+
</div>
213+
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
214+
</div>
215+
</SidebarInset>
216+
</SidebarProvider>
217+
</template>

0 commit comments

Comments
 (0)