From 4fb1ea240d6eaa1604b9c35ea12040c6febe590d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 26 May 2024 13:09:17 +0530
Subject: [PATCH] feat: separated desktop & mobile layout

---
 frontend/src/App.vue                          | 22 +++++++++++++++---
 .../src/components/Layouts/MobileLayout.vue   |  1 +
 frontend/src/composables/index.js             | 23 +++++++++++++++++++
 3 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Layouts/MobileLayout.vue
 create mode 100644 frontend/src/composables/index.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7b3f6525..e03266bf 100644
--- a/frontend/src/App.vue
+++ b/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>
diff --git a/frontend/src/components/Layouts/MobileLayout.vue b/frontend/src/components/Layouts/MobileLayout.vue
new file mode 100644
index 00000000..41a40c8d
--- /dev/null
+++ b/frontend/src/components/Layouts/MobileLayout.vue
@@ -0,0 +1 @@
+<template></template>
\ No newline at end of file
diff --git a/frontend/src/composables/index.js b/frontend/src/composables/index.js
new file mode 100644
index 00000000..ff5a5bb6
--- /dev/null
+++ b/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
+}