464 lines
14 KiB
Vue
464 lines
14 KiB
Vue
<script lang="ts">
|
|
export const description
|
|
= 'A sidebar that collapses to icons.'
|
|
export const iframeHeight = '800px'
|
|
export const containerClass = 'w-full h-full'
|
|
</script>
|
|
|
|
<script setup lang=ts>
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from '@/lib/registry/default/ui/avatar'
|
|
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from '@/lib/registry/default/ui/breadcrumb'
|
|
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from '@/lib/registry/default/ui/collapsible'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuTrigger,
|
|
} from '@/lib/registry/default/ui/dropdown-menu'
|
|
import { Separator } from '@/lib/registry/default/ui/separator'
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarInset,
|
|
SidebarMenu,
|
|
SidebarMenuAction,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
SidebarProvider,
|
|
SidebarRail,
|
|
SidebarTrigger,
|
|
} from '@/lib/registry/default/ui/sidebar'
|
|
import {
|
|
AudioWaveform,
|
|
BadgeCheck,
|
|
Bell,
|
|
BookOpen,
|
|
Bot,
|
|
ChevronRight,
|
|
ChevronsUpDown,
|
|
Command,
|
|
CreditCard,
|
|
Folder,
|
|
Forward,
|
|
Frame,
|
|
GalleryVerticalEnd,
|
|
LogOut,
|
|
Map,
|
|
MoreHorizontal,
|
|
PieChart,
|
|
Plus,
|
|
Settings2,
|
|
Sparkles,
|
|
SquareTerminal,
|
|
Trash2,
|
|
} from 'lucide-vue-next'
|
|
import { ref } from 'vue'
|
|
|
|
// This is sample data.
|
|
const data = {
|
|
user: {
|
|
name: 'shadcn',
|
|
email: 'm@example.com',
|
|
avatar: '/avatars/shadcn.jpg',
|
|
},
|
|
teams: [
|
|
{
|
|
name: 'Acme Inc',
|
|
logo: GalleryVerticalEnd,
|
|
plan: 'Enterprise',
|
|
},
|
|
{
|
|
name: 'Acme Corp.',
|
|
logo: AudioWaveform,
|
|
plan: 'Startup',
|
|
},
|
|
{
|
|
name: 'Evil Corp.',
|
|
logo: Command,
|
|
plan: 'Free',
|
|
},
|
|
],
|
|
navMain: [
|
|
{
|
|
title: 'Playground',
|
|
url: '#',
|
|
icon: SquareTerminal,
|
|
isActive: true,
|
|
items: [
|
|
{
|
|
title: 'History',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Starred',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Settings',
|
|
url: '#',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Models',
|
|
url: '#',
|
|
icon: Bot,
|
|
items: [
|
|
{
|
|
title: 'Genesis',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Explorer',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Quantum',
|
|
url: '#',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Documentation',
|
|
url: '#',
|
|
icon: BookOpen,
|
|
items: [
|
|
{
|
|
title: 'Introduction',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Get Started',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Tutorials',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Changelog',
|
|
url: '#',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Settings',
|
|
url: '#',
|
|
icon: Settings2,
|
|
items: [
|
|
{
|
|
title: 'General',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Team',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Billing',
|
|
url: '#',
|
|
},
|
|
{
|
|
title: 'Limits',
|
|
url: '#',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
projects: [
|
|
{
|
|
name: 'Design Engineering',
|
|
url: '#',
|
|
icon: Frame,
|
|
},
|
|
{
|
|
name: 'Sales & Marketing',
|
|
url: '#',
|
|
icon: PieChart,
|
|
},
|
|
{
|
|
name: 'Travel',
|
|
url: '#',
|
|
icon: Map,
|
|
},
|
|
],
|
|
}
|
|
|
|
const activeTeam = ref(data.teams[0])
|
|
|
|
function setActiveTeam(team: typeof data.teams[number]) {
|
|
activeTeam.value = team
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarProvider>
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
>
|
|
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
|
<component :is="activeTeam.logo" class="size-4" />
|
|
</div>
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-semibold">{{ activeTeam.name }}</span>
|
|
<span class="truncate text-xs">{{ activeTeam.plan }}</span>
|
|
</div>
|
|
<ChevronsUpDown class="ml-auto" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
|
align="start"
|
|
side="bottom"
|
|
:side-offset="4"
|
|
>
|
|
<DropdownMenuLabel class="text-xs text-muted-foreground">
|
|
Teams
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
v-for="(team, index) in data.teams"
|
|
:key="team.name"
|
|
class="gap-2 p-2"
|
|
@click="setActiveTeam(team)"
|
|
>
|
|
<div class="flex size-6 items-center justify-center rounded-sm border">
|
|
<component :is="team.logo" class="size-4 shrink-0" />
|
|
</div>
|
|
{{ team.name }}
|
|
<DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem class="gap-2 p-2">
|
|
<div class="flex size-6 items-center justify-center rounded-md border bg-background">
|
|
<Plus class="size-4" />
|
|
</div>
|
|
<div class="font-medium text-muted-foreground">
|
|
Add team
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Platform</SidebarGroupLabel>
|
|
<SidebarMenu>
|
|
<Collapsible
|
|
v-for="item in data.navMain"
|
|
:key="item.title"
|
|
as-child
|
|
:default-open="item.isActive"
|
|
class="group/collapsible"
|
|
>
|
|
<SidebarMenuItem>
|
|
<CollapsibleTrigger as-child>
|
|
<SidebarMenuButton :tooltip="item.title">
|
|
<component :is="item.icon" />
|
|
<span>{{ item.title }}</span>
|
|
<ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
|
|
</SidebarMenuButton>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub>
|
|
<SidebarMenuSubItem
|
|
v-for="subItem in item.items"
|
|
:key="subItem.title"
|
|
>
|
|
<SidebarMenuSubButton as-child>
|
|
<a :href="subItem.url">
|
|
<span>{{ subItem.title }}</span>
|
|
</a>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
<SidebarGroup class="group-data-[collapsible=icon]:hidden">
|
|
<SidebarGroupLabel>Projects</SidebarGroupLabel>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem
|
|
v-for="item in data.projects"
|
|
:key="item.name"
|
|
>
|
|
<SidebarMenuButton as-child>
|
|
<a :href="item.url">
|
|
<component :is="item.icon" />
|
|
<span>{{ item.name }}</span>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SidebarMenuAction show-on-hover>
|
|
<MoreHorizontal />
|
|
<span class="sr-only">More</span>
|
|
</SidebarMenuAction>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="w-48 rounded-lg" side="bottom" align="end">
|
|
<DropdownMenuItem>
|
|
<Folder class="text-muted-foreground" />
|
|
<span>View Project</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Forward class="text-muted-foreground" />
|
|
<span>Share Project</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<Trash2 class="text-muted-foreground" />
|
|
<span>Delete Project</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton class="text-sidebar-foreground/70">
|
|
<MoreHorizontal class="text-sidebar-foreground/70" />
|
|
<span>More</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
>
|
|
<Avatar class="h-8 w-8 rounded-lg">
|
|
<AvatarImage :src="data.user.avatar" :alt="data.user.name" />
|
|
<AvatarFallback class="rounded-lg">
|
|
CN
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-semibold">{{ data.user.name }}</span>
|
|
<span class="truncate text-xs">{{ data.user.email }}</span>
|
|
</div>
|
|
<ChevronsUpDown class="ml-auto size-4" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
|
|
<DropdownMenuLabel class="p-0 font-normal">
|
|
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
|
<Avatar class="h-8 w-8 rounded-lg">
|
|
<AvatarImage :src="data.user.avatar" :alt="data.user.name" />
|
|
<AvatarFallback class="rounded-lg">
|
|
CN
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-semibold">{{ data.user.name }}</span>
|
|
<span class="truncate text-xs">{{ data.user.email }}</span>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<Sparkles />
|
|
Upgrade to Pro
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<BadgeCheck />
|
|
Account
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<CreditCard />
|
|
Billing
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Bell />
|
|
Notifications
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<LogOut />
|
|
Log out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
<SidebarInset>
|
|
<header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
|
|
<div class="flex items-center gap-2 px-4">
|
|
<SidebarTrigger class="-ml-1" />
|
|
<Separator orientation="vertical" class="mr-2 h-4" />
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem class="hidden md:block">
|
|
<BreadcrumbLink href="#">
|
|
Building Your Application
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator class="hidden md:block" />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
|
|
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
<div class="aspect-video rounded-xl bg-muted/50" />
|
|
<div class="aspect-video rounded-xl bg-muted/50" />
|
|
<div class="aspect-video rounded-xl bg-muted/50" />
|
|
</div>
|
|
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
</template>
|