Positionnement du menu sous la barre d'application

src/components/BrainBlastBar.vue

@@ -1,22 +1,13 @@
-<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">
-    <!-- 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-app-bar-nav-icon v-on:click="menu = !menu"></v-app-bar-nav-icon>
+    <v-menu v-model="menu" class="menu-below-bar">
       <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>
@@ -26,11 +17,20 @@
 </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>