🐛 Bug fixes

✨ Collapsable sidebar

src/layouts/master.vue

@@ -1,10 +1,29 @@
 <template>
-  <v-navigation-drawer v-model="drawerOpen" color="grey-lighten-5" width="320" :order="0" floating>
+  <v-navigation-drawer
+    v-model="drawerOpen"
+    color="grey-lighten-5"
+    width="320"
+    :rail="drawerMini"
+    :rail-width="58"
+    :order="0"
+    @click="drawerMini = false"
+  >
     <div class="flex flex-col h-full">
-      <div class="flex items-center px-3 pb-2.5 border-opacity-15" style="border-bottom-width: thin"
-        :style="`padding-top: max(${safeAreaTop}, 16px)`">
-        <img src="/favicon.png" width="36" height="36" class="block" />
-        <div class="ms-6 font-medium">Solar Network</div>
+      <div class="flex items-center justify-between px-3 pb-2.5 border-opacity-15 min-h-[64px]"
+           style="border-bottom-width: thin"
+           :style="`padding-top: max(${safeAreaTop}, 10px)`">
+        <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-show="!drawerMini"
+          icon="mdi-arrow-collapse-left"
+          size="small"
+          variant="text"
+          @click.stop="drawerMini = true"
+        />
       </div>
 
       <div class="flex-grow-1">
@@ -13,7 +32,7 @@
 
       <!-- User info -->
       <v-list class="border-opacity-15 h-[64px]" style="border-top-width: thin"
-        :style="`margin-bottom: ${safeAreaBottom}`">
+              :style="`margin-bottom: ${safeAreaBottom}`">
         <v-list-item :subtitle="username" :title="nickname">
           <template #prepend>
             <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.picture" />
@@ -26,7 +45,7 @@
 
               <v-list density="compact">
                 <v-list-item title="Solarpass" prepend-icon="mdi-passport-biometric" target="_blank"
-                  :href="passportUrl" />
+                             :href="passportUrl" />
               </v-list>
             </v-menu>
 
@@ -39,7 +58,7 @@
 
   <v-app-bar height="64" color="primary" scroll-behavior="hide" :order="2" flat>
     <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
-      <v-app-bar-nav-icon variant="text" @click.stop="toggleDrawer" />
+      <v-app-bar-nav-icon variant="text" @click.stop="drawerOpen = !drawerOpen" />
 
       <router-link :to="{ name: 'explore' }">
         <h2 class="ml-2 text-lg font-500">Solian</h2>
@@ -58,10 +77,10 @@
   </v-main>
 
   <v-menu open-on-hover open-on-click :open-delay="0" :close-delay="0" location="top"
-    transition="scroll-y-reverse-transition">
+          transition="scroll-y-reverse-transition">
     <template v-slot:activator="{ props }">
       <v-fab v-bind="props" appear class="editor-fab" icon="mdi-pencil" color="primary" size="64"
-        :active="id.userinfo.isLoggedIn" />
+             :active="id.userinfo.isLoggedIn" />
     </template>
 
     <div class="flex flex-col items-center gap-4 mb-4">
@@ -124,10 +143,7 @@ const passportUrl = computed(() => {
 meta.readWellKnown()
 
 const drawerOpen = ref(true)
-
-function toggleDrawer() {
-  drawerOpen.value = !drawerOpen.value
-}
+const drawerMini = ref(false)
 </script>
 
 <style scoped>