64 lines
2.0 KiB
Vue
64 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { router, usePage } from '@inertiajs/vue3';
|
|
import { LogOut, User } from '@lucide/vue';
|
|
import { computed } from 'vue';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator, DropdownMenuTrigger
|
|
} from '@/components/ui/dropdown-menu';
|
|
import Separator from './ui/separator/Separator.vue';
|
|
|
|
const page = usePage();
|
|
|
|
const user = computed(() => page.props.auth.user);
|
|
|
|
const initials = computed(() => {
|
|
const username = user.value?.username ?? '';
|
|
|
|
return username.slice(0, 2).toUpperCase();
|
|
});
|
|
|
|
function logout() {
|
|
router.post('/auth/logout');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu v-if="user">
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" class="relative size-8 rounded-full">
|
|
<Avatar class="size-8">
|
|
<AvatarFallback>{{ initials }}</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="w-56" align="end">
|
|
<DropdownMenuLabel class="font-normal">
|
|
<div class="flex flex-col space-y-1">
|
|
<p class="text-sm leading-none font-medium">
|
|
{{ user.username }}
|
|
</p>
|
|
<p class="text-muted-foreground text-xs leading-none">
|
|
{{ user.email }}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem @click="router.visit('/admin/setting/profile')">
|
|
<User />
|
|
Profil
|
|
</DropdownMenuItem>
|
|
<Separator />
|
|
<DropdownMenuItem variant="destructive" @click="logout">
|
|
<LogOut />
|
|
Keluar
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|