Add account section and sidebar profile button is invisible

web/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@mdi/font": "7.4.47",
     "core-js": "^3.37.1",
+    "lucide-vue-next": "^0.438.0",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
     "vuetify": "^3.6.11"

web/pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       core-js:
         specifier: ^3.37.1
         version: 3.38.1
+      lucide-vue-next:
+        specifier: ^0.438.0
+        version: 0.438.0(vue@3.4.38(typescript@5.5.4))
       roboto-fontface:
         specifier: '*'
         version: 0.10.0
@@ -1263,6 +1266,11 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  lucide-vue-next@0.438.0:
+    resolution: {integrity: sha512-xlPIeYbhfI0gDJwolST7cjc6KAi1oWN9HEWGuK+5gMmoi+a6bJ3mI062+7tqzOdjSE07l7jyBH4mladQVLIQRA==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   magic-string-ast@0.6.2:
     resolution: {integrity: sha512-oN3Bcd7ZVt+0VGEs7402qR/tjgjbM7kPlH/z7ufJnzTLVBzXJITRHOJiwMmmYMgZfdoWQsfQcY+iKlxiBppnMA==}
     engines: {node: '>=16.14.0'}
@@ -3216,6 +3224,10 @@ snapshots:
 
   lodash@4.17.21: {}
 
+  lucide-vue-next@0.438.0(vue@3.4.38(typescript@5.5.4)):
+    dependencies:
+      vue: 3.4.38(typescript@5.5.4)
+
   magic-string-ast@0.6.2:
     dependencies:
       magic-string: 0.30.11

web/src/components/NavBar.vue

@@ -1,20 +1,45 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const expanded = defineProps();
+const drawer = ref(false);
+</script>
 
 <template>
-  <v-app-bar rounded="lg" class="ma-2">
+  <v-app-bar rounded="lg">
     <template v-slot:prepend>
-      <v-img
-        class="ml-2"
-        :width="48"
-        aspect-ratio="16/9"
-        cover
-        src="https://avatars.akamai.steamstatic.com/800839be3a674309373baefda80dd05a1251f54c_full.jpg"
-      ></v-img>
+      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
     </template>
+
     <template v-slot:append>
-      <v-toolbar-title>DocuSphere</v-toolbar-title>
+      <!-- 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>
 </template>
 
 <style scoped></style>

web/src/plugins/vuetify.ts

@@ -5,15 +5,15 @@
  */
 
 // Styles
-import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles'
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
 
 // Composables
-import { createVuetify } from 'vuetify'
+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'
   },
-})
+});