improve sidebar mobile

src/components/SideBar.vue

@@ -28,7 +28,7 @@ const setViewMode = (viewMode: ViewMode) => {
 <template>
   <div
     id="sidebar"
-    class="fixed bottom-0 top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:text-[120%]"
+    class="fixed bottom-0 top-0 flex max-sm:w-sidebar-mobile sm:w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:text-[120%]"
   >
     <SideBarMenu>
       <template #header>Root note</template>

src/components/TopBar/Settings.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { activeNotesSource, notesSources } from '@/composables/useNotes'
 import { signOut as firebaseSignOut } from '@/composables/useFirebase'
+import { OnClickOutside } from '@vueuse/components'
 const sourceLabels: { [source: string]: string } = {
   local: 'Switch to local notes',
   firebase: 'Switch to cloud notes'
@@ -19,50 +20,54 @@ const signOut = async (close: () => Promise<boolean>) => {
   close()
 }
 
+const blur = () => (document.activeElement as HTMLElement)?.blur()
+
 const handleClick = (fn: (...args: any[]) => any) => {
-  ;(document.activeElement as HTMLElement)?.blur()
+  blur()
   fn()
 }
 </script>
 <template>
-  <div class="search-active-hide dropdown-end dropdown">
-    <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
-      <i class="fa-fw fa-solid fa-user-gear" />
-    </label>
-    <ul
-      tabindex="0"
-      class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
-    >
-      <li
-        class="text-base"
-        v-for="{ source, label } in availableNoteSources"
-        :key="source"
-        @click="handleClick(() => (activeNotesSource = source))"
+  <OnClickOutside @trigger="blur">
+    <div class="search-active-hide dropdown-end dropdown">
+      <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
+        <i class="fa-fw fa-solid fa-user-gear" />
+      </label>
+      <ul
+        tabindex="0"
+        class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
       >
-        <a>
-          <i class="fa-fw fa-solid fa-database" />
-          {{ label }}
-        </a>
-      </li>
-      <Modal>
-        <template #activator="{ open }">
-          <li @click="open" class="text-base">
-            <a>
-              <i class="fa-fw fa-solid fa-right-from-bracket" />
-              Sign out
-            </a>
-          </li>
-        </template>
-        <template #title>Sign out</template>
-        <template #default>
-          <p>Are you sure want to signout?</p>
-          <p>Your synchronized notes can't be accessed until you sign-in again.</p>
-        </template>
-        <template #actions="{ close }">
-          <button class="btn-sm btn" @click="close">Cancel</button>
-          <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
-        </template>
-      </Modal>
-    </ul>
-  </div>
+        <li
+          class="text-base"
+          v-for="{ source, label } in availableNoteSources"
+          :key="source"
+          @click="handleClick(() => (activeNotesSource = source))"
+        >
+          <a>
+            <i class="fa-fw fa-solid fa-database" />
+            {{ label }}
+          </a>
+        </li>
+        <Modal>
+          <template #activator="{ open }">
+            <li @click="open" class="text-base">
+              <a>
+                <i class="fa-fw fa-solid fa-right-from-bracket" />
+                Sign out
+              </a>
+            </li>
+          </template>
+          <template #title>Sign out</template>
+          <template #default>
+            <p>Are you sure want to signout?</p>
+            <p>Your synchronized notes can't be accessed until you sign-in again.</p>
+          </template>
+          <template #actions="{ close }">
+            <button class="btn-sm btn" @click="close">Cancel</button>
+            <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
+          </template>
+        </Modal>
+      </ul>
+    </div>
+  </OnClickOutside>
 </template>

tailwind.config.ts

@@ -1,6 +1,7 @@
 const colors = require('tailwindcss/colors')
 const appWidth = '1280px'
 const sideBarWidth = '220px'
+const sideBarWidthMobile ='320px'
 const primary = '#1E4BC4'
 const secondary = colors.gray[500]
 
@@ -15,13 +16,16 @@ export default {
       },
       maxWidth: {
         app: appWidth,
-        sidebar: sideBarWidth
+        sidebar: sideBarWidth,
+        'sidebar-mobile': sideBarWidthMobile
       },
       width: {
-        sidebar: sideBarWidth
+        sidebar: sideBarWidth,
+        'sidebar-mobile': sideBarWidthMobile
       },
       margin: {
-        sidebar: sideBarWidth
+        sidebar: sideBarWidth,
+        'sidebar-mobile': sideBarWidthMobile
       }
     }
   },