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/app/ui/layout/NavMain.vue";
|
|
import NavProjects from "@/Components/app/ui/layout/NavProjects.vue";
|
|
import NavUser from "@/Components/app/ui/layout/NavUser.vue";
|
|
import TeamSwitcher from "@/Components/app/ui/layout/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>
|