adjust transition

src/client/js/components/Sidebar.jsx

@@ -61,7 +61,7 @@ class Sidebar extends React.Component {
     };
   }
 
-  async toggleDrawerMode(bool) {
+  toggleDrawerMode(bool) {
     const { navigationUIController } = this.props;
 
     const isStateModified = navigationUIController.state.isResizeDisabled !== bool;
@@ -69,12 +69,9 @@ class Sidebar extends React.Component {
       return;
     }
 
-    // store transition and remove
-    this.storeContextualNavigationTransition();
-
-    // switch to Drawer
+    // Drawer <-- Dock
     if (bool) {
-      // cache
+      // cache state
       this.sidebarCollapsedCached = navigationUIController.state.isCollapsed;
       this.sidebarWidthCached = navigationUIController.state.productNavWidth;
 
@@ -88,10 +85,11 @@ class Sidebar extends React.Component {
       // fix width
       navigationUIController.setState({ productNavWidth: sidebarDefaultWidth });
     }
-    // switch to Dock
+    // Drawer --> Dock
     else {
       // clear transition temporary when restore collapsed sidebar
       if (this.sidebarCollapsedCached) {
+        this.clearNavigationTransitionTemporary(this.navigationElem);
         this.clearNavigationTransitionTemporary(this.ctxNavigationElem);
       }
 

src/client/styles/scss/_sidebar.scss

@@ -59,6 +59,8 @@
     // Adjust to be on top of the growi subnavigation
     z-index: $zindex-sticky + 5;
 
+    transition: left 300ms cubic-bezier(0.25, 1, 0.5, 1);
+
     // css-xxx-Outer
     > div:nth-of-type(2) {
       width: 0;
@@ -145,10 +147,6 @@
       left: 0;
     }
   }
-
-  div[data-testid='Navigation'] {
-    transition: left 300ms cubic-bezier(0.25, 1, 0.5, 1);
-  }
 }
 
 .grw-sidebar-backdrop.modal-backdrop {