From 4531dbd99f42cc3588bbc03c745920b94c704a64 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 27 May 2024 12:04:25 +0530
Subject: [PATCH] fix: dont show collapse button in mobile view

---
 frontend/src/components/Layouts/AppSidebar.vue     |  3 ++-
 frontend/src/components/Mobile/MobileAppHeader.vue | 10 +---------
 frontend/src/stores/settings.js                    |  6 +++++-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index dde14d02..e9ea5a97 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -74,7 +74,7 @@
         </Section>
       </div>
     </div>
-    <div class="m-2 flex flex-col gap-1">
+    <div v-if="!isMobileView" class="m-2 flex flex-col gap-1">
       <SidebarLink
         :label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
         :isCollapsed="isSidebarCollapsed"
@@ -116,6 +116,7 @@ import { notificationsStore } from '@/stores/notifications'
 import { FeatherIcon } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { computed, h } from 'vue'
+import { isMobileView } from '@/stores/settings'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
diff --git a/frontend/src/components/Mobile/MobileAppHeader.vue b/frontend/src/components/Mobile/MobileAppHeader.vue
index d96b22a9..45ad5de9 100644
--- a/frontend/src/components/Mobile/MobileAppHeader.vue
+++ b/frontend/src/components/Mobile/MobileAppHeader.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="flex border-b pr-5">
-    <div
-      v-if="isMobileView"
-      class="z-20 -mr-4 ml-2 flex items-center justify-center"
-    >
+    <div 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>
@@ -17,11 +14,6 @@
 
 <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/stores/settings.js b/frontend/src/stores/settings.js
index 0796d4ea..bfffc459 100644
--- a/frontend/src/stores/settings.js
+++ b/frontend/src/stores/settings.js
@@ -1,5 +1,6 @@
 import { createResource } from 'frappe-ui'
-import { ref } from 'vue'
+import { useScreenSize } from '@/composables'
+import { computed, ref } from 'vue'
 
 export const whatsappEnabled = ref(false)
 createResource({
@@ -21,3 +22,6 @@ createResource({
 })
 
 export const mobileSidebarOpened = ref(false)
+
+const screenSize = useScreenSize()
+export const isMobileView = computed(() => screenSize.width < 768)