103 lines
2.5 KiB
Vue
103 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownMenuItem } from '@nuxt/ui'
|
|
import { useForm } from '@inertiajs/vue3'
|
|
import Logo from '@/components/common/Logo.vue'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
|
|
const { user } = useAuth()
|
|
|
|
const logoutForm = useForm({})
|
|
|
|
function logout() {
|
|
logoutForm.post('/logout')
|
|
}
|
|
|
|
const sidebarLinks = [
|
|
{
|
|
label: 'Dashboard',
|
|
icon: 'i-lucide-house',
|
|
to: '/dashboard',
|
|
},
|
|
]
|
|
|
|
const userMenuItems: DropdownMenuItem[][] = [
|
|
[
|
|
{
|
|
label: 'Profile',
|
|
icon: 'i-lucide-user-round',
|
|
to: '/profile',
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: 'Sign out',
|
|
icon: 'i-lucide-log-out',
|
|
color: 'error',
|
|
onSelect: logout,
|
|
},
|
|
],
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UApp>
|
|
<UDashboardGroup unit="rem" storage="local">
|
|
<UDashboardSidebar
|
|
id="main"
|
|
resizable
|
|
collapsible
|
|
class="bg-elevated/25"
|
|
:min-size="14"
|
|
:default-size="16"
|
|
:max-size="24"
|
|
:collapsed-size="4"
|
|
:ui="{ footer: 'lg:border-t lg:border-default' }"
|
|
>
|
|
<template #header="{ collapsed }">
|
|
<Logo
|
|
:link-to-home="false"
|
|
size="sm"
|
|
:show-text="!collapsed"
|
|
/>
|
|
</template>
|
|
|
|
<template #default="{ collapsed }">
|
|
<UNavigationMenu
|
|
:items="sidebarLinks"
|
|
orientation="vertical"
|
|
:collapsed="collapsed"
|
|
tooltip
|
|
/>
|
|
</template>
|
|
|
|
<template #footer="{ collapsed }">
|
|
<UDropdownMenu
|
|
:items="userMenuItems"
|
|
:content="{ align: 'center', side: 'top', sideOffset: 8, collisionPadding: 12 }"
|
|
:ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
|
|
>
|
|
<UButton
|
|
:avatar="{ alt: user?.full_name }"
|
|
:label="collapsed ? undefined : user?.full_name"
|
|
:trailing-icon="collapsed ? undefined : 'i-lucide-chevrons-up-down'"
|
|
color="neutral"
|
|
variant="ghost"
|
|
block
|
|
:square="collapsed"
|
|
class="data-[state=open]:bg-elevated"
|
|
aria-label="Open user menu"
|
|
:loading="logoutForm.processing"
|
|
:ui="{
|
|
label: 'truncate text-left',
|
|
trailingIcon: 'text-dimmed',
|
|
}"
|
|
/>
|
|
</UDropdownMenu>
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<slot />
|
|
</UDashboardGroup>
|
|
</UApp>
|
|
</template>
|