35 lines
14 KiB
JSON
35 lines
14 KiB
JSON
{
|
|
"name": "Sidebar09",
|
|
"type": "registry:block",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"breadcrumb",
|
|
"separator",
|
|
"sidebar",
|
|
"label",
|
|
"switch",
|
|
"avatar",
|
|
"dropdown-menu"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "block/Sidebar09/page.vue",
|
|
"content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar09/components/AppSidebar.vue'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n <SidebarProvider\n :style=\"{\n '--sidebar-width': '350px',\n }\"\n >\n <AppSidebar />\n <SidebarInset>\n <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-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 All Inboxes\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Inbox</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <div\n v-for=\"index in 24\"\n :key=\"index\"\n class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n />\n </div>\n </SidebarInset>\n </SidebarProvider>\n</template>\n",
|
|
"type": "registry:page",
|
|
"target": "pages/dashboard/index.vue"
|
|
},
|
|
{
|
|
"path": "block/Sidebar09/components/AppSidebar.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/default/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/default/ui/label'\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarHeader,\n SidebarInput,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n type SidebarProps,\n useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n user: {\n name: 'shadcn',\n email: 'm@example.com',\n avatar: '/avatars/shadcn.jpg',\n },\n navMain: [\n {\n title: 'Inbox',\n url: '#',\n icon: Inbox,\n isActive: true,\n },\n {\n title: 'Drafts',\n url: '#',\n icon: File,\n isActive: false,\n },\n {\n title: 'Sent',\n url: '#',\n icon: Send,\n isActive: false,\n },\n {\n title: 'Junk',\n url: '#',\n icon: ArchiveX,\n isActive: false,\n },\n {\n title: 'Trash',\n url: '#',\n icon: Trash2,\n isActive: false,\n },\n ],\n mails: [\n {\n name: 'William Smith',\n email: 'williamsmith@example.com',\n subject: 'Meeting Tomorrow',\n date: '09:34 AM',\n teaser:\n 'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n },\n {\n name: 'Alice Smith',\n email: 'alicesmith@example.com',\n subject: 'Re: Project Update',\n date: 'Yesterday',\n teaser:\n 'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n },\n {\n name: 'Bob Johnson',\n email: 'bobjohnson@example.com',\n subject: 'Weekend Plans',\n date: '2 days ago',\n teaser:\n 'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n },\n {\n name: 'Emily Davis',\n email: 'emilydavis@example.com',\n subject: 'Re: Question about Budget',\n date: '2 days ago',\n teaser:\n 'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n },\n {\n name: 'Michael Wilson',\n email: 'michaelwilson@example.com',\n subject: 'Important Announcement',\n date: '1 week ago',\n teaser:\n 'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n },\n {\n name: 'Sarah Brown',\n email: 'sarahbrown@example.com',\n subject: 'Re: Feedback on Proposal',\n date: '1 week ago',\n teaser:\n 'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n },\n {\n name: 'David Lee',\n email: 'davidlee@example.com',\n subject: 'New Project Idea',\n date: '1 week ago',\n teaser:\n 'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n },\n {\n name: 'Olivia Wilson',\n email: 'oliviawilson@example.com',\n subject: 'Vacation Plans',\n date: '1 week ago',\n teaser:\n 'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n },\n {\n name: 'James Martin',\n email: 'jamesmartin@example.com',\n subject: 'Re: Conference Registration',\n date: '1 week ago',\n teaser:\n 'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n },\n {\n name: 'Sophia White',\n email: 'sophiawhite@example.com',\n subject: 'Team Dinner',\n date: '1 week ago',\n teaser:\n 'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n },\n ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n <Sidebar\n class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n v-bind=\"props\"\n >\n <!-- This is the first sidebar -->\n <!-- We disable collapsible and adjust width to icon. -->\n <!-- This will make the sidebar appear as icons. -->\n <Sidebar\n collapsible=\"none\"\n class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n >\n <SidebarHeader>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n <a href=\"#\">\n <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <Command class=\"size-4\" />\n </div>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">Acme Inc</span>\n <span class=\"truncate text-xs\">Enterprise</span>\n </div>\n </a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupContent class=\"px-1.5 md:px-0\">\n <SidebarMenu>\n <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n <SidebarMenuButton\n :tooltip=\"h('div', { hidden: false }, item.title)\"\n :is-active=\"activeItem.title === item.title\"\n class=\"px-2.5 md:px-2\"\n @click=\"() => {\n activeItem = item\n const mail = data.mails.sort(() => Math.random() - 0.5)\n mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n setOpen(true)\n }\"\n >\n <component :is=\"item.icon\" />\n <span>{{ item.title }}</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarFooter>\n <NavUser :user=\"data.user\" />\n </SidebarFooter>\n </Sidebar>\n\n <!-- This is the second sidebar -->\n <!-- We disable collapsible and let it fill remaining space -->\n <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n <SidebarHeader class=\"gap-3.5 border-b p-4\">\n <div class=\"flex w-full items-center justify-between\">\n <div class=\"text-base font-medium text-foreground\">\n {{ activeItem.title }}\n </div>\n <Label class=\"flex items-center gap-2 text-sm\">\n <span>Unreads</span>\n <Switch class=\"shadow-none\" />\n </Label>\n </div>\n <SidebarInput placeholder=\"Type to search...\" />\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup class=\"px-0\">\n <SidebarGroupContent>\n <a\n v-for=\"mail in mails\"\n :key=\"mail.email\"\n href=\"#\"\n class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n >\n <div class=\"flex w-full items-center gap-2\">\n <span>{{ mail.name }}</span>\n <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n </div>\n <span class=\"font-medium\">{{ mail.subject }}</span>\n <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n {{ mail.teaser }}\n </span>\n </a>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n </Sidebar>\n </Sidebar>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar09/components/NavUser.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n user: {\n name: string\n email: string\n avatar: string\n }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\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 md:h-8 md:p-0\"\n >\n <Avatar class=\"h-8 w-8 rounded-lg\">\n <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n <AvatarFallback class=\"rounded-lg\">\n CN\n </AvatarFallback>\n </Avatar>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">{{ user.name }}</span>\n <span class=\"truncate text-xs\">{{ user.email }}</span>\n </div>\n <ChevronsUpDown class=\"ml-auto size-4\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n align=\"end\"\n :side-offset=\"4\"\n >\n <DropdownMenuLabel class=\"p-0 font-normal\">\n <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <Avatar class=\"h-8 w-8 rounded-lg\">\n <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n <AvatarFallback class=\"rounded-lg\">\n CN\n </AvatarFallback>\n </Avatar>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">{{ user.name }}</span>\n <span class=\"truncate text-xs\">{{ user.email }}</span>\n </div>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <Sparkles />\n Upgrade to Pro\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <BadgeCheck />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CreditCard />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <Bell />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <LogOut />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
}
|
|
]
|
|
}
|