boussole-pluss/frontend/components/TeamHeader.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>