remove hexagonize mixin

packages/app/src/components/Sidebar.tsx

@@ -310,9 +310,11 @@ const Sidebar: FC<Props> = (props: Props) => {
                 disabled={isDrawerMode}
                 onClick={toggleNavigationBtnClickHandler}
               >
-                <span role="presentation">
-                  <i className="ml-1 fa fa-fw fa-angle-left text-white"></i>
+                <span className="background" role="presentation"></span>
+                <span className="icon-container" role="presentation">
+                  <i className="fa fa-fw fa-angle-left text-white" role="presentation"></i>
                 </span>
+                <span className="hitarea" role="presentation"></span>
               </button>
             </div>
           </div>

packages/app/src/styles/_mixins.scss

@@ -110,118 +110,6 @@
   }
 }
 
-/*
- * see: https://gist.github.com/bjmiller121/902745cbb38d88178882
- *
- * Makes a CSS hexagon! based off of http://csshexagon.com/
- * Demo: http://sassmeister.com/gist/98fcf3ce163a97d2ef7e
- */
-@mixin hexagonize($size, $color, $box-shadow: 0, $border: 0) {
-  width: $size;
-  height: ($size * 0.577);
-  margin: ($size * 0.288) 0;
-  background-color: $color;
-  border-right: $border;
-  border-left: $border;
-
-  @if $box-shadow != 0 {
-    box-shadow: $box-shadow;
-  }
-
-  &:before,
-  &:after {
-    position: absolute;
-    content: '';
-
-    @if $border == 0 and $box-shadow == 0 {
-      left: 0;
-      width: 0;
-      border-right: ($size/2) solid transparent;
-      border-left: ($size/2) solid transparent;
-    } @else {
-      left: ($size * 0.129);
-      z-index: 1;
-      width: ($size * 0.707);
-      height: ($size * 0.707);
-      background-color: inherit;
-      transform: scaleY(0.6) rotate(-45deg);
-    }
-
-    @if $box-shadow != 0 {
-      box-shadow: $box-shadow;
-    }
-  }
-
-  &:before {
-    @if $border == 0 and $box-shadow == 0 {
-      bottom: 99%;
-      border-bottom: ($size * 0.288) solid $color;
-    } @else {
-      top: -($size * 0.353);
-    }
-
-    @if $border != 0 {
-      border-top: $border;
-      border-right: $border;
-    }
-  }
-
-  &:after {
-    @if $border == 0 and $box-shadow == 0 {
-      top: 99%;
-      width: 0;
-      border-top: ($size * 0.288) solid $color;
-    } @else {
-      bottom: -($size * 0.353);
-    }
-
-    @if $border != 0 {
-      border-bottom: $border;
-      border-left: $border;
-    }
-  }
-
-  @if $box-shadow != 0 {
-    > span {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 2;
-
-      &:after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: $size;
-        height: $size * 0.577;
-        content: '';
-        background-color: $color;
-      }
-    }
-  }
-}
-
-@mixin override-hexagon-color($color, $bgcolor) {
-  background-color: $bgcolor;
-  transition: background-color 200ms linear, color 100ms linear, opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1);
-
-  &:before {
-    border-bottom-color: $bgcolor;
-    transition: border-bottom-color 200ms linear;
-  }
-  &:after {
-    border-top-color: $bgcolor;
-    transition: border-top-color 200ms linear;
-  }
-  > span:after {
-    background-color: $bgcolor;
-    transition: background-color 200ms linear;
-  }
-  svg path {
-    fill: $color;
-  }
-}
-
 @mixin apply-navigation-transition() {
   transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
   transition-duration: 300ms;

packages/app/src/styles/_sidebar.scss

@@ -28,25 +28,15 @@
     // locate to the center of screen
     top: calc(50vh - 20px);
 
-    $box-shadow: 0 0 0 0 rgba(96, 96, 96, 0.75);
-    @include hexagonize(24px, white, $box-shadow);
-
-    // rotate 30deg
-    transform: translate(-50%) rotate(30deg);
-    > span {
-      top: -2px;
-      transform: rotate(-30deg);
-      &::after {
-        // override
-        content: none;
-      }
+    $size: 24px;
+    .background {
+      $box-shadow: 0 0 0 0 rgba(96, 96, 96, 0.75);
     }
 
     // reverse and center icon at the time of collapsed
     &.collapse-state {
-      > span {
-        left: 2px;
-        transform: rotate(-210deg);
+      .icon-container {
+        transform: rotate(180deg);
       }
     }
   }
@@ -65,11 +55,6 @@
     }
   }
   .navigation {
-    position: fixed;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    z-index: 200;
     &:hover .grw-navigation-resize-button.resizable.normal-state {
       cursor: pointer;
       opacity: 1;

packages/app/src/styles/theme/_apply-colors.scss

@@ -223,11 +223,7 @@ ul.pagination {
     $color-resize-button-hover: $color-reversal !default;
     $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
 
-    @include override-hexagon-color($color-resize-button, $bgcolor-resize-button);
-
-    &:hover {
-      @include override-hexagon-color($color-resize-button-hover, $bgcolor-resize-button-hover);
-    }
+    // TODO fill color
   }
   div.grw-global-navigation {
     > div {