From 9655cbe5b5541d1523e044f99fd1ef81ca183385 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 27 May 2024 11:43:37 +0530
Subject: [PATCH] fix: added mobile sidebar

---
 .../src/components/Layouts/MobileLayout.vue   | 14 ++++++-
 .../src/components/Mobile/MobileAppHeader.vue | 27 +++++++++++++
 .../src/components/Mobile/MobileSidebar.vue   | 38 +++++++++++++++++++
 frontend/src/stores/settings.js               |  2 +
 4 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Mobile/MobileAppHeader.vue
 create mode 100644 frontend/src/components/Mobile/MobileSidebar.vue

diff --git a/frontend/src/components/Layouts/MobileLayout.vue b/frontend/src/components/Layouts/MobileLayout.vue
index 41a40c8d..7214c8f3 100644
--- a/frontend/src/components/Layouts/MobileLayout.vue
+++ b/frontend/src/components/Layouts/MobileLayout.vue
@@ -1 +1,13 @@
-<template></template>
\ No newline at end of file
+<template>
+  <div class="flex h-screen w-screen">
+    <MobileSidebar />
+    <div class="flex h-full flex-1 flex-col overflow-auto">
+      <MobileAppHeader />
+      <slot />
+    </div>
+  </div>
+</template>
+<script setup>
+import MobileSidebar from '@/components/Mobile/MobileSidebar.vue'
+import MobileAppHeader from '@/components/Mobile/MobileAppHeader.vue'
+</script>
diff --git a/frontend/src/components/Mobile/MobileAppHeader.vue b/frontend/src/components/Mobile/MobileAppHeader.vue
new file mode 100644
index 00000000..d96b22a9
--- /dev/null
+++ b/frontend/src/components/Mobile/MobileAppHeader.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex border-b pr-5">
+    <div
+      v-if="isMobileView"
+      class="z-20 -mr-4 ml-2 flex items-center justify-center"
+    >
+      <Button variant="ghosted" @click="sidebarOpened = !sidebarOpened">
+        <FeatherIcon name="menu" class="size-4" />
+      </Button>
+    </div>
+    <div id="app-header" class="flex-1"></div>
+    <div class="flex items-center justify-center">
+      <CallUI />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CallUI from '@/components/CallUI.vue'
+import { useScreenSize } from '@/composables'
+import { Button, FeatherIcon } from 'frappe-ui'
+import { computed } from 'vue'
+import { mobileSidebarOpened as sidebarOpened } from '@/stores/settings'
+
+const screenSize = useScreenSize()
+const isMobileView = computed(() => screenSize.width < 640)
+</script>
diff --git a/frontend/src/components/Mobile/MobileSidebar.vue b/frontend/src/components/Mobile/MobileSidebar.vue
new file mode 100644
index 00000000..aaa9d866
--- /dev/null
+++ b/frontend/src/components/Mobile/MobileSidebar.vue
@@ -0,0 +1,38 @@
+<template>
+  <TransitionRoot :show="sidebarOpened">
+    <Dialog as="div" @close="sidebarOpened = false" class="fixed inset-0 z-40">
+      <TransitionChild
+        as="template"
+        enter="transition ease-in-out duration-200 transform"
+        enter-from="-translate-x-full"
+        enter-to="translate-x-0"
+        leave="transition ease-in-out duration-200 transform"
+        leave-from="translate-x-0"
+        leave-to="-translate-x-full"
+      >
+        <AppSidebar class="z-10 !w-[260px] border-r bg-gray-50" />
+      </TransitionChild>
+      <TransitionChild
+        as="template"
+        enter="transition-opacity ease-linear duration-200"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity ease-linear duration-200"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-50" />
+      </TransitionChild>
+    </Dialog>
+  </TransitionRoot>
+</template>
+<script setup>
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogOverlay,
+} from '@headlessui/vue'
+import AppSidebar from '@/components/Layouts/AppSidebar.vue'
+import { mobileSidebarOpened as sidebarOpened } from '@/stores/settings'
+</script>
diff --git a/frontend/src/stores/settings.js b/frontend/src/stores/settings.js
index 534ade97..0796d4ea 100644
--- a/frontend/src/stores/settings.js
+++ b/frontend/src/stores/settings.js
@@ -19,3 +19,5 @@ createResource({
     callEnabled.value = Boolean(data)
   },
 })
+
+export const mobileSidebarOpened = ref(false)