Fixed the aSide behavior (#7588)

packages/ui/src/components/Separator.svelte

@@ -504,6 +504,27 @@
     if (parentElement != null && typeof float === 'string') parentElement.setAttribute('data-float', float)
   }
 
+  const clearContainer = (container: HTMLElement): void => {
+    if (container === null) return
+    if (container.hasAttribute('data-float')) container.removeAttribute('data-float')
+    if (container.hasAttribute('data-size')) container.removeAttribute('data-size')
+    container.style.width = ''
+    container.style.minWidth = ''
+    container.style.maxWidth = ''
+  }
+  const clearSibling = (): void => {
+    if (separators != null && prevElement != null && separators[index].float !== undefined) {
+      clearContainer(prevElement)
+    }
+    if (separators != null && nextElement != null && separators[index + 1].float !== undefined) {
+      clearContainer(nextElement)
+    }
+  }
+  const clearParent = (): void => {
+    if (parentElement === null && separator != null) parentElement = separator.parentElement as HTMLElement
+    if (parentElement != null && typeof float === 'string') clearContainer(parentElement)
+  }
+
   const calculateSeparators = (): void => {
     if (parentElement != null) {
       const elements: Element[] = Array.from(parentElement.children)
@@ -600,6 +621,10 @@
     }
   })
   onDestroy(() => {
+    if (mounted) {
+      if (sState === SeparatorState.FLOAT) clearParent()
+      else if (sState === SeparatorState.NORMAL) clearSibling()
+    }
     window.removeEventListener('resize', resizeDocument)
     if (sState !== SeparatorState.FLOAT && $separatorsStore.filter((f) => f === name).length > 0) {
       $separatorsStore = $separatorsStore.filter((f) => f !== name)

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

@@ -140,7 +140,7 @@
   updateDeviceSize()
 
   $: secondRow = checkAdaptiveMatching($deviceInfo.size, 'xs')
-  $: asideFloat = $deviceInfo.aside.float
+  $: asideFloat = checkAdaptiveMatching($deviceInfo.size, 'sm')
   $: asideOpen = $deviceInfo.aside.visible
   $: appsMini =
     $deviceInfo.isMobile &&

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

@@ -126,7 +126,8 @@
   import { get } from 'svelte/store'
 
   const HIDE_NAVIGATOR = 720
-  const HIDE_ASIDE = 1024
+  const HIDE_ASIDE = 680 // sm
+  const FLOAT_ASIDE = 1024 // lg
   let contentPanel: HTMLElement
 
   const { setTheme } = getContext<{ setTheme: (theme: string) => void }>('theme')
@@ -642,13 +643,14 @@
     }
   }
   checkWorkbenchWidth()
-  $: if ($deviceInfo.docWidth <= HIDE_ASIDE && !$deviceInfo.aside.float) {
+  $: if ($deviceInfo.docWidth <= FLOAT_ASIDE && !$deviceInfo.aside.float) {
     $deviceInfo.aside.visible = false
     $deviceInfo.aside.float = true
-  } else if ($deviceInfo.docWidth > HIDE_ASIDE && $deviceInfo.aside.float) {
+  } else if ($deviceInfo.docWidth > FLOAT_ASIDE && $deviceInfo.aside.float) {
     $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
   }
@@ -976,6 +978,7 @@
       <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}
@@ -1014,15 +1017,15 @@
         {/if}
       </div>
     </div>
-    {#if !$deviceInfo.aside.float}
+    {#if $deviceInfo.docWidth > HIDE_ASIDE}
-      {#if $sidebarStore.variant === SidebarVariant.EXPANDED}
+      {#if $sidebarStore.variant === SidebarVariant.EXPANDED && !expandedFloatASide}
         <Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short />
       {/if}
-      <WidgetsBar />
+      <WidgetsBar expandedFloat={expandedFloatASide} />
     {/if}
   </div>
   <Dock />
-  {#if $deviceInfo.aside.float}
+  {#if $deviceInfo.docWidth <= HIDE_ASIDE}
     <div
       class="antiPanel-navigator right fly no-print {$deviceInfo.navigator.direction === 'horizontal'
         ? 'portrait'
@@ -1067,6 +1070,9 @@
     &.inner {
       background-color: var(--theme-navpanel-color);
 
+      .straighteningCorners {
+        border-radius: var(--medium-BorderRadius) 0 0 var(--medium-BorderRadius);
+      }
       &.rounded {
         border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
       }

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

@@ -24,6 +24,8 @@
   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, {})
@@ -64,13 +66,14 @@
 <div
   id="sidebar"
   class="antiPanel-application vertical sidebar-container"
-  class:mini
+  class:mini={mini || expandedFloat}
-  class:float={$deviceInfo.aside.float}
+  class:expandedFloat
+  class:float={$deviceInfo.aside.float && !expandedFloat}
 >
   {#if mini}
     <SidebarMini {widgets} {preferences} />
   {:else if $sidebarStore.variant === SidebarVariant.EXPANDED}
-    <SidebarExpanded {widgets} {preferences} />
+    <SidebarExpanded {widgets} {preferences} float={expandedFloat} />
   {/if}
 </div>
 
@@ -96,8 +99,18 @@
   @media (max-width: 1024px) {
     .sidebar-container {
       width: 100%;
+
+      &:not(.expandedFloat) {
+        border-radius: var(--medium-BorderRadius);
+      }
+      &.expandedFloat {
+        border-left-color: transparent;
+      }
+    }
+  }
+  @media (max-width: 680px) {
+    .sidebar-container {
       border: 1px solid var(--theme-navpanel-divider);
-      border-radius: var(--medium-BorderRadius);
     }
   }
 </style>

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

@@ -22,7 +22,8 @@
     Location,
     Header,
     Breadcrumbs,
-    getCurrentLocation
+    getCurrentLocation,
+    Separator
   } from '@hcengineering/ui'
   import { onDestroy, onMount } from 'svelte'
 
@@ -32,6 +33,7 @@
 
   export let widgets: Widget[] = []
   export let preferences: WidgetPreference[] = []
+  export let float: boolean = false
 
   let widgetId: Ref<Widget> | undefined = undefined
   let widget: Widget | undefined = undefined
@@ -96,70 +98,92 @@
   }
 </script>
 
-<div class="sidebar-content">
+<div class="sidebar-wrap__content" class:float>
-  {#if widget?.component}
+  {#if float}
-    <div class="component" use:resizeObserver={resize}>
+    <Separator name={'main'} index={0} color={'var(--theme-navpanel-border)'} float={'sidebar'} />
-      {#if widget.headerLabel}
+  {/if}
-        <Header
+  <div class="sidebar-content">
-          allowFullsize={false}
+    {#if widget?.component}
-          type="type-aside"
+      <div class="component" use:resizeObserver={resize}>
-          hideBefore={true}
+        {#if widget.headerLabel}
-          hideActions={false}
+          <Header
-          hideDescription={true}
+            allowFullsize={false}
-          adaptive="disabled"
+            type="type-aside"
-          closeOnEscape={false}
+            hideBefore={true}
+            hideActions={false}
+            hideDescription={true}
+            adaptive="disabled"
+            closeOnEscape={false}
+            on:close={() => {
+              if (widget !== undefined) {
+                closeWidget(widget._id)
+              }
+            }}
+          >
+            <Breadcrumbs items={[{ label: widget.headerLabel }]} currentOnly />
+          </Header>
+        {/if}
+        <Component
+          is={widget?.component}
+          props={{ tab, widgetState, height: componentHeight, width: componentWidth, widget }}
           on:close={() => {
             if (widget !== undefined) {
               closeWidget(widget._id)
             }
           }}
-        >
+        />
-          <Breadcrumbs items={[{ label: widget.headerLabel }]} currentOnly />
+      </div>
-        </Header>
+    {/if}
-      {/if}
+  </div>
-      <Component
+  {#if widget !== undefined && tabs.length > 0}
-        is={widget?.component}
+    <SidebarTabs
-        props={{ tab, widgetState, height: componentHeight, width: componentWidth, widget }}
+      {tabs}
-        on:close={() => {
+      selected={tab?.id}
-          if (widget !== undefined) {
+      {widget}
-            closeWidget(widget._id)
+      on:close={(e) => {
-          }
+        void handleTabClose(e.detail, widget)
-        }}
+      }}
-      />
+      on:open={(e) => {
-    </div>
+        handleTabOpen(e.detail, widget)
+      }}
+    />
   {/if}
 </div>
-{#if widget !== undefined && tabs.length > 0}
+<WidgetsBar {widgets} {preferences} selected={widgetId} expandedFloat={float} />
-  <SidebarTabs
-    {tabs}
-    selected={tab?.id}
-    {widget}
-    on:close={(e) => {
-      void handleTabClose(e.detail, widget)
-    }}
-    on:open={(e) => {
-      handleTabOpen(e.detail, widget)
-    }}
-  />
-{/if}
-<WidgetsBar {widgets} {preferences} selected={widgetId} />
 
 <style lang="scss">
+  .sidebar-wrap__content,
   .sidebar-content {
     display: flex;
-    flex-direction: column;
-
-    border-top: 1px solid transparent; // var(--theme-divider-color);
-    border-right: 1px solid var(--theme-divider-color);
-    overflow: auto;
-
-    width: calc(100% - 3.5rem);
     height: 100%;
     min-width: 0;
     min-height: 0;
+  }
+  .sidebar-wrap__content {
+    width: calc(100% - 3.5rem);
     background-color: var(--theme-panel-color);
-
+    border-top: 1px solid transparent; // var(--theme-divider-color);
+    border-right: 1px solid var(--theme-divider-color);
     border-left: none;
+
+    &.float {
+      position: absolute;
+      top: 0;
+      right: 3.5rem;
+      border-top-color: var(--theme-divider-color);
+      border-bottom: 1px solid var(--theme-divider-color);
+      z-index: 491;
+      filter: drop-shadow(-2px 0 5px rgba(0, 0, 0, 0.2));
+    }
+
+    @media (max-width: 680px) {
+      border-top: none;
+    }
+  }
+  .sidebar-content {
+    overflow: auto;
+    flex-direction: column;
+    width: 100%;
   }
 
   .component {

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

@@ -86,11 +86,11 @@
     flex-direction: column;
     overflow-x: hidden;
     overflow-y: auto;
-    width: 30px;
+    width: 2rem;
-    min-width: 30px;
+    min-width: 2rem;
-    max-width: 30px;
+    max-width: 2rem;
     height: 100%;
-    border-right: 1px solid var(--theme-divider-color);
+    border-left: 1px solid var(--theme-divider-color);
     gap: 0.25rem;
     align-items: center;
     padding: 0.25rem 0;

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

@@ -24,6 +24,7 @@
   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 })
@@ -31,7 +32,7 @@
 
   function handleSelectWidget (widget: Widget): void {
     if (selected === widget._id) {
-      if ($deviceInfo.aside.float) $deviceInfo.aside.visible = false
+      if ($deviceInfo.aside.float && !expandedFloat) $deviceInfo.aside.visible = false
       else minimizeSidebar(true)
     } else {
       openWidget(widget, $sidebarStore.widgetsState.get(widget._id)?.data, { active: true, openedByUser: true })