72 lines
2.5 KiB
Vue
72 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { router, usePage } from '@inertiajs/vue3';
|
|
import { LogOut, User } from '@lucide/vue';
|
|
import { computed } from 'vue';
|
|
import NotificationBell from '@/components/NotificationBell.vue';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { logout as logoutRoute } from '@/routes';
|
|
import { profile } from '@/routes/admin/account';
|
|
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(logoutRoute.url());
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-2">
|
|
<NotificationBell />
|
|
<DropdownMenu v-if="user">
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" class="relative size-8 rounded-full">
|
|
<Avatar class="size-8">
|
|
<AvatarImage v-if="user.profile_photo_url" :src="user.profile_photo_url" :alt="user.username" />
|
|
<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-xs leading-none text-muted-foreground">
|
|
{{ user.email }}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem @click="router.visit(profile.url())">
|
|
<User />
|
|
Profil
|
|
</DropdownMenuItem>
|
|
<Separator />
|
|
<DropdownMenuItem variant="destructive" @click="logout">
|
|
<LogOut />
|
|
Keluar
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</template>
|