82 lines
3.4 KiB
Vue
82 lines
3.4 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 store = useWarrenStore();
|
|
</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, uuid) in store.warrens"
|
|
:key="uuid"
|
|
>
|
|
<SidebarMenuSubButton
|
|
as-child
|
|
:tooltip="warren.name"
|
|
:is-active="
|
|
route.path.startsWith(
|
|
`/warrens/${uuid}`
|
|
)
|
|
"
|
|
class="transition-all"
|
|
>
|
|
<NuxtLink :to="`/warrens/${uuid}`">
|
|
<Icon
|
|
name="lucide:folder-root"
|
|
/>
|
|
<span>{{ warren.name }}</span>
|
|
</NuxtLink>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<SidebarUser />
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
</template>
|