nouveau nom pour la bar

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <v-app>
-    <AppAppBar />
+    <BrainBlastBar />
+    <GameStatus />
     <v-main>
       <HelloWorld msg="PIGNOUF ! " />
       <RouterLink to="/">Home</RouterLink>

src/components/AppAppBar.vue

@@ -1,49 +0,0 @@
-<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-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>
-        <v-btn @click="toggleTheme" icon="mdi-theme-light-dark"></v-btn>
-        <v-btn icon="mdi-settings-helper"></v-btn>
-      </template>
-    </v-app-bar>
-
-    <!-- Settings contextuels a chaques pages,
-         TODO : composant a masquer avec le v-btn mdi-setting-helper  -->
-
-    <v-navigation-drawer>
-     <v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
-      <v-divider></v-divider>
-      <v-list-item link title="List Item 1"></v-list-item>
-      <v-list-item link title="List Item 2"></v-list-item>
-      <v-list-item link title="List Item 3"></v-list-item>
-    </v-navigation-drawer>
-
-</template>
-
-<script setup>
-  import { useTheme } from 'vuetify'
-
-  const theme = useTheme()
-
-  function toggleTheme () {
-    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-  }
-</script>

src/components/BrainBlastBar.vue

@@ -0,0 +1,36 @@
+<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-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>
+      <v-btn @click="toggleTheme" icon="mdi-theme-light-dark"></v-btn>
+    </template>
+  </v-app-bar>
+</template>
+
+<script setup>
+  import { useTheme } from 'vuetify'
+
+  const theme = useTheme()
+
+  function toggleTheme () {
+    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+  }
+</script>

src/components/GameStatus.vue

@@ -0,0 +1,13 @@
+<script>
+// L'affichage lateral gauche pour l'état du jeu (ex. Score)
+</script>
+
+<template>
+  <v-navigation-drawer>
+    <v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
+    <v-divider></v-divider>
+    <v-list-item link title="List Item 1"></v-list-item>
+    <v-list-item link title="List Item 2"></v-list-item>
+    <v-list-item link title="List Item 3"></v-list-item>
+  </v-navigation-drawer>
+</template>