409/warren
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create frontend directory

Browse Source
This commit is contained in:
Shawn
2025-07-11 23:55:46 +02:00
parent c281b9a673
commit dba7a8b0e8
110 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/components/AppSidebar.vue Normal file
View File

@@ -0,0 +1,90 @@
<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>