rendu bo le header

frontend/src/assets/main.css

 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  /* max-width: 1280px; */
+  /* margin: 0 auto; */
+  /* padding: 2rem; */
 
   font-weight: normal;
 }
@@ -23,13 +23,14 @@ a,
 
 @media (min-width: 1024px) {
   body {
-    display: flex;
+    /* display: flex; */
     place-items: center;
   }
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
+    /* display: grid; */
+    /* grid-template-columns: 1fr 1fr; */
+    /* padding: 0 2rem; */
   }
+
 }

frontend/src/components/Header.vue

@@ -47,17 +47,64 @@ onMounted(() => {
 
 <template>
     <header>
-        <router-link to="/">
-            <div>Projet S5</div>
-        </router-link>
+
         <nav>
-            <router-link v-if="!isConnected" to="/inscription">Inscription</router-link>
-            <router-link v-if="!isConnected" to="/connexion">Connexion</router-link>
-            <router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link>
-            <button v-if="isConnected" @click="logout">Déconnexion</button>
+            <ul>
+                <li class = "gauche"> <router-link to="/">
+                        Projet S5
+                    </router-link></li>
+                <li class = "droite"><router-link v-if="!isConnected" to="/inscription">Inscription</router-link></li>
+                <li class = "droite"><router-link v-if="!isConnected" to="/connexion">Connexion</router-link></li>
+                <li class = "droite"><router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link></li>
+                <li class = "droite"><a v-if="isConnected" @click="logout">Déconnexion</a></li>
+            </ul>
+
 
         </nav>
     </header>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+header {
+    padding: 0;
+    margin: auto;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+li.gauche {
+    float: left;
+}
+li.droite {
+    float: right;
+}
+li.gauche a {
+    font-weight: bold;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+/* Change the link color to #111 (black) on hover */
+li a:hover {
+    background-color: #111;
+}
+button {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+</style>
\ No newline at end of file