fix: added mobile sidebar

frontend/src/components/Layouts/MobileLayout.vue

@@ -1 +1,13 @@
-<template></template>
+<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>

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>

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>

frontend/src/stores/settings.js

@@ -19,3 +19,5 @@ createResource({
     callEnabled.value = Boolean(data)
   },
 })
+
+export const mobileSidebarOpened = ref(false)