extract Topbar from Navigation component

components/Layout/Navigation.vue

@@ -1,27 +1,10 @@
+<!--
+Menu Navigation
+-->
 <template>
-  <div class="container-grey" v-if="!mdAndDown">
-    <v-row>
-      <v-col cols="12" class="buttons-col">
-        <nuxt-link
-          to="https://admin.opentalent.fr/#/login/"
-          style="text-decoration: none"
-        >
-          <v-btn class="btn btn-common btn-login" text>
-            <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter<br />aux
-            logiciels
-          </v-btn>
-        </nuxt-link>
+  <LayoutNavigationTopbar />
 
-        <div class="vertical-bar" />
-        <NuxtLink to="/agenda-culturel" style="text-decoration: none">
-          <v-btn class="btn btn-common btn-subscribe ml-4 mr-2" text>
-            <v-icon left class="fas fa-calendar mr-4"></v-icon>Agenda Culturel
-          </v-btn>
-        </NuxtLink>
-      </v-col>
-    </v-row>
-  </div>
-  <v-row class="menu" v-if="!mdAndDown">
+  <v-row class="menu" v-if="!mdAndDown" style="margin-top: 0 !important;">
     <v-col cols="3">
       <nuxt-link to="/">
         <v-img class="logo" src="/images/logo/navigation-logo.png" />
@@ -156,7 +139,7 @@
   </v-app>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useDisplay } from "vuetify";
 const { mdAndDown } = useDisplay();
 
@@ -236,44 +219,6 @@ const closeSubMenu = () => {
   position: fixed;
   top: 0;
 }
-/* =============== CONTAINER BUTTON =============== */
-.container-grey {
-  background-color: #dbdbdb;
-}
-/* =============== Button Styles =============== */
-
-.buttons-col {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.btn-common {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  border-radius: 6px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 700;
-  font-size: 0.7rem;
-}
-
-.btn-login {
-  background: #091d20;
-  color: white;
-}
-.vertical-bar {
-  width: 0px;
-  height: 3rem;
-  border: 0.5px solid rgba(14, 45, 50, 0.4);
-  margin-left: 10px;
-  margin-top: 0.2rem;
-}
-
-.btn-subscribe {
-  background: #9edbdd;
-}
 /* =============== menu Styles =============== */
 
 .menu {

components/Layout/Navigation/Topbar.vue

@@ -0,0 +1,68 @@
+<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>