87 lines
2.1 KiB
Vue
87 lines
2.1 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>
|
|
<UDashboardSidebar collapsible>
|
|
<template #header>
|
|
<Logo :link-to-home="false" size="sm" />
|
|
</template>
|
|
|
|
<UNavigationMenu :items="sidebarLinks" orientation="vertical" />
|
|
|
|
<template #footer>
|
|
<UDropdownMenu
|
|
:items="userMenuItems"
|
|
:content="{ align: 'start', side: 'top', sideOffset: 8 }"
|
|
:ui="{ content: 'w-64' }"
|
|
>
|
|
<UButton
|
|
color="neutral"
|
|
variant="ghost"
|
|
class="w-full justify-start px-2 py-2"
|
|
aria-label="Open user menu"
|
|
:loading="logoutForm.processing"
|
|
>
|
|
<UAvatar :alt="user?.full_name" size="sm" />
|
|
<span class="min-w-0 flex-1 text-left">
|
|
<span class="block truncate text-sm font-medium text-highlighted">
|
|
{{ user?.full_name }}
|
|
</span>
|
|
<span class="block truncate text-xs font-normal text-muted">
|
|
{{ user?.email }}
|
|
</span>
|
|
</span>
|
|
<UIcon
|
|
name="i-lucide-chevrons-up-down"
|
|
class="size-4 shrink-0 text-muted"
|
|
/>
|
|
</UButton>
|
|
</UDropdownMenu>
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<slot />
|
|
</UDashboardGroup>
|
|
</UApp>
|
|
</template>
|