From caf13fab2f0bb6cbe37ff296d577503b7f4126ae Mon Sep 17 00:00:00 2001
From: Mika Bomm <mika.bomm@outlook.com>
Date: Wed, 4 Sep 2024 19:09:31 +0200
Subject: [PATCH] 1. still no clue nothing works

---
 web/src/components/NavBar.vue | 72 +++++++++++++++++++----------------
 web/src/plugins/vuetify.ts    |  2 +-
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index dca85de..cf89e78 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -1,45 +1,51 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const expanded = defineProps();
 const drawer = ref(false);
 </script>
 
 <template>
-  <v-app-bar rounded="lg">
-    <template v-slot:prepend>
-      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-    </template>
+  <v-container class="justify-center d-flex fill-height align-center">
+    <v-app-bar
+      rounded="lg"
+      class="mx-3 mt-2 w-auto max-width"
+      density="compact"
+    >
+      <template v-slot:prepend>
+        <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+      </template>
 
-    <template v-slot:append>
-      <!-- FIXME: Button invisible -->
-      <v-btn icon="mdi-account" variant="text">
-        <v-menu activator="parent">
-          <v-list>
-            <v-list-item
-              v-for="(item, index) in [
-                { title: 'Profile' },
-                { title: 'Settings' },
-                { title: 'Log Out' },
-              ]"
-              :key="index"
-              :value="index"
-            >
-              <v-list-item-title>{{ item.title }}</v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
-      </v-btn>
-    </template>
-  </v-app-bar>
+      <template v-slot:append>
+        <!-- FIXME: Button invisible -->
+        <v-btn icon="mdi-account" variant="text">
+          <v-menu activator="parent">
+            <v-list>
+              <v-list-item
+                v-for="(item, index) in [
+                  { title: 'Profile' },
+                  { title: 'Settings' },
+                  { title: 'Log Out' },
+                ]"
+                :key="index"
+                :value="index"
+              >
+                <v-list-item-title>{{ item.title }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-btn>
+      </template>
+    </v-app-bar>
 
-  <v-navigation-drawer v-if="drawer">
-    <v-list-item title="DocuSphere" subtitle="Vuetify"></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-navigation-drawer v-if="drawer">
+      <v-list-item title="DocuSphere" subtitle="Vuetify"></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-container>
 </template>
 
+.max-width { max-width: 90%; }
 <style scoped></style>
diff --git a/web/src/plugins/vuetify.ts b/web/src/plugins/vuetify.ts
index 1c20fc8..5e31237 100644
--- a/web/src/plugins/vuetify.ts
+++ b/web/src/plugins/vuetify.ts
@@ -14,6 +14,6 @@ import { createVuetify } from "vuetify";
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: "dark", // 'light' | 'dark'
+    defaultTheme: "light", // 'light' | 'dark'
   },
 });