21 lines
7.4 KiB
JSON
21 lines
7.4 KiB
JSON
{
|
|
"name": "Sidebar01",
|
|
"type": "registry:block",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"breadcrumb",
|
|
"dropdown-menu",
|
|
"label",
|
|
"separator",
|
|
"sidebar"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "block/Sidebar01/page.vue",
|
|
"content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarProvider,\n SidebarRail,\n SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n navMain: [\n {\n title: 'Getting Started',\n url: '#',\n items: [\n { title: 'Installation', url: '#' },\n { title: 'Project Structure', url: '#' },\n ],\n },\n {\n title: 'Building Your Application',\n url: '#',\n items: [\n { title: 'Routing', url: '#' },\n { title: 'Data Fetching', url: '#', isActive: true },\n { title: 'Rendering', url: '#' },\n { title: 'Caching', url: '#' },\n { title: 'Styling', url: '#' },\n { title: 'Optimizing', url: '#' },\n { title: 'Configuring', url: '#' },\n { title: 'Testing', url: '#' },\n { title: 'Authentication', url: '#' },\n { title: 'Deploying', url: '#' },\n { title: 'Upgrading', url: '#' },\n { title: 'Examples', url: '#' },\n ],\n },\n {\n title: 'API Reference',\n url: '#',\n items: [\n { title: 'Components', url: '#' },\n { title: 'File Conventions', url: '#' },\n { title: 'Functions', url: '#' },\n { title: 'next.config.js Options', url: '#' },\n { title: 'CLI', url: '#' },\n { title: 'Edge Runtime', url: '#' },\n ],\n },\n {\n title: 'Architecture',\n url: '#',\n items: [\n { title: 'Accessibility', url: '#' },\n { title: 'Fast Refresh', url: '#' },\n { title: 'Next.js Compiler', url: '#' },\n { title: 'Supported Browsers', url: '#' },\n { title: 'Turbopack', url: '#' },\n ],\n },\n ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n selectedVersion.value = version\n}\n</script>\n\n<template>\n <SidebarProvider>\n <Sidebar>\n <SidebarHeader>\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton\n size=\"lg\"\n :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n @click=\"toggleDropdown\"\n >\n <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <GalleryVerticalEnd class=\"size-4\" />\n </div>\n <div class=\"flex flex-col gap-0.5 leading-none\">\n <span class=\"font-semibold\">Documentation</span>\n <span>v{{ selectedVersion }}</span>\n </div>\n <ChevronsUpDown class=\"ml-auto\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n v-if=\"dropdownOpen\"\n class=\"w-[--reka-dropdown-menu-trigger-width]\"\n align=\"start\"\n >\n <DropdownMenuItem\n v-for=\"version in data.versions\"\n :key=\"version\"\n @click=\"setSelectedVersion(version)\"\n >\n v{{ version }}\n <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n\n <form @submit.prevent>\n <SidebarGroup class=\"py-0\">\n <SidebarGroupContent class=\"relative\">\n <Label for=\"search\" class=\"sr-only\">Search</Label>\n <SidebarInput\n id=\"search\"\n v-model=\"search\"\n placeholder=\"Search the docs...\"\n class=\"pl-8\"\n />\n <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n </SidebarGroupContent>\n </SidebarGroup>\n </form>\n </SidebarHeader>\n\n <SidebarContent>\n <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n <a :href=\"subItem.url\">{{ subItem.title }}</a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n\n <SidebarRail />\n </Sidebar>\n\n <SidebarInset>\n <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger class=\"-ml-1\" />\n <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n Building Your Application\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n </div>\n <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n</template>\n",
|
|
"type": "registry:page",
|
|
"target": "pages/dashboard/index.vue"
|
|
}
|
|
]
|
|
}
|