site_logiciels/components/Layout/Navigation/Topbar.vue

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

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

<script setup lang="ts">
import { useDisplay } from "vuetify";

const { mdAndDown } = useDisplay();
</script>

<style scoped>
.top-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 54px;
  background-color: #dbdbdb;
  font-family: "Barlow", serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.7rem;
}

.top-bar .v-btn {
  margin: 4px 8px;
  border-radius: 6px;
  height: 44px;
}

.btn-login {
  background: #091d20;
  color: white;
}

.btn-agenda {
  background: #9edbdd;
}

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