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<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 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;
  }
}

.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>