default sidebar collapse mobile

src/App.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { activeNote, updateNote } from '@/composables/useNotes'
 import { viewModes, activeViewMode } from '@/composables/useViewMode'
+import { windowIsMobile } from '@/utils/helpers'
 import { initialized } from '@/composables/useFirebase'
 import firebase from 'firebase/compat/app'
 import * as firebaseui from 'firebaseui'
-const sideBarCollapsed = ref(true)
+
+const sideBarCollapsed = ref(windowIsMobile())
 
 const Note = defineAsyncComponent(() => import('@/components/ViewModes/Note.vue'))
 const ListView = defineAsyncComponent(() => import('@/components/ViewModes/ListView.vue'))
@@ -33,11 +35,12 @@ provide('firebaseAuthUI', firebaseAuthUI)
       :view-modes="viewModes"
       :active-view-mode="activeViewMode"
       @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
+      @collapse="(collapse) => (sideBarCollapsed = collapse)"
       class="mt-[50px] px-3 py-6"
     />
     <main
       class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
-      :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
+      :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar max-sm:hidden'"
     >
       <template v-if="initialized">
         <Note

src/components/SideBar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { rootNote, notes, setActiveNote } from '@/composables/useNotes'
+import { rootNote, notes, setActiveNote as baseSetActiveNote } from '@/composables/useNotes'
+import { windowIsMobile } from '@/utils/helpers'
 import { initialized } from '@/composables/useFirebase'
+import { activeViewMode } from '@/composables/useViewMode';
 
 const props = defineProps<{
   viewModes: ViewMode[]
@@ -9,12 +11,23 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   setViewMode: [viewMode: ViewMode]
+  collapse: [collapse: boolean]
 }>()
+
+const setActiveNote = (noteId: string | undefined) => {
+  emit('collapse', windowIsMobile())
+  baseSetActiveNote(noteId)
+}
+
+const setViewMode = (viewMode: ViewMode) => {
+  emit('collapse', windowIsMobile())
+  emit('setViewMode', viewMode)
+}
 </script>
 <template>
   <div
     id="sidebar"
-    class="fixed top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
+    class="fixed top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:w-full max-sm:text-[120%]"
   >
     <SideBarMenu>
       <template #header>Root note</template>
@@ -39,7 +52,7 @@ const emit = defineEmits<{
             :key="viewMode.name"
             :icon="viewMode.icon"
             :active="viewMode.name === activeViewMode.name"
-            @click="emit('setViewMode', viewMode)"
+            @click="setViewMode(viewMode)"
           >
             {{ viewMode.name }}
           </SideBarMenuItem>

src/components/TopBar.vue

@@ -29,7 +29,7 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
     <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
       <div
         class="flex items-center pl-3 search-active-hide"
-        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
+        :class="sideBarCollapsed ? 'w-fit' : 'max-sm:w-fit md:w-sidebar md:pr-3'"
       >
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"

src/utils/helpers.ts

@@ -19,3 +19,5 @@ export const getAllMatches = (regex: RegExp, input: string): RegExpExecArray[] =
   } while (m)
   return matches
 }
+
+export const windowIsMobile = () =>  window.innerWidth < 640