Make the bar more compact via density property

.run/start frontend (dev).run.xml

@@ -0,0 +1,13 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="start frontend (dev)" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/web/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="dev" />
+    </scripts>
+    <arguments value="--host" />
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

.run/start server.run.xml

@@ -0,0 +1,15 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="start server" type="Application" factoryName="Application">
+    <option name="ALTERNATIVE_JRE_PATH" value="17" />
+    <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="true" />
+    <envs>
+      <env name="DB_USER" value="postgres" />
+      <env name="DB_PASSWORD" value="postgres" />
+    </envs>
+    <option name="MAIN_CLASS_NAME" value="com.mixel.docusphere.DocuSphereApplication" />
+    <module name="DocuSphere.server.main" />
+    <method v="2">
+      <option name="Make" enabled="true" />
+    </method>
+  </configuration>
+</component>

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,23 @@
 <script setup lang="ts"></script>
 
 <template>
-  <v-app-bar rounded="lg" class="ma-2">
-    <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>
-    </template>
-    <template v-slot:append>
-      <v-toolbar-title>DocuSphere</v-toolbar-title>
-    </template>
-  </v-app-bar>
+  <v-app class="mx-5 my-3">
+    <v-app-bar :elevation="2" rounded density="comfortable">
+      <template v-slot:prepend>
+        <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>
+        <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-app>
 </template>
 
 <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

@@ -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'
   },
-})
+});