From c4806cd2c5a81dc2cbd60c5bb89a4dddba153f16 Mon Sep 17 00:00:00 2001
From: Laurent <laurent@ollagnier.org>
Date: Tue, 20 Feb 2024 20:51:36 +0000
Subject: [PATCH] Template de base + toggle theme

---
 src/App.vue            | 39 ++++++++++++++++++++++++++++++++++++++-
 src/plugins/vuetify.js |  4 +++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6c90fb8..c17fab5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,35 @@
 <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>
     <v-main>
       <HelloWorld msg="PIGNOUF ! " />
       <RouterLink to="/">Home</RouterLink>
@@ -8,9 +38,16 @@
 
       <RouterView />
     </v-main>
+    <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/plugins/vuetify.js b/src/plugins/vuetify.js
index 2a9083b..5bd842e 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -13,5 +13,7 @@ import { createVuetify } from 'vuetify'
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
-  //
+  theme: {
+    defaultTheme: 'dark'
+  }
 })