Fixed navigators and aSide behavior when the document size is small. (#7613)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

packages/theme/styles/_colors.scss

@@ -137,6 +137,7 @@
   --theme-navpanel-border: rgba(255, 255, 255, .1);
   --theme-navpanel-icons-color: #7F7F7F;
   --theme-navpanel-icons-divider: rgba(255, 255, 255, .11);
+  --theme-navpanel-shadow-mobile: drop-shadow(0 0 3px rgba(0, 0, 0, .5));
   --theme-comp-header-color: #1F1F2C;
   --theme-divider-color: rgba(255, 255, 255, .06);
   --theme-bg-divider-color: #282834;
@@ -395,6 +396,7 @@
   --theme-navpanel-border: rgba(0, 0, 0, .06);
   --theme-navpanel-icons-color: #7F7F7F;
   --theme-navpanel-icons-divider: rgba(0, 0, 0, .1);
+  --theme-navpanel-shadow-mobile: drop-shadow(0 0 2px rgba(0, 0, 0, .2));
   --theme-comp-header-color: #FBFBFC;
   --theme-divider-color: rgba(0, 0, 0, .06);
   --theme-bg-divider-color: #E3E3E5;

packages/theme/styles/common.scss

@@ -141,14 +141,11 @@
 }
 .antiPanel-navigator {
   position: relative;
+  min-width: 12.5rem;
+  max-width: 22.5rem;
+  width: 17.5rem;
   
   &:not(.second) { background-color: var(--theme-navpanel-color); }
-  &:not(.right) {
-    min-width: 12.5rem;
-    max-width: 22.5rem;
-    width: 17.5rem;
-  }
-  &.right { border-radius: var(--medium-BorderRadius); }
   &.second.float {
     background-color: var(--theme-navpanel-color);
     filter: drop-shadow(2px 0 5px rgba(0, 0, 0, .2));
@@ -174,40 +171,41 @@
 
   &.fly:not(.second) {
     position: fixed;
+    top: calc(var(--status-bar-height) + 1px);
+    height: calc(100% - var(--status-bar-height) - 2px);
     background-color: var(--theme-navpanel-color);
     z-index: 450;
-    
-    &:not(.right) {
-      top: calc(var(--status-bar-height) + 1px);
-      height: calc(100% - var(--status-bar-height) - 2px);
-      filter: drop-shadow(2px 0 5px rgba(0, 0, 0, .2));
+    filter: drop-shadow(2px 0 5px rgba(0, 0, 0, .2));
 
-      &.portrait { left: 0; }
-      &.landscape { left: var(--app-panel-width); }
-    }
-    &.right {
-      top: var(--status-bar-height);
-      right: 0;
-      height: calc(100% - var(--status-bar-height));
-      background-color: var(--theme-statusbar-color);
-      filter: drop-shadow(-2px 0 5px rgba(0, 0, 0, .2));
-    }
+    &.portrait { left: 0; }
+    &.landscape { left: var(--app-panel-width); }
   }
 }
 
 @media (max-width: 480px) {
   .mobile-theme {
     .mobile-wrapper,
-    .antiPanel-navigator:not(.right) {
+    .antiPanel-navigator {
       overflow: hidden;
       border: 1px solid var(--theme-divider-color);
       border-radius: var(--medium-BorderRadius);
     }
-    .antiPanel-navigator:not(.right) {
+    .antiPanel-navigator {
       top: var(--status-bar-height);
-      height: calc(100% - var(--status-bar-height));
+      height: calc(100% - var(--status-bar-height) - var(--app-panel-width));
 
       .antiSeparator { display: none; }
+      &.fly {
+        width: calc(100% - 3.5rem) !important;
+        filter: var(--theme-navpanel-shadow-mobile);
+      }
+      &.second.float.fly {
+        height: calc(100% - var(--status-bar-height) - var(--app-panel-width) - 3.5rem);
+      }
+      &.fly:not(.second) {
+        top: var(--status-bar-height);
+        height: calc(100% - var(--status-bar-height) - var(--app-panel-width));
+      }
     }
   }
 }

packages/ui/src/components/PanelInstance.svelte

@@ -93,9 +93,9 @@
                 top: 'var(--status-bar-height)',
                 bottom: '4.25rem',
                 left: '0',
-                right: '0',
-                width: '100%',
-                height: 'calc(100dvh - var(--status-bar-height) - 4.25rem)',
+                right: '3.5rem',
+                width: '',
+                height: 'calc(100dvh - var(--status-bar-height) - var(--app-panel-width))',
                 maxWidth: '100%',
                 maxHeight: '100%',
                 minWidth: '0'

packages/ui/src/components/Scroller.svelte

@@ -921,7 +921,6 @@
     border-radius: 0.125rem;
     box-shadow: 0 0 1px 1px var(--theme-overlay-color);
     opacity: 0;
-    z-index: 1;
     cursor: pointer;
 
     &.hovered {

packages/ui/src/components/internal/Root.svelte

@@ -10,10 +10,7 @@
     IconArrowRight,
     checkMobile,
     deviceOptionsStore as deviceInfo,
-    checkAdaptiveMatching,
-    ButtonIcon,
-    IconDetailsFilled,
-    IconDetails
+    checkAdaptiveMatching
   } from '../../'
   import { desktopPlatform, getCurrentLocation, location, locationStorageKeyId, navigate } from '../../location'
   import uiPlugin from '../../plugin'
@@ -140,8 +137,6 @@
   updateDeviceSize()
 
   $: secondRow = checkAdaptiveMatching($deviceInfo.size, 'xs')
-  $: asideFloat = checkAdaptiveMatching($deviceInfo.size, 'sm')
-  $: asideOpen = $deviceInfo.aside.visible
   $: appsMini =
     $deviceInfo.isMobile &&
     (($deviceInfo.isPortrait && $deviceInfo.docWidth <= 480) ||
@@ -200,20 +195,6 @@
           {/if}
         </div>
         <div class="flex-row-reverse" style:-webkit-app-region={'no-drag'}>
-          {#if asideFloat && !secondRow}
-            <div class="antiHSpacer x2" />
-            <ButtonIcon
-              icon={asideOpen ? IconDetailsFilled : IconDetails}
-              iconProps={{ fill: 'var(--theme-dark-color)' }}
-              kind={'tertiary'}
-              size={'extra-small'}
-              hasMenu
-              pressed={$deviceInfo.aside.visible}
-              on:click={() => {
-                $deviceInfo.aside.visible = !$deviceInfo.aside.visible
-              }}
-            />
-          {/if}
           <div class="clock">
             <Clock />
           </div>
@@ -234,17 +215,6 @@
           </div>
           <div class="flex-row-center flex-gap-0-5">
             <RootBarExtension position="right" />
-            <ButtonIcon
-              icon={asideOpen ? IconDetailsFilled : IconDetails}
-              iconProps={{ fill: 'var(--theme-dark-color)' }}
-              kind={'tertiary'}
-              size={'extra-small'}
-              hasMenu
-              pressed={$deviceInfo.aside.visible}
-              on:click={() => {
-                $deviceInfo.aside.visible = !$deviceInfo.aside.visible
-              }}
-            />
           </div>
         </div>
       {/if}

packages/ui/src/resize.ts

@@ -170,7 +170,7 @@ export const twoPanelsSeparators: DefSeparators = [
 ]
 
 export const mainSeparators: DefSeparators = [
-  { minSize: 30, size: 'auto', maxSize: 'auto' },
+  { minSize: 20, size: 'auto', maxSize: 'auto' },
   { minSize: 25, size: 30, maxSize: 80, float: 'sidebar' }
 ]
 

plugins/chunter-resources/src/components/chat/Chat.svelte

@@ -175,7 +175,9 @@
       <div class="antiPanel-wrap__content hulyNavPanel-container">
         <ChatNavigator {object} {currentSpecial} on:select={handleChannelSelected} />
       </div>
-      <Separator name="chat" float={$deviceInfo.navigator.float ? 'navigator' : true} index={0} />
+      {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+        <Separator name="chat" float={$deviceInfo.navigator.float ? 'navigator' : true} index={0} />
+      {/if}
     </div>
     <Separator
       name="chat"

plugins/hr-resources/src/components/Schedule.svelte

@@ -34,7 +34,7 @@
     Breadcrumb,
     Switcher,
     defineSeparators,
-    workbenchSeparators,
+    twoPanelsSeparators,
     deviceOptionsStore as deviceInfo,
     tableToCSV,
     showPopup
@@ -180,7 +180,7 @@
   $: $deviceInfo.replacedPanel = replacedPanel
   onDestroy(() => ($deviceInfo.replacedPanel = undefined))
 
-  defineSeparators('workbench', workbenchSeparators)
+  defineSeparators('schedule', twoPanelsSeparators)
 </script>
 
 <div class="hulyPanels-container">
@@ -194,9 +194,8 @@
       }}
     />
     <Separator
-      name={'workbench'}
+      name={'schedule'}
       float={$deviceInfo.navigator.float}
-      disabledWhen={['panel-aside']}
       index={0}
       color={'transparent'}
       separatorSize={0}

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Ref } from '@hcengineering/core'
   import { Department } from '@hcengineering/hr'
-  import { Scroller, Separator } from '@hcengineering/ui'
+  import { Scroller, Separator, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import { TreeNode } from '@hcengineering/view-resources'
   import { NavFooter, NavHeader } from '@hcengineering/workbench-resources'
 
@@ -26,13 +26,14 @@
   export let department: Ref<Department>
   export let descendants: Map<Ref<Department>, Department[]>
   export let departmentById: Map<Ref<Department>, Department>
-  export let navFloat: boolean = false
-  export let appsDirection: 'horizontal' | 'vertical' = 'horizontal'
 
   const departments = [hr.ids.Head]
 </script>
 
-<div class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'} border-left">
+<div
+  class="antiPanel-navigator {$deviceInfo.navigator.direction === 'horizontal' ? 'portrait' : 'landscape'} border-left"
+  class:fly={$deviceInfo.navigator.float}
+>
   <div class="antiPanel-wrap__content hulyNavPanel-container">
     <NavHeader label={hr.string.HRApplication} />
 
@@ -50,10 +51,12 @@
 
     <NavFooter />
   </div>
-  <Separator
-    name={'workbench'}
-    float={navFloat ? 'navigator' : true}
-    index={0}
-    color={'var(--theme-navpanel-border)'}
-  />
+  {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+    <Separator
+      name={'schedule'}
+      float={$deviceInfo.navigator.float ? 'navigator' : true}
+      index={0}
+      color={'var(--theme-navpanel-border)'}
+    />
+  {/if}
 </div>

plugins/notification-resources/src/components/inbox/Inbox.svelte

@@ -429,7 +429,9 @@
           />
         </Scroller>
       </div>
-      <Separator name="inbox" float={$deviceInfo.navigator.float ? 'navigator' : true} index={0} />
+      {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+        <Separator name="inbox" float={$deviceInfo.navigator.float ? 'navigator' : true} index={0} />
+      {/if}
     </div>
     <Separator
       name="inbox"

plugins/time-resources/src/components/PlanView.svelte

@@ -91,6 +91,7 @@
 <div
   class="flex-col w-full clear-mins mobile-wrapper"
   class:left-divider={!$deviceInfo.navigator.visible}
+  class:right-divider={!visibleCalendar}
   bind:this={mainPanel}
 >
   <ToDos {mode} {tag} bind:currentDate />

plugins/time-resources/src/components/ToDosNavigator.svelte

@@ -205,13 +205,15 @@
     </Scroller>
     <NavFooter />
   </div>
-  <Separator
-    name={'time'}
-    float={$deviceInfo.navigator.float ? 'navigator' : true}
-    index={0}
-    disabledWhen={['panel-aside']}
-    color={'var(--theme-divider-color)'}
-  />
+  {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+    <Separator
+      name={'time'}
+      float={$deviceInfo.navigator.float ? 'navigator' : true}
+      index={0}
+      disabledWhen={['panel-aside']}
+      color={'var(--theme-divider-color)'}
+    />
+  {/if}
 </div>
 
 <style lang="scss">

plugins/time-resources/src/components/team/Team.svelte

@@ -98,7 +98,6 @@
       name={'team'}
       float={$deviceInfo.navigator.float}
       index={0}
-      disabledWhen={['panel-aside']}
       color={'transparent'}
       separatorSize={0}
       short

plugins/time-resources/src/components/team/TeamNavigator.svelte

@@ -88,11 +88,12 @@
     </Scroller>
     <NavFooter />
   </div>
-  <Separator
-    name={'time'}
-    float={$deviceInfo.navigator.float ? 'navigator' : true}
-    index={1}
-    disabledWhen={['panel-aside']}
-    color={'var(--theme-divider-color)'}
-  />
+  {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+    <Separator
+      name={'time'}
+      float={$deviceInfo.navigator.float ? 'navigator' : true}
+      index={0}
+      color={'var(--theme-divider-color)'}
+    />
+  {/if}
 </div>

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

@@ -156,12 +156,14 @@
           on:select={onSelected}
         />
       </div>
-      <Separator
-        name={'parentsNavigator'}
-        float={floatNavigator ? 'navigator' : true}
-        index={0}
-        color={'var(--theme-divider-color)'}
-      />
+      {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+        <Separator
+          name={'parentsNavigator'}
+          float={floatNavigator ? 'navigator' : true}
+          index={0}
+          color={'var(--theme-divider-color)'}
+        />
+      {/if}
     </div>
     <Separator name={'parentsNavigator'} float={floatNavigator} index={0} color={'var(--theme-divider-color)'} />
   {/if}

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

@@ -126,7 +126,6 @@
   import { get } from 'svelte/store'
 
   const HIDE_NAVIGATOR = 720
-  const HIDE_ASIDE = 680 // sm
   const FLOAT_ASIDE = 1024 // lg
   let contentPanel: HTMLElement
 
@@ -650,7 +649,6 @@
     $deviceInfo.aside.float = false
     $deviceInfo.aside.visible = !hiddenAside
   }
-  $: expandedFloatASide = $deviceInfo.docWidth <= FLOAT_ASIDE && $deviceInfo.docWidth > HIDE_ASIDE
   const checkOnHide = (): void => {
     if ($deviceInfo.navigator.visible && $deviceInfo.navigator.float) $deviceInfo.navigator.visible = false
   }
@@ -780,10 +778,7 @@
       <path d="M15.8,17.5h1.8v-0.4C17,17.4,16.4,17.5,15.8,17.5z" />
     </clipPath>
   </svg>
-  <div
-    class="workbench-container"
-    style:flex-direction={$deviceInfo.navigator.direction === 'horizontal' ? 'column-reverse' : 'row'}
-  >
+  <div class="workbench-container apps-{$deviceInfo.navigator.direction}">
     <div
       class="antiPanel-application {$deviceInfo.navigator.direction} no-print"
       class:lastDivider={!$deviceInfo.navigator.visible}
@@ -910,134 +905,125 @@
         application: currentApplication?._id
       }}
     />
-    <div
-      class="workbench-container inner"
-      class:rounded={$sidebarStore.variant === SidebarVariant.EXPANDED}
-      use:resizeObserver={(element) => {
-        workbenchWidth = element.clientWidth
-        checkWorkbenchWidth()
-      }}
-    >
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      {#if $deviceInfo.navigator.float && $deviceInfo.navigator.visible}
-        <div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
-      {/if}
-      {#if mainNavigator}
-        <div
-          class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
-            ? 'portrait'
-            : 'landscape'} border-left"
-          class:fly={$deviceInfo.navigator.float}
-        >
-          <div class="antiPanel-wrap__content hulyNavPanel-container">
-            {#if currentApplication}
-              <NavHeader label={currentApplication.label} />
-              {#if currentApplication.navHeaderComponent}
-                <Component
-                  is={currentApplication.navHeaderComponent}
-                  props={{
-                    currentSpace,
-                    currentSpecial,
-                    currentFragment
-                  }}
-                  shrink
-                />
+    <div class="flex-row-center w-full h-full">
+      <div
+        class="workbench-container inner"
+        class:rounded={$sidebarStore.variant === SidebarVariant.EXPANDED}
+        use:resizeObserver={(element) => {
+          workbenchWidth = element.clientWidth
+          checkWorkbenchWidth()
+        }}
+      >
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        {#if $deviceInfo.navigator.float && $deviceInfo.navigator.visible}
+          <div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
+        {/if}
+        {#if mainNavigator}
+          <div
+            class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
+              ? 'portrait'
+              : 'landscape'} border-left"
+            class:fly={$deviceInfo.navigator.float}
+          >
+            <div class="antiPanel-wrap__content hulyNavPanel-container">
+              {#if currentApplication}
+                <NavHeader label={currentApplication.label} />
+                {#if currentApplication.navHeaderComponent}
+                  <Component
+                    is={currentApplication.navHeaderComponent}
+                    props={{
+                      currentSpace,
+                      currentSpecial,
+                      currentFragment
+                    }}
+                    shrink
+                  />
+                {/if}
               {/if}
+              <Navigator
+                {currentSpace}
+                {currentSpecial}
+                {currentFragment}
+                model={navigatorModel}
+                {currentApplication}
+                on:open={checkOnHide}
+              />
+              <NavFooter>
+                {#if currentApplication && currentApplication.navFooterComponent}
+                  <Component is={currentApplication.navFooterComponent} props={{ currentSpace }} />
+                {/if}
+              </NavFooter>
+            </div>
+            {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+              <Separator
+                name={'workbench'}
+                float={$deviceInfo.navigator.float ? 'navigator' : true}
+                index={0}
+                color={'var(--theme-navpanel-border)'}
+              />
             {/if}
-            <Navigator
-              {currentSpace}
-              {currentSpecial}
-              {currentFragment}
-              model={navigatorModel}
-              {currentApplication}
-              on:open={checkOnHide}
-            />
-            <NavFooter>
-              {#if currentApplication && currentApplication.navFooterComponent}
-                <Component is={currentApplication.navFooterComponent} props={{ currentSpace }} />
-              {/if}
-            </NavFooter>
           </div>
           <Separator
             name={'workbench'}
-            float={$deviceInfo.navigator.float ? 'navigator' : true}
+            float={$deviceInfo.navigator.float}
             index={0}
-            color={'var(--theme-navpanel-border)'}
+            color={'transparent'}
+            separatorSize={0}
+            short
           />
-        </div>
-        <Separator
-          name={'workbench'}
-          float={$deviceInfo.navigator.float}
-          index={0}
-          color={'transparent'}
-          separatorSize={0}
-          short
-        />
-      {/if}
-      <div
-        bind:this={contentPanel}
-        class={navigatorModel === undefined ? 'hulyPanels-container' : 'hulyComponent overflow-hidden'}
-        class:straighteningCorners={expandedFloatASide && $sidebarStore.variant === SidebarVariant.EXPANDED}
-        data-id={'contentPanel'}
-      >
-        {#if currentApplication && currentApplication.component}
-          <Component
-            is={currentApplication.component}
-            props={{
-              currentSpace
-            }}
-          />
-        {:else if specialComponent}
-          <Component
-            is={specialComponent.component}
-            props={{
-              model: navigatorModel,
-              ...specialComponent.componentProps,
-              currentSpace,
-              space: currentSpace,
-              navigationModel: specialComponent?.navigationModel
-            }}
-            on:action={(e) => {
-              if (e?.detail) {
-                const loc = getCurrentLocation()
-                loc.query = { ...loc.query, ...e.detail }
-                navigate(loc)
-              }
-            }}
-          />
-        {:else if currentView?.component !== undefined}
-          <Component is={currentView.component} props={{ ...currentView.componentProps, currentView }} />
-        {:else if $accessDeniedStore}
-          <div class="flex-center h-full">
-            <h2><Label label={workbench.string.AccessDenied} /></h2>
-          </div>
-        {:else}
-          <SpaceView {currentSpace} {currentView} {createItemDialog} {createItemLabel} />
         {/if}
+        <div
+          bind:this={contentPanel}
+          class={navigatorModel === undefined ? 'hulyPanels-container' : 'hulyComponent overflow-hidden'}
+          class:straighteningCorners={$deviceInfo.aside.float &&
+            $sidebarStore.variant === SidebarVariant.EXPANDED &&
+            !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+          data-id={'contentPanel'}
+        >
+          {#if currentApplication && currentApplication.component}
+            <Component
+              is={currentApplication.component}
+              props={{
+                currentSpace
+              }}
+            />
+          {:else if specialComponent}
+            <Component
+              is={specialComponent.component}
+              props={{
+                model: navigatorModel,
+                ...specialComponent.componentProps,
+                currentSpace,
+                space: currentSpace,
+                navigationModel: specialComponent?.navigationModel
+              }}
+              on:action={(e) => {
+                if (e?.detail) {
+                  const loc = getCurrentLocation()
+                  loc.query = { ...loc.query, ...e.detail }
+                  navigate(loc)
+                }
+              }}
+            />
+          {:else if currentView?.component !== undefined}
+            <Component is={currentView.component} props={{ ...currentView.componentProps, currentView }} />
+          {:else if $accessDeniedStore}
+            <div class="flex-center h-full">
+              <h2><Label label={workbench.string.AccessDenied} /></h2>
+            </div>
+          {:else}
+            <SpaceView {currentSpace} {currentView} {createItemDialog} {createItemLabel} />
+          {/if}
+        </div>
       </div>
-    </div>
-    {#if $deviceInfo.docWidth > HIDE_ASIDE}
-      {#if $sidebarStore.variant === SidebarVariant.EXPANDED && !expandedFloatASide}
+      {#if $sidebarStore.variant === SidebarVariant.EXPANDED && !$deviceInfo.aside.float}
         <Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short />
       {/if}
-      <WidgetsBar expandedFloat={expandedFloatASide} />
-    {/if}
+      <WidgetsBar />
+    </div>
   </div>
   <Dock />
-  {#if $deviceInfo.docWidth <= HIDE_ASIDE}
-    <div
-      class="antiPanel-navigator right fly no-print {$deviceInfo.navigator.direction === 'horizontal'
-        ? 'portrait'
-        : 'landscape'}"
-      style:display={$deviceInfo.aside.visible ? 'flex' : 'none'}
-    >
-      <Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short float={'sidebar'} />
-      <div class="antiPanel-wrap__content hulyNavPanel-container">
-        <WidgetsBar />
-      </div>
-    </div>
-  {/if}
   <div bind:this={cover} class="cover" />
   <TooltipInstance />
   <PanelInstance bind:this={panelInstance} contentPanel={elementPanel}>
@@ -1067,6 +1053,9 @@
     background-color: var(--theme-panel-color);
     touch-action: none;
 
+    &.apps-horizontal {
+      flex-direction: column-reverse;
+    }
     &.inner {
       background-color: var(--theme-navpanel-color);
 

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

@@ -24,8 +24,6 @@
   import SidebarMini from './SidebarMini.svelte'
   import SidebarExpanded from './SidebarExpanded.svelte'
 
-  export let expandedFloat: boolean = false
-
   const client = getClient()
 
   const widgets = client.getModel().findAllSync(workbench.class.Widget, {})
@@ -63,17 +61,11 @@
   })
 </script>
 
-<div
-  id="sidebar"
-  class="antiPanel-application vertical sidebar-container"
-  class:mini={mini || expandedFloat}
-  class:expandedFloat
-  class:float={$deviceInfo.aside.float && !expandedFloat}
->
+<div id="sidebar" class="antiPanel-application vertical sidebar-container" class:mini={mini || $deviceInfo.aside.float}>
   {#if mini}
     <SidebarMini {widgets} {preferences} />
   {:else if $sidebarStore.variant === SidebarVariant.EXPANDED}
-    <SidebarExpanded {widgets} {preferences} float={expandedFloat} />
+    <SidebarExpanded {widgets} {preferences} />
   {/if}
 </div>
 
@@ -84,33 +76,23 @@
     min-width: 25rem;
     border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
 
-    &.mini:not(.float) {
+    &.mini {
+      justify-content: flex-end;
       width: calc(3.5rem + 1px) !important;
       min-width: calc(3.5rem + 1px) !important;
       max-width: calc(3.5rem + 1px) !important;
     }
-    &.mini.float {
-      justify-content: flex-end;
-    }
-    &.float > :global(.sidebar-content) {
-      border-top: none;
-    }
   }
   @media (max-width: 1024px) {
     .sidebar-container {
       width: 100%;
-
-      &:not(.expandedFloat) {
-        border-radius: var(--medium-BorderRadius);
-      }
-      &.expandedFloat {
-        border-left-color: transparent;
-      }
+      border-left-color: transparent;
     }
   }
-  @media (max-width: 680px) {
-    .sidebar-container {
-      border: 1px solid var(--theme-navpanel-divider);
+  @media (max-width: 480px) {
+    :global(.mobile-theme) .sidebar-container {
+      border-right: none;
+      border-bottom-right-radius: 0 !important;
     }
   }
 </style>

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

@@ -23,7 +23,8 @@
     Header,
     Breadcrumbs,
     getCurrentLocation,
-    Separator
+    Separator,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
   import { onDestroy, onMount } from 'svelte'
 
@@ -33,7 +34,6 @@
 
   export let widgets: Widget[] = []
   export let preferences: WidgetPreference[] = []
-  export let float: boolean = false
 
   let widgetId: Ref<Widget> | undefined = undefined
   let widget: Widget | undefined = undefined
@@ -54,6 +54,7 @@
   $: if ($sidebarStore.widget === undefined) {
     sidebarStore.update((s) => ({ ...s, variant: SidebarVariant.MINI }))
   }
+  $: float = $deviceInfo.aside.float
 
   function closeWrongTabs (loc: Location): void {
     if (widget === undefined) return
@@ -99,7 +100,7 @@
 </script>
 
 <div class="sidebar-wrap__content" class:float>
-  {#if float}
+  {#if float && !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
     <Separator name={'main'} index={0} color={'var(--theme-navpanel-border)'} float={'sidebar'} />
   {/if}
   <div class="sidebar-content">
@@ -149,7 +150,7 @@
     />
   {/if}
 </div>
-<WidgetsBar {widgets} {preferences} selected={widgetId} expandedFloat={float} />
+<WidgetsBar {widgets} {preferences} selected={widgetId} />
 
 <style lang="scss">
   .sidebar-wrap__content,
@@ -172,12 +173,16 @@
       right: 3.5rem;
       border-top-color: var(--theme-divider-color);
       border-bottom: 1px solid var(--theme-divider-color);
-      z-index: 491;
+      z-index: 440;
       filter: drop-shadow(-2px 0 5px rgba(0, 0, 0, 0.2));
-    }
 
-    @media (max-width: 680px) {
-      border-top: none;
+      :global(.mobile-theme) & {
+        overflow: hidden;
+        height: calc(100% - var(--app-panel-width));
+        border: 1px solid var(--theme-divider-color);
+        border-radius: var(--medium-BorderRadius);
+        filter: var(--theme-navpanel-shadow-mobile);
+      }
     }
   }
   .sidebar-content {

plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte

@@ -24,7 +24,6 @@
   export let widgets: Widget[] = []
   export let preferences: WidgetPreference[] = []
   export let selected: Ref<Widget> | undefined = undefined
-  export let expandedFloat: boolean = false
 
   function handleAddWidget (): void {
     showPopup(AddWidgetsPopup, { widgets })
@@ -32,8 +31,7 @@
 
   function handleSelectWidget (widget: Widget): void {
     if (selected === widget._id) {
-      if ($deviceInfo.aside.float && !expandedFloat) $deviceInfo.aside.visible = false
-      else minimizeSidebar(true)
+      minimizeSidebar(true)
     } else {
       openWidget(widget, $sidebarStore.widgetsState.get(widget._id)?.data, { active: true, openedByUser: true })
     }