feat: separated desktop & mobile layout

frontend/src/App.vue

@@ -1,15 +1,31 @@
 <template>
   <router-view v-if="$route.name == 'Login'" />
-  <DesktopLayout v-else-if="session().isLoggedIn">
+  <Layout v-else-if="session().isLoggedIn">
     <router-view />
-  </DesktopLayout>
+  </Layout>
   <Dialogs />
   <Toasts />
 </template>
 
 <script setup>
-import DesktopLayout from '@/components/Layouts/DesktopLayout.vue'
 import { Dialogs } from '@/utils/dialogs'
 import { sessionStore as session } from '@/stores/session'
+import { useScreenSize } from '@/composables'
 import { Toasts } from 'frappe-ui'
+import { computed, defineAsyncComponent } from 'vue'
+
+const screenSize = useScreenSize()
+const MobileLayout = defineAsyncComponent(() =>
+  import('./components/Layouts/MobileLayout.vue')
+)
+const DesktopLayout = defineAsyncComponent(() =>
+  import('./components/Layouts/DesktopLayout.vue')
+)
+const Layout = computed(() => {
+  if (screenSize.width < 640) {
+    return MobileLayout
+  } else {
+    return DesktopLayout
+  }
+})
 </script>

frontend/src/components/Layouts/MobileLayout.vue

@@ -0,0 +1 @@
+<template></template>

frontend/src/composables/index.js

@@ -0,0 +1,23 @@
+import { onMounted, onUnmounted, reactive } from 'vue'
+
+export function useScreenSize() {
+  const size = reactive({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  })
+
+  const onResize = () => {
+    size.width = window.innerWidth
+    size.height = window.innerHeight
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', onResize)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize)
+  })
+
+  return size
+}