From f47ddff91195c68512b612ff9a4b6d8d2f0b2bc5 Mon Sep 17 00:00:00 2001
From: Laurent <laurent@ollagnier.org>
Date: Sat, 24 Feb 2024 17:36:48 +0000
Subject: [PATCH] =?UTF-8?q?S=C3=A9pare=20le=20menu=20dans=20un=20composant?=
 =?UTF-8?q?=20d=C3=A9di=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BrainBlastBar.vue | 22 ++--------------------
 src/components/RouterMenu.vue    | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 src/components/RouterMenu.vue

diff --git a/src/components/BrainBlastBar.vue b/src/components/BrainBlastBar.vue
index b5df5cc..9bfc5eb 100644
--- a/src/components/BrainBlastBar.vue
+++ b/src/components/BrainBlastBar.vue
@@ -1,12 +1,6 @@
 <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">
-      <v-list>
-        <v-list-item v-for="route in routes" :key="route.name" :to="route.path">{{ route.name }}</v-list-item>
-      </v-list>
-    </v-menu>
-
+    <RouterMenu />
     <v-app-bar-title>Brain Blast</v-app-bar-title>
 
     <template v-slot:append>
@@ -16,24 +10,12 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
   import { useTheme } from 'vuetify'
-  import { useRouter } from 'vue-router';
+  import RouterMenu from '@/components/RouterMenu.vue'
 
   const theme = useTheme()
-  const router = useRouter();
-  const routes = router.options.routes;
-
-  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>
diff --git a/src/components/RouterMenu.vue b/src/components/RouterMenu.vue
new file mode 100644
index 0000000..4624988
--- /dev/null
+++ b/src/components/RouterMenu.vue
@@ -0,0 +1,24 @@
+<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 v-for="route in routes" :key="route.name" :to="route.path">{{ route.name }}</v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+
+  const router = useRouter()
+  const routes = router.options.routes
+
+  let menu = ref(false)
+</script>
+
+<style scoped>
+  .menu-below-bar {
+    margin-top: 48px; /* La hauteur de la barre d'application */
+  }
+</style>