AppHeader.vue

<script setup lang="ts">
const appConfig = useAppConfig()
const open = ref(false)
</script>

<template>
    <header>
        <h1 class="title">
            <NuxtLink to="/">
                {{ appConfig.title }}
            </NuxtLink>
        </h1>
        <USlideover
            v-model:open="open"
            aria-label="Modal de l'utilisateur"
            :close="false"
            :ui="{ footer: 'justify-center'}">
            <UButton
                icon="material-symbols:account-circle" size="xl" color="primary" variant="link" rounded-full
                class="h-full w-full" aria-label="account"/>
            <template #body>
                <AccountPlaceholder class="h-full"/>
            </template>
            <template #footer>
                <UButton color="neutral" label="Fermer" @click="open = false"/>
            </template>
        </USlideover>
    </header>
</template>

<style>
header {
    position: sticky;
    top: 0;
    padding-left: 10vw;

    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns:1fr 10vw;
    background-color: var(--color-background-500);
}

.title {
    margin: 1vh;
    color: var(--color-primary-500);
}

header span {
    width: 100%;
    height: 100%;
}
</style>