💄 Better navbar

src/layouts/master.vue

@@ -6,25 +6,33 @@
     :rail="drawerMini"
     :rail-width="58"
     :order="0"
+    floating
     @click="drawerMini = false"
   >
     <div class="flex flex-col h-full">
-      <div class="flex items-center justify-between px-3 pb-2.5 border-opacity-15 min-h-[64px]"
+      <v-toolbar
-           style="border-bottom-width: thin"
+        class="flex items-center justify-between px-[12px] border-opacity-15"
-           :style="`padding-top: max(${safeAreaTop}, 10px)`">
+        color="primary"
+        height="64"
+        :style="`padding-top: ${safeAreaTop}`"
+      >
         <div class="flex items-center">
           <img src="/favicon.png" alt="Logo" width="36" height="36" class="block" />
           <div v-show="!drawerMini" class="ms-6 font-medium">Solar Network</div>
         </div>
 
-        <v-btn
+        <v-spacer />
-          v-show="!drawerMini"
+
-          icon="mdi-arrow-collapse-left"
+        <div>
-          size="small"
+          <v-btn
-          variant="text"
+            v-show="!drawerMini"
-          @click.stop="drawerMini = true"
+            icon="mdi-arrow-collapse-left"
-        />
+            size="small"
-      </div>
+            variant="text"
+            @click.stop="drawerMini = true"
+          />
+        </div>
+      </v-toolbar>
 
       <div class="flex-grow-1">
         <realm-list />

vite.config.ts

@@ -30,9 +30,6 @@ export default defineConfig({
           },
         ]
       },
-      devOptions: {
-        enabled: true
-      }
     })
   ],
   resolve: {