[MS] Sidebar shenanigans

Scille · Nov 5, 2024 · 920cb7b · 920cb7b
1 parent 4d89609
commit 920cb7b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/client/src/services/sidebarMenu.ts b/client/src/services/sidebarMenu.ts
@@ -3,6 +3,7 @@
 import { ref } from 'vue';
 
 const defaultWidth = 300;
+const minWidth = 2;
 const initialWidth = ref<number>(defaultWidth);
 const computedWidth = ref<number>(defaultWidth);
 
@@ -16,11 +17,17 @@ export default function useSidebarMenu(): any {
     computedWidth.value = defaultWidth;
   }
 
+  function hide(): void {
+    initialWidth.value = minWidth;
+    computedWidth.value = minWidth;
+  }
+
   return {
     defaultWidth,
     initialWidth,
     computedWidth,
     isVisible,
     reset,
+    hide,
   };
 }
diff --git a/client/src/views/client-area/ClientAreaPage.vue b/client/src/views/client-area/ClientAreaPage.vue
@@ -139,7 +139,7 @@ import CustomOrderProcessingPage from '@/views/client-area/dashboard/CustomOrder
 
 const injectionProvider: InjectionProvider = inject(InjectionProviderKey)!;
 const informationManager: InformationManager = injectionProvider.getDefault().informationManager;
-const { defaultWidth, initialWidth, computedWidth } = useSidebarMenu();
+const { defaultWidth: defaultWidth, initialWidth: initialWidth, computedWidth: computedWidth } = useSidebarMenu();
 const organizations = ref<Array<BmsOrganization>>([]);
 const divider = ref();
 const currentPage = ref<ClientAreaPages>(ClientAreaPages.Dashboard);

diff --git a/client/src/views/header/HeaderPage.vue b/client/src/views/header/HeaderPage.vue
@@ -52,7 +52,10 @@
         </div>
 
         <!-- icon menu on mobile -->
-        <ion-buttons slot="start">
+        <ion-buttons
+          slot="start"
+          v-if="isMobile()"
+        >
           <ion-menu-button />
         </ion-buttons>
         <!-- end of icon menu on mobile -->

diff --git a/client/src/views/sidebar-menu/SidebarMenuPage.vue b/client/src/views/sidebar-menu/SidebarMenuPage.vue
@@ -5,8 +5,13 @@
     <div
       class="resize-divider"
       ref="divider"
+      v-show="isVisible()"
     />
-    <ion-split-pane content-id="main">
+    <ion-split-pane
+      ref="splitPaneRef"
+      content-id="main"
+      @ion-split-pane-visible="onSplitPaneChange($event)"
+    >
       <ion-menu
         content-id="main"
         class="sidebar"
@@ -372,7 +377,7 @@ const informationManager: InformationManager = inject(InformationManagerKey)!;
 const storageManager: StorageManager = inject(StorageManagerKey)!;
 let eventDistributorCbId: string | null = null;
 const divider = ref();
-const { defaultWidth, initialWidth, computedWidth } = useSidebarMenu();
+const { defaultWidth, initialWidth, computedWidth, isVisible, reset, hide } = useSidebarMenu();
 const userInfo: Ref<ClientInfo | null> = ref(null);
 const currentDevice = ref<AvailableDevice | null>(null);
 const favorites: Ref<WorkspaceID[]> = ref([]);
@@ -381,13 +386,23 @@ const isTrialOrg = ref(false);
 const expirationDuration = ref<Duration | undefined>(undefined);
 const isExpired = ref(false);
 const loggedInDevices = ref<LoggedInDeviceInfo[]>([]);
+const splitPaneRef = ref();
 
 const watchSidebarWidthCancel = watch(computedWidth, (value: number) => {
   sidebarWidthProperty.value = `${value}px`;
   // set toast offset
   setToastOffset(value);
 });
 
+function onSplitPaneChange(event: any): void {
+  if (!event.detail.visible) {
+    hide();
+    sidebarWidthProperty.value = '2px';
+  } else {
+    reset();
+  }
+}
+
 async function goToWorkspace(workspaceHandle: WorkspaceHandle): Promise<void> {
   await navigateToWorkspace(workspaceHandle);
   await menuController.close();
@@ -471,6 +486,10 @@ onMounted(async () => {
       expirationDuration.value = getDurationBeforeExpiration(currentDevice.value.createdOn);
     }
   }
+
+  if (!splitPaneRef.value.$el.classList.contains('split-pane-visible')) {
+    hide();
+  }
 });
 
 onUnmounted(() => {