weseek__growi/src/client/styles/scss/_sidebar.scss

.grw-sidebar {
  $sidebar-nav-button-height: 55px;

  %fukidashi-for-active {
    position: relative;

    // speech balloon
    &:after {
      position: absolute;
      right: -0.1em;
      display: block;
      width: 0;
      content: '';
      border: 9px solid transparent;
      border-right-color: white;
      border-left-width: 0;
      transform: translateY(-#{$sidebar-nav-button-height / 2});
    }
  }

  // sticky
  position: sticky;
  top: $grw-navbar-border-width;
  z-index: $zindex-sticky;

  .ak-navigation-resize-button {
    position: fixed;

    // locate to the center of screen
    top: calc(50vh - 20px);

    /*
     * styles
     */
    // unset originalhover color
    > div:hover {
      background-color: unset;
    }

    $box-shadow: 0 1px 1px rgba(96, 96, 96, 0.75);
    @include hexagonize(24px, white, $box-shadow);

    // rotate 30deg
    transform: translate(-50%) rotate(30deg);
    > div,
    > span svg {
      transform: rotate(-30deg);
    }

    // centering icon
    > span svg {
      position: relative;
      z-index: 1;
      margin-top: -5.5px;
    }
  }

  // override @atlaskit/navigation-next styles
  $navbar-total-height: $grw-navbar-height + $grw-navbar-border-width;
  div[data-layout-container='true'] {
    max-height: calc(100vh - #{$grw-navbar-border-width});

    // css-teprsg
    > div:nth-of-type(2) {
      padding-left: unset !important;
      margin-left: unset !important;
    }
  }
  div[data-testid='Navigation'] {
    position: unset;

    top: $navbar-total-height;

    // Adjust to be on top of the growi subnavigation
    // z-index: $zindex-sticky + 5;

    // css-xxx-ContainerNavigationMask
    > div:nth-of-type(1) {
    }
    // css-xxx-Outer
    > div:nth-of-type(2) {
      z-index: 100; // greater than the value of slimScrollBar

      width: 0;
      transform: unset; // unset for 'position: fixed' of .ak-navigation-resize-button

      // css-xxx-Shadow
      > div:first-child {
        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%);
      }
    }
  }

  .grw-sidebar-nav {
    height: 100vh;
    max-height: calc(100vh - #{$grw-navbar-border-width});

    .btn {
      width: $grw-sidebar-nav-width;
      line-height: 1em;
      border-radius: 0;

      // icon opacity
      &:not(.active) {
        i {
          opacity: 0.4;
        }
        &:hover,
        &:focus {
          i {
            opacity: 0.7;
          }
        }
      }
    }

    .grw-sidebar-nav-primary-container {
      .btn {
        padding: 1em;
        i {
          font-size: 2.3em;
        }

        &.active {
          @extend %fukidashi-for-active;
        }
      }
    }

    .grw-sidebar-nav-secondary-container {
      position: fixed;
      bottom: 1.5rem;

      .btn {
        padding: 0.9em;
        i {
          font-size: 1.5em;
        }
      }
    }
  }
}

// Drawer Mode
@mixin drawer() {
  z-index: $zindex-fixed + 1;

  // override @atlaskit/navigation-next styles
  div[data-layout-container='true'] {
    height: 100vw;
  }
  div[data-testid='Navigation'] {
    position: fixed;
    top: 0;

    max-width: 80vw;

    // apply transition
    transition-property: left;
    @include apply-navigation-transition();
  }

  &:not(.open) {
    div[data-testid='Navigation'] {
      left: -80vw;
    }
  }
  &.open {
    div[data-testid='Navigation'] {
      left: 0;
    }
  }
}

.grw-sidebar {
  &.grw-sidebar-drawer {
    @include drawer();
  }

  @include media-breakpoint-down(sm) {
    @include drawer();
  }
}

// supress transition
.grw-sidebar {
  &.grw-sidebar-supress-transitions-to-drawer {
    div[data-testid='Navigation'] {
      transition: none !important;
    }
  }

  &.grw-sidebar-supress-transitions-to-dock {
    div[data-testid='Content'],
    div[data-testid='ContextualNavigation'] {
      transition: none !important;
    }
  }
}

.grw-sidebar-backdrop.modal-backdrop {
  z-index: $zindex-fixed - 4;
}