Merge pull request #5406 from weseek/fix/86678-navigation-resize-button

fix: Layer stack of grw-navigation-resize-button

packages/app/src/styles/_sidebar.scss

@@ -25,66 +25,6 @@
   // set the max value that should be taken when sticky
   height: calc(100vh - $grw-navbar-border-width);
 
-  .grw-navigation-resize-button {
-    position: fixed;
-
-    $width: 27.691px;
-    $height: 23.999px;
-
-    @mixin hitarea($size-hitarea) {
-      top: ($width - $size-hitarea) / 2;
-      left: ($height - $size-hitarea) / 2;
-      width: $size-hitarea;
-      height: $size-hitarea;
-    }
-
-    // locate to the center of screen
-    top: calc(50vh - $height/2);
-
-    padding: 0px;
-    background-color: transparent;
-    border: 0;
-    opacity: 0;
-    transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
-    transform: translateX(-50%);
-
-    .hexagon-container {
-      // set transform
-      svg * {
-        transition: fill 100ms linear;
-      }
-      svg {
-        width: $width + 2px; // add 1px for drop-shadow
-        height: $height + 2px; // add 1px for drop-shadow
-        .background {
-          filter: drop-shadow(0px 1px 0px rgba(#999, 60%));
-        }
-      }
-    }
-    .hitarea {
-      @extend .rounded-pill;
-
-      position: absolute;
-      @include hitarea(30px);
-    }
-
-    // reverse and center icon at the time of collapsed
-    &.collapsed {
-      opacity: 1;
-      .hexagon-container svg {
-        transform: rotate(180deg);
-      }
-      .hitarea {
-        @include hitarea(80px);
-      }
-    }
-  }
-  &:hover {
-    .grw-navigation-resize-button {
-      opacity: 1;
-    }
-  }
-
   // override @atlaskit/navigation-next styles
   $navbar-total-height: $grw-navbar-height + $grw-navbar-border-width;
   .data-layout-container {
@@ -145,20 +85,6 @@
       left: 100%;
       z-index: 100; // greater than the value of slimScrollBar
       width: 0;
-      transform: unset; // unset for 'position: fixed' of .ak-navigation-resize-button
-      .grw-navigation-draggable-first-child {
-        position: absolute;
-        top: 0px;
-        bottom: 0px;
-        left: -3px;
-        width: 3px;
-        pointer-events: none;
-        background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0) 100%);
-        opacity: 0.5;
-        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
-        transition-duration: 0.22s;
-        transition-property: left, opacity, width;
-      }
       .grw-navigation-draggable-hitarea {
         position: relative;
         left: -4px;
@@ -168,14 +94,71 @@
         .grw-navigation-draggable-hitarea-child {
           position: absolute;
           left: 3px;
+          display: none;
           width: 2px;
           height: 100%;
           background-color: rgb(76, 154, 255);
-          opacity: 0;
-          transition: opacity 200ms ease 0s;
         }
-        &:hover .grw-navigation-draggable-hitarea-child {
-          opacity: 1;
+      }
+      .grw-navigation-resize-button {
+        position: fixed;
+
+        $width: 27.691px;
+        $height: 23.999px;
+
+        @mixin hitarea($size-hitarea) {
+          top: ($width - $size-hitarea) / 2;
+          left: ($height - $size-hitarea) / 2;
+          width: $size-hitarea;
+          height: $size-hitarea;
+        }
+
+        // locate to the center of screen
+        top: calc(50vh - $height/2);
+
+        display: none;
+        padding: 0px;
+        background-color: transparent;
+        border: 0;
+        transform: translateX(-50%);
+
+        .hexagon-container {
+          // set transform
+          svg * {
+            transition: fill 100ms linear;
+          }
+          svg {
+            width: $width + 2px; // add 1px for drop-shadow
+            height: $height + 2px; // add 1px for drop-shadow
+            .background {
+              filter: drop-shadow(0px 1px 0px rgba(#999, 60%));
+            }
+          }
+        }
+        .hitarea {
+          @extend .rounded-pill;
+
+          position: absolute;
+          @include hitarea(30px);
+        }
+
+        // reverse and center icon at the time of collapsed
+        &.collapsed {
+          display: block;
+          .hexagon-container svg {
+            transform: rotate(180deg);
+          }
+          .hitarea {
+            @include hitarea(80px);
+          }
+        }
+      }
+      &:hover {
+        .grw-navigation-draggable-hitarea-child {
+          display: block;
+        }
+        .grw-navigation-resize-button {
+          display: block;
         }
       }
     }
@@ -290,7 +273,7 @@
   }
 
   .grw-navigation-resize-button {
-    display: none;
+    display: none !important;
   }
 
   .grw-drawer-toggler {

packages/app/test/cypress/support/commands.ts

@@ -43,7 +43,7 @@ Cypress.Commands.add('collapseSidebar', (isCollapsed) => {
     const isCurrentCollapsed = $contents.hasClass('d-none');
     // toggle when the current state and isCoolapsed is not match
     if (isCurrentCollapsed !== isCollapsed) {
-      cy.getByTestid("grw-navigation-resize-button").click();
+      cy.getByTestid("grw-navigation-resize-button").click({force: true});
     }
   });
 });