91 lines
3.5 KiB
Vue
91 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '#components';
|
|
import {
|
|
SidebarGroup,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar';
|
|
import {
|
|
Collapsible,
|
|
CollapsibleTrigger,
|
|
CollapsibleContent,
|
|
} from '@/components/ui/collapsible';
|
|
|
|
const route = useRoute();
|
|
|
|
const warrens = [
|
|
{
|
|
title: 'Thyr',
|
|
url: '/warrens/Thyr',
|
|
icon: h(Icon, { name: 'lucide:folder-root' }),
|
|
},
|
|
{
|
|
title: 'Serc',
|
|
url: '/warrens/Serc',
|
|
icon: h(Icon, { name: 'lucide:folder-root' }),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon">
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarMenu>
|
|
<Collapsible class="group/collapsible" :default-open="true">
|
|
<SidebarMenuItem>
|
|
<NuxtLink to="/warrens" as-child>
|
|
<SidebarMenuButton
|
|
tooltip="Your Warrens"
|
|
:is-active="route.path === '/warrens'"
|
|
>
|
|
<Icon name="lucide:folder-tree" />
|
|
<span>Your Warrens</span>
|
|
<CollapsibleTrigger
|
|
as-child
|
|
@click="preventDefault"
|
|
>
|
|
<Icon
|
|
name="lucide:chevron-right"
|
|
class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
|
|
/>
|
|
</CollapsibleTrigger>
|
|
</SidebarMenuButton>
|
|
</NuxtLink>
|
|
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub>
|
|
<SidebarMenuSubItem
|
|
v-for="warren in warrens"
|
|
:key="warren.title"
|
|
>
|
|
<SidebarMenuSubButton
|
|
as-child
|
|
:tooltip="warren.title"
|
|
:is-active="
|
|
warren.url === route.path
|
|
"
|
|
class="transition-all"
|
|
>
|
|
<NuxtLink :to="warren.url">
|
|
<component
|
|
:is="warren.icon"
|
|
></component>
|
|
<span>{{ warren.title }}</span>
|
|
</NuxtLink>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<SidebarUser />
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
</template>
|