102 lines
2.6 KiB
Vue
102 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
import {useAuthStore} from "~/store/auth";
|
|
|
|
function logout() {
|
|
useAuthStore().logout();
|
|
navigateTo("/");
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<header>
|
|
<nuxt-link to="/bundle" class="title">
|
|
<svg width="26" height="32" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M0 7.07348C0 6.81265 0.101912 6.56214 0.284 6.37538L5.784 0.73436C6.17647 0.331827 6.82353 0.331826 7.216 0.734359L12.716 6.37538C12.8981 6.56214 13 6.81265 13 7.07348V15C13 15.5523 12.5523 16 12 16H1C0.447715 16 0 15.5523 0 15V7.07348Z"
|
|
fill="#8BCDCD"/>
|
|
</svg>
|
|
Boussole <span class="bold">PLUSS</span>
|
|
</nuxt-link>
|
|
<div class="menu-container">
|
|
<button class="button-icon">
|
|
<svg class="svg-icon" width="32" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M723.43 508.6c-54.123 47.75-125.977 77.056-205.163 77.056-80.364 0-153.4-30.259-207.765-79.421C184.05 539.325 105.81 652.308 105.81 787.277v68.782c0 160.968 812.39 160.968 812.39 0v-68.782c-0.005-131.415-74.22-242.509-194.77-278.677z m-205.163 28.13c140.165 0 254.095-109.44 254.095-244.64S658.668 47.218 518.267 47.218c-139.93 0-253.855 109.675-253.855 244.874 0 135.204 113.925 244.639 253.855 244.639z m0 0"
|
|
fill="#8BCDCD"/>
|
|
</svg>
|
|
</button>
|
|
<ul class="menu-container__content">
|
|
<li v-if="useAuthStore().user">
|
|
{{ useAuthStore().user.username }}
|
|
</li>
|
|
<li>
|
|
<nuxt-link to="/account">Mon compte</nuxt-link>
|
|
</li>
|
|
<li>
|
|
<button class="button-link" @click="logout">Me déconnecter</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
header {
|
|
padding: 0 $xx_small;
|
|
color: $black;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
//position: absolute;
|
|
//height: $header_height;
|
|
border-bottom: 2px solid $gray_3;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $xxx_small;
|
|
text-transform: uppercase;
|
|
color: $black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.title svg {
|
|
margin-right: $xxx_small;
|
|
}
|
|
|
|
.team {
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.menu-container {
|
|
position: relative;
|
|
|
|
& > .menu-container__content {
|
|
display: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 52px;
|
|
background: $white;
|
|
}
|
|
|
|
&:focus-within > .menu-container__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.menu-container__content {
|
|
gap: $xx_small;
|
|
align-items: flex-end;
|
|
list-style: none;
|
|
min-width: 150px;
|
|
padding: $xx_small $xx_small;
|
|
|
|
border: 2px solid $gray_3;
|
|
}
|
|
}
|
|
|
|
</style>
|