default sidebar collapse mobile

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>