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,12 +20,15 @@ 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>
+  <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" />
@@ -65,4 +69,5 @@ const handleClick = (fn: (...args: any[]) => any) => {
         </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
       }
     }
   },