From 0e5f144ffb5869ab5a7aeda43e4246b3b5a5a73d Mon Sep 17 00:00:00 2001
From: Laurent <laurent@ollagnier.org>
Date: Wed, 21 Feb 2024 06:50:02 +0000
Subject: [PATCH] Creation d'un composant pour l'app bar

---
 src/App.vue                  | 41 +-----------------------------
 src/components/AppAppBar.vue | 49 ++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 40 deletions(-)
 create mode 100644 src/components/AppAppBar.vue

diff --git a/src/App.vue b/src/App.vue
index c17fab5..68c1508 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,35 +1,6 @@
 <template>
   <v-app>
-    <v-system-bar>
-      <v-icon icon="mdi-wifi-strength-4"></v-icon>
-      <v-icon icon="mdi-signal" class="ms-2"></v-icon>
-      <v-icon icon="mdi-battery" class="ms-2"></v-icon>
-
-      <span class="ms-2">3:14AM</span>
-    </v-system-bar>
-    <v-app-bar :elevation="12">
-      <template v-slot:prepend>
-        <v-app-bar-nav-icon></v-app-bar-nav-icon>
-      </template>
-
-      <v-app-bar-title>Brain Blast</v-app-bar-title>
-
-      <template v-slot:append>
-        <v-btn @click="toggleTheme">Toggle Theme</v-btn>
-        <v-btn icon="mdi-heart"></v-btn>
-
-        <v-btn icon="mdi-magnify"></v-btn>
-
-        <v-btn icon="mdi-dots-vertical"></v-btn>
-      </template>
-    </v-app-bar>
-    <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>
+    <AppAppBar />
     <v-main>
       <HelloWorld msg="PIGNOUF ! " />
       <RouterLink to="/">Home</RouterLink>
@@ -41,13 +12,3 @@
     <v-footer :elevation=12 border><v-row justify="center">ASCO - Fablab</v-row></v-footer>
   </v-app>
 </template>
-
-<script setup>
-  import { useTheme } from 'vuetify'
-
-  const theme = useTheme()
-
-  function toggleTheme () {
-    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-  }
-</script>
diff --git a/src/components/AppAppBar.vue b/src/components/AppAppBar.vue
new file mode 100644
index 0000000..8f795ca
--- /dev/null
+++ b/src/components/AppAppBar.vue
@@ -0,0 +1,49 @@
+<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>