site_logiciels/components/Layout/Navigation/Topbar.vue

<template>
  <div class="top-bar">
    <v-btn
      href="https://admin.opentalent.fr/#/login/"
      prepend-icon="fas fa-user"
      class="btn-login"
    >
      Se connecter
    </v-btn>

    <AgendaLink href="/">
      <v-btn prepend-icon="fas fa-calendar" class="btn-agenda">
        Agenda Culturel
      </v-btn>
    </AgendaLink>
  </div>
</template>

<script setup lang="ts">
import AgendaLink from '~/components/Common/AgendaLink.vue'
</script>

<style scoped lang="scss">
.top-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 54px;
  background-color: var(--neutral-color-alt);
  font-weight: 700;
  font-size: 0.7rem;

  .v-btn {
    margin: 4px 8px;
    border-radius: 6px;
    height: 44px;
    font-size: 0.8rem;
    font-weight: 400;
  }
}

.btn-login {
  background: var(--primary-color);
  color: var(--on-primary-color);
}

.btn-agenda {
  background: var(--secondary-color);
}

/**
.vertical-bar {
  width: 0px;
  height: 3rem;
  border: 0.5px solid rgba(14, 45, 50, 0.4);
  margin-left: 10px;
  margin-top: 0.2rem;
}
*/
</style>