59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
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',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UApp>
|
|
<UDashboardGroup>
|
|
<UDashboardSidebar collapsible>
|
|
<template #header>
|
|
<Logo :link-to-home="false" size="sm" />
|
|
</template>
|
|
|
|
<UNavigationMenu :items="sidebarLinks" />
|
|
|
|
<template #footer>
|
|
<div class="flex items-center gap-2 px-2">
|
|
<UAvatar :alt="user?.full_name" size="sm" />
|
|
<div class="flex-1 truncate text-sm">
|
|
<p class="font-medium truncate">
|
|
{{ user?.full_name }}
|
|
</p>
|
|
<p class="text-muted truncate text-xs">
|
|
{{ user?.email }}
|
|
</p>
|
|
</div>
|
|
<UButton
|
|
icon="i-lucide-log-out"
|
|
variant="ghost"
|
|
size="sm"
|
|
:loading="logoutForm.processing"
|
|
@click="logout"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<slot />
|
|
</UDashboardGroup>
|
|
</UApp>
|
|
</template>
|