Fixed the behavior of the navigator and sidebar on the mobile (#7694)

packages/ui/src/index.ts

@@ -320,7 +320,6 @@ export const deviceOptionsStore = writable<DeviceOptions>({
   isPortrait: false,
   isMobile: false,
   navigator: { visible: true, float: false, direction: 'vertical' },
-  aside: { visible: true, float: false },
   fontSize: 0,
   size: null,
   sizes: { xs: false, sm: false, md: false, lg: false, xl: false, xxl: false },

packages/ui/src/types.ts

@@ -381,7 +381,6 @@ export interface DeviceOptions {
   isPortrait: boolean
   isMobile: boolean
   navigator: { visible: boolean, float: boolean, direction: 'vertical' | 'horizontal' }
-  aside: { visible: boolean, float: boolean }
   fontSize: number
   size: WidthType | null
   sizes: Record<WidthType, boolean>

plugins/chunter-resources/src/navigation.ts

@@ -5,8 +5,7 @@ import {
   getLocation,
   type Location,
   navigate,
-  languageStore,
-  deviceOptionsStore as deviceInfo
+  languageStore
 } from '@hcengineering/ui'
 import { type Ref, type Doc, type Class, generateId } from '@hcengineering/core'
 import activity, { type ActivityMessage } from '@hcengineering/activity'
@@ -180,10 +179,6 @@ export async function replyToThread (message: ActivityMessage, e: Event): Promis
   const fromSidebar = isElementFromSidebar(e.target as HTMLElement)
   const loc = getCurrentLocation()
 
-  const dev = get(deviceInfo)
-  dev.aside.visible = true
-  deviceInfo.set(dev)
-
   threadMessagesStore.set(message)
 
   if (fromSidebar) {

plugins/setting-resources/src/components/Settings.svelte

@@ -136,7 +136,6 @@
   const widget = client.getModel().findAllSync(workbench.class.Widget, { _id: settingPlg.ids.SettingsWidget })[0]
   $: if (moveASide && asideComponent != null && $sidebarStore.widget !== widget._id) {
     openWidget(widget, { component: asideComponent, ...asideProps }, { active: true, openedByUser: true })
-    $deviceInfo.aside.visible = true
   } else if (moveASide && asideComponent == null && $sidebarStore.widget === widget._id) {
     closeWidget(widget._id)
     minimizeSidebar()

plugins/workbench-resources/src/components/Workbench.svelte

@@ -159,19 +159,12 @@
 
   const linkProviders = client.getModel().findAllSync(view.mixin.LinkIdProvider, {})
 
+  const mobileAdaptive = $deviceInfo.isMobile && $deviceInfo.minWidth
   const defaultNavigator = !(getMetadata(workbench.metadata.NavigationExpandedDefault) ?? true)
   const savedNavigator = localStorage.getItem('hiddenNavigator')
-  const savedAside = localStorage.getItem('hiddenAside')
   let hiddenNavigator: boolean = savedNavigator !== null ? savedNavigator === 'true' : defaultNavigator
-  let hiddenAside: boolean = savedAside !== null ? savedAside === 'true' : defaultNavigator
+  let hiddenAside: boolean = true
   $deviceInfo.navigator.visible = !hiddenNavigator
-  $deviceInfo.aside.visible = !hiddenAside
-  sidebarStore.subscribe((sidebar) => {
-    if (!$deviceInfo.aside.float) {
-      hiddenAside = sidebar.variant === SidebarVariant.MINI
-      localStorage.setItem('hiddenAside', `${hiddenAside}`)
-    }
-  })
 
   async function toggleNav (): Promise<void> {
     $deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
@@ -642,37 +635,42 @@
     }
   }
   checkWorkbenchWidth()
-  $: if ($deviceInfo.docWidth <= FLOAT_ASIDE && !$deviceInfo.aside.float) {
-    $deviceInfo.aside.visible = false
-    $deviceInfo.aside.float = true
-  } else if ($deviceInfo.docWidth > FLOAT_ASIDE && $deviceInfo.aside.float) {
-    $deviceInfo.aside.float = false
-    $deviceInfo.aside.visible = !hiddenAside
+  $: if ($deviceInfo.docWidth <= FLOAT_ASIDE && !$sidebarStore.float) {
+    hiddenAside = $sidebarStore.variant === SidebarVariant.MINI
+    $sidebarStore.float = true
+  } else if ($deviceInfo.docWidth > FLOAT_ASIDE && $sidebarStore.float) {
+    $sidebarStore.float = false
+    $sidebarStore.variant = hiddenAside ? SidebarVariant.MINI : SidebarVariant.EXPANDED
   }
   const checkOnHide = (): void => {
     if ($deviceInfo.navigator.visible && $deviceInfo.navigator.float) $deviceInfo.navigator.visible = false
   }
   let oldNavVisible: boolean = $deviceInfo.navigator.visible
-  let oldASideVisible: boolean = $deviceInfo.aside.visible
-  $: if (oldNavVisible !== $deviceInfo.navigator.visible || oldASideVisible !== $deviceInfo.aside.visible) {
-    if ($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.navigator.float) {
-      if ($deviceInfo.navigator.visible && $deviceInfo.aside.visible) {
+  let oldASideVisible: boolean = $sidebarStore.variant !== SidebarVariant.MINI
+  $: if (
+    oldNavVisible !== $deviceInfo.navigator.visible ||
+    oldASideVisible !== ($sidebarStore.variant !== SidebarVariant.MINI)
+  ) {
+    if (mobileAdaptive && $deviceInfo.navigator.float) {
+      if ($deviceInfo.navigator.visible && $sidebarStore.variant !== SidebarVariant.MINI) {
         if (oldNavVisible) $deviceInfo.navigator.visible = false
-        else $deviceInfo.aside.visible = false
+        else $sidebarStore.variant = SidebarVariant.MINI
       }
     }
     oldNavVisible = $deviceInfo.navigator.visible
-    oldASideVisible = $deviceInfo.aside.visible
+    oldASideVisible = $sidebarStore.variant !== SidebarVariant.MINI
   }
   $: if (
-    $deviceInfo.aside.float &&
-    $deviceInfo.aside.visible &&
-    $sidebarStore.variant === SidebarVariant.MINI &&
+    $sidebarStore.float &&
+    $sidebarStore.variant !== SidebarVariant.MINI &&
+    $sidebarStore.widget === undefined &&
     $sidebarStore.widgetsState.size > 0
   ) {
-    $sidebarStore.variant = SidebarVariant.EXPANDED
     $sidebarStore.widget = Array.from($sidebarStore.widgetsState.keys())[0]
   }
+  location.subscribe(() => {
+    if (mobileAdaptive && $sidebarStore.variant !== SidebarVariant.MINI) $sidebarStore.variant = SidebarVariant.MINI
+  })
   $: $deviceInfo.navigator.direction = $deviceInfo.isMobile && $deviceInfo.isPortrait ? 'horizontal' : 'vertical'
   let appsMini: boolean
   $: appsMini =
@@ -976,9 +974,9 @@
         <div
           bind:this={contentPanel}
           class={navigatorModel === undefined ? 'hulyPanels-container' : 'hulyComponent overflow-hidden'}
-          class:straighteningCorners={$deviceInfo.aside.float &&
+          class:straighteningCorners={$sidebarStore.float &&
             $sidebarStore.variant === SidebarVariant.EXPANDED &&
-            !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+            !(mobileAdaptive && $deviceInfo.isPortrait)}
           data-id={'contentPanel'}
         >
           {#if currentApplication && currentApplication.component}
@@ -1022,7 +1020,7 @@
           {/if}
         </div>
       </div>
-      {#if $sidebarStore.variant === SidebarVariant.EXPANDED && !$deviceInfo.aside.float}
+      {#if $sidebarStore.variant === SidebarVariant.EXPANDED && !$sidebarStore.float}
         <Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short />
       {/if}
       <WidgetsBar />

plugins/workbench-resources/src/components/sidebar/Sidebar.svelte

@@ -61,7 +61,7 @@
   })
 </script>
 
-<div id="sidebar" class="antiPanel-application vertical sidebar-container" class:mini={mini || $deviceInfo.aside.float}>
+<div id="sidebar" class="antiPanel-application vertical sidebar-container" class:mini={mini || $sidebarStore.float}>
   {#if mini}
     <SidebarMini {widgets} {preferences} />
   {:else if $sidebarStore.variant === SidebarVariant.EXPANDED}

plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte

@@ -54,7 +54,7 @@
   $: if ($sidebarStore.widget === undefined) {
     sidebarStore.update((s) => ({ ...s, variant: SidebarVariant.MINI }))
   }
-  $: float = $deviceInfo.aside.float
+  $: float = $sidebarStore.float
 
   function closeWrongTabs (loc: Location): void {
     if (widget === undefined) return
@@ -99,7 +99,7 @@
   }
 </script>
 
-<div class="sidebar-wrap__content{float ? ` apps-${$deviceInfo.navigator.direction}` : ''}" class:float>
+<div class="sidebar-wrap__content{float ? ` float apps-${$deviceInfo.navigator.direction}` : ''}">
   {#if float && !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
     <Separator name={'main'} index={0} color={'var(--theme-navpanel-border)'} float={'sidebar'} />
   {/if}

plugins/workbench-resources/src/sidebar.ts

@@ -39,12 +39,14 @@ export interface WidgetState {
 
 export interface SidebarState {
   variant: SidebarVariant
+  float: boolean
   widgetsState: Map<Ref<Widget>, WidgetState>
   widget?: Ref<Widget>
 }
 
 export const defaultSidebarState: SidebarState = {
   variant: SidebarVariant.MINI,
+  float: false,
   widgetsState: new Map()
 }
 
@@ -75,10 +77,12 @@ function getSidebarStateFromLocalStorage (workspace: string): SidebarState {
 
   try {
     const parsed = JSON.parse(state)
+    const device = get(deviceInfo)
 
     return {
       ...defaultSidebarState,
       ...parsed,
+      variant: device.isMobile && device.minWidth ? SidebarVariant.MINI : parsed.variant ?? defaultSidebarState.variant,
       widgetsState: new Map(Object.entries(parsed.widgetsState ?? {}))
     }
   } catch (e) {
@@ -94,9 +98,14 @@ function setSidebarStateToLocalStorage (state: SidebarState): void {
 
   const sidebarStateLocalStorageKey = getSideBarLocalStorageKey(workspace)
   if (sidebarStateLocalStorageKey === undefined) return
+  const device = get(deviceInfo)
   window.localStorage.setItem(
     sidebarStateLocalStorageKey,
-    JSON.stringify({ ...state, widgetsState: Object.fromEntries(state.widgetsState.entries()) })
+    JSON.stringify({
+      ...state,
+      variant: device.isMobile && device.minWidth ? SidebarVariant.MINI : state.variant,
+      widgetsState: Object.fromEntries(state.widgetsState.entries())
+    })
   )
 }
 
@@ -255,10 +264,6 @@ export function createWidgetTab (widget: Widget, tab: WidgetTab, newTab = false)
     widgetsState,
     variant: SidebarVariant.EXPANDED
   })
-  const devInfo = get(deviceInfo)
-  if (devInfo.aside.float && !devInfo.aside.visible) {
-    deviceInfo.set({ ...devInfo, aside: { visible: true, float: true } })
-  }
 }
 
 export function pinWidgetTab (widget: Widget, tabId: string): void {
@@ -338,10 +343,6 @@ export function minimizeSidebar (closedByUser = false): void {
   }
 
   sidebarStore.set({ ...state, ...widgetsState, widget: undefined, variant: SidebarVariant.MINI })
-  const devInfo = get(deviceInfo)
-  if (devInfo.aside.float && devInfo.aside.visible) {
-    deviceInfo.set({ ...devInfo, aside: { visible: false, float: true } })
-  }
 }
 
 export function updateTabData (widget: Ref<Widget>, tabId: string, data: Record<string, any>): void {