Kevin
98 lines
3.4 KiB
Vue
98 lines
3.4 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-between 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-4 bg-surface-container-low px-4 py-2 rounded-lg border border-outline-variant w-96 focus-within:ring-2 focus-within:ring-primary transition-all"
|
|
>
|
|
<span class="material-symbols-outlined text-on-surface-variant">search</span>
|
|
<input
|
|
class="bg-transparent border-none focus:ring-0 focus:outline-none text-body-sm font-body-sm w-full p-0"
|
|
placeholder="Search builds..."
|
|
type="text"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6">
|
|
<button
|
|
class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all"
|
|
>
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button
|
|
class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all"
|
|
>
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</button>
|
|
|
|
<div class="h-8 w-px bg-outline-variant mx-2"></div>
|
|
|
|
<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>
|