179 lines
3.1 KiB
Vue
179 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import type { SidebarProps } from '@/components/ui/sidebar'
|
|
|
|
import {
|
|
AudioWaveform,
|
|
BookOpen,
|
|
Bot,
|
|
Command,
|
|
Frame,
|
|
GalleryVerticalEnd,
|
|
Map,
|
|
PieChart,
|
|
Settings2,
|
|
SquareTerminal,
|
|
} from "lucide-vue-next"
|
|
import NavMain from '@/components/NavMain.vue'
|
|
import NavProjects from '@/components/NavProjects.vue'
|
|
import NavUser from '@/components/NavUser.vue'
|
|
import TeamSwitcher from '@/components/TeamSwitcher.vue'
|
|
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarHeader,
|
|
SidebarRail,
|
|
} from '@/components/ui/sidebar'
|
|
|
|
const props = withDefaults(defineProps<SidebarProps>(), {
|
|
collapsible: "icon",
|
|
})
|
|
|
|
// 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,
|
|
},
|
|
],
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar v-bind="props">
|
|
<SidebarHeader>
|
|
<TeamSwitcher :teams="data.teams" />
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<NavMain :items="data.navMain" />
|
|
<NavProjects :projects="data.projects" />
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<NavUser :user="data.user" />
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
</template>
|