it fucking works

web/src/components/NavBar.vue

@@ -1,51 +1,23 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const drawer = ref(false);
-</script>
+<script setup lang="ts"></script>
 
 <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"
-    >
+  <v-app class="mx-5 my-3">
+    <v-app-bar :elevation="2" rounded>
       <template v-slot:prepend>
-        <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+        <v-app-bar-nav-icon></v-app-bar-nav-icon>
       </template>
 
+      <v-app-bar-title>Application Bar</v-app-bar-title>
+
       <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>
+        <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-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>
+  </v-app>
 </template>
 
-.max-width { max-width: 90%; }
 <style scoped></style>

web/src/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <NavBar/>
+  <NavBar />
 </template>
 
 <script lang="ts" setup>
-import NavBar from '@/components/NavBar.vue'
+import NavBar from "@/components/NavBar.vue";
 </script>

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: "light", // 'light' | 'dark'
+    defaultTheme: "dark", // 'light' | 'dark'
   },
 });