src/components/BrainBlastBar.vue

@@ -1,13 +1,22 @@
+<script>
+// Il s'agit de la bar de navigation principale pour passer d'une vue a l'autre
+</script>
+
 <template>
   <v-app-bar :elevation="12">
-    <v-app-bar-nav-icon v-on:click="menu = !menu"></v-app-bar-nav-icon>
-    <v-menu v-model="menu" class="menu-below-bar">
+    <!-- TODO: Ici je voudrai ouvrir un menu en cliquant sur le v-app-bar-nav-icon -->
+    <v-app-bar-nav-icon @click="menu = !menu"></v-app-bar-nav-icon>
+    <v-menu v-model="menu" offset-y>
+      <template v-slot:activator="{ on }">
+        <v-btn v-on="on" color="primary">Menu</v-btn>
+      </template>
       <v-list>
         <v-list-item>Item 1</v-list-item>
         <v-list-item>Item 2</v-list-item>
       </v-list>
     </v-menu>
 
+
     <v-app-bar-title>Brain Blast</v-app-bar-title>
 
     <template v-slot:append>
@@ -17,20 +26,11 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
   import { useTheme } from 'vuetify'
 
   const theme = useTheme()
-  let menu = ref(false)
 
   function toggleTheme () {
     theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
   }
-
 </script>
-
-<style scoped>
-  .menu-below-bar {
-    margin-top: 48px; /* La hauteur de la barre d'application */
-  }
-</style>