Kevin L'Hereec
ec6734f491
- Remove non-functional search bar, notifications and settings buttons from header - Remove leftover console.log and unused useAttrs import in sidebar - Remove unused scoped CSS in computers/index.vue (Tailwind-only template) - Regenerate database/schema.ts after running migrations locally - Ignore .serena/ local tooling directory - Refresh package-lock.json after npm install
74 lines
2.5 KiB
Vue
74 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { Link } from '@adonisjs/inertia/vue'
|
|
import { usePage } from '@inertiajs/vue3'
|
|
import { userProfileIcon } from '~/assets/icons'
|
|
|
|
const dropdownOpen = ref(false)
|
|
|
|
const page = usePage()
|
|
|
|
const user = computed(() => {
|
|
const userData = (page.props as any).auth?.user || (page.props as any).user
|
|
return userData || { name: 'Guest', email: 'guest@example.com' }
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
class="flex justify-end items-center px-10 h-16 bg-white ml-64 w-[calc(100%-16rem)] fixed top-0 right-0 z-40 border-b border-outline-variant shadow-sm"
|
|
>
|
|
<div class="flex items-center gap-6">
|
|
<div
|
|
class="relative flex items-center gap-3 cursor-pointer group"
|
|
@click="dropdownOpen = !dropdownOpen"
|
|
>
|
|
<div class="text-right hidden sm:block">
|
|
<p class="font-label-md text-label-md text-on-surface">{{ user.name }}</p>
|
|
</div>
|
|
<img
|
|
class="w-10 h-10 rounded-full border-2 border-primary-container group-hover:border-primary transition-all object-cover"
|
|
:src="userProfileIcon"
|
|
alt="Avatar"
|
|
/>
|
|
</div>
|
|
|
|
<transition
|
|
enter-active-class="transition duration-150 ease-out transform"
|
|
enter-from-class="scale-95 opacity-0"
|
|
enter-to-class="scale-100 opacity-100"
|
|
leave-active-class="transition duration-150 ease-in transform"
|
|
leave-from-class="scale-100 opacity-100"
|
|
leave-to-class="scale-95 opacity-0"
|
|
>
|
|
<div
|
|
v-show="dropdownOpen"
|
|
class="absolute top-14 right-0 z-50 min-w-48 max-w-72 bg-white rounded-lg shadow-xl border border-outline-variant overflow-hidden"
|
|
>
|
|
<div class="px-4 py-3 border-b border-outline-variant">
|
|
<p class="font-label-md text-label-md text-on-surface truncate">{{ user.name }}</p>
|
|
<p class="font-label-sm text-label-sm text-on-surface-variant truncate">
|
|
{{ user.email }}
|
|
</p>
|
|
</div>
|
|
|
|
<Link
|
|
href="/auth/logout"
|
|
method="post"
|
|
class="flex items-center gap-3 px-4 py-2 text-body-sm font-body-sm text-on-surface hover:bg-surface-container-low transition-colors"
|
|
>
|
|
<span class="material-symbols-outlined text-[20px]">logout</span>
|
|
Sign Out
|
|
</Link>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</header>
|
|
|
|
<div
|
|
v-show="dropdownOpen"
|
|
class="fixed inset-0 z-30"
|
|
@click="dropdownOpen = false"
|
|
/>
|
|
</template>
|