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