{
  "name": "sidebar-14",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "breadcrumb",
    "sidebar"
  ],
  "files": [
    {
      "path": "blocks/sidebar-14/components/AppSidebar.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-14/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from \"@/components/ui/sidebar\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/components/ui/sidebar\"\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-14/page.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-14/page.vue",
      "content": "<script lang=\"ts\">\nexport const iframeHeight = \"800px\"\nexport const description = \"A sidebar on the right.\"\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from \"./components/AppSidebar.vue\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-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        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\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=\"bg-muted/50 aspect-video rounded-xl\" />\n          <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n          <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n        </div>\n        <div class=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n      </div>\n    </SidebarInset>\n    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n"
    }
  ]
}