clean css

packages/app/src/components/Sidebar.tsx

@@ -303,7 +303,7 @@ const Sidebar: FC<Props> = (props: Props) => {
                 <div className="grw-navigation-draggable-hitarea-child"></div>
               </div>
               <button
-                className={`grw-navigation-resize-button ${!isDrawerMode ? 'resizable' : ''} ${isCollapsed ? 'collapse-state' : 'normal-state'} `}
+                className={`grw-navigation-resize-button ${!isDrawerMode ? 'resizable' : ''} ${isCollapsed ? 'collapsed' : ''} `}
                 type="button"
                 aria-expanded="true"
                 aria-label="Toggle navigation"

packages/app/src/styles/_sidebar.scss

@@ -25,21 +25,40 @@
   .grw-navigation-resize-button {
     position: fixed;
 
+    $size: 24px;
+
     // locate to the center of screen
     top: calc(50vh - 20px);
 
-    $size: 24px;
+    width: $size;
+    height: $size;
+    padding: 0px;
+    border: 0;
+    opacity: 0;
+    transition: background-color 100ms linear 0s, color 100ms linear 0s, opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
+    transform: translateX(-50%);
+
     .background {
       $box-shadow: 0 0 0 0 rgba(96, 96, 96, 0.75);
     }
+    .hitarea {
+      @extend .rounded-pill;
+      width: $size;
+      height: $size;
+      background-color: red;
+    }
 
     // reverse and center icon at the time of collapsed
-    &.collapse-state {
+    &.collapsed {
+      opacity: 1;
       .icon-container {
         transform: rotate(180deg);
       }
     }
   }
+  &:hover .grw-navigation-resize-button {
+    opacity: 1;
+  }
 
   // override @atlaskit/navigation-next styles
   $navbar-total-height: $grw-navbar-height + $grw-navbar-border-width;
@@ -55,10 +74,6 @@
     }
   }
   .navigation {
-    &:hover .grw-navigation-resize-button.resizable.normal-state {
-      cursor: pointer;
-      opacity: 1;
-    }
     .grw-navigation-wrap {
       display: flex;
       flex-direction: row;
@@ -304,40 +319,3 @@
 .grw-sidebar-backdrop.modal-backdrop {
   z-index: $zindex-fixed + 1;
 }
-
-.collapse-state {
-  position: absolute;
-  top: 32px;
-  width: 24px;
-  height: 24px;
-  padding: 0px;
-  color: rgb(107, 119, 140);
-  cursor: pointer;
-  background: 0px center white;
-  border: 0px;
-  border-radius: 50%;
-  outline: 0px;
-  box-shadow: rgb(9 30 66 / 8%) 0px 0px 0px 1px, rgb(9 30 66 / 8%) 0px 2px 4px 1px;
-  opacity: 1;
-  transition: background-color 100ms linear 0s, color 100ms linear 0s, opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s,
-    transform 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
-  transform: translate(-50%);
-}
-
-.normal-state {
-  position: absolute;
-  top: 32px;
-  width: 24px;
-  height: 24px;
-  padding: 0px;
-  color: rgb(107, 119, 140);
-  /* background: 0px center white; */
-  border: 0px;
-  border-radius: 50%;
-  outline: 0px;
-  box-shadow: rgb(9 30 66 / 8%) 0px 0px 0px 1px, rgb(9 30 66 / 8%) 0px 2px 4px 1px;
-  opacity: 0;
-  transition: background-color 100ms linear 0s, color 100ms linear 0s, opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s,
-    transform 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
-  transform: translate(-50%);
-}