weseek__growi/packages/app/src/styles/_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;

  .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'] {
    // css-teprsg
    > div:nth-of-type(2) {
      padding-left: unset !important;
      margin-left: unset !important;
    }
  }
  div[data-testid='Navigation'] {
    // 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 {
    min-width: 62px;
    height: 100vh;

    .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;
        }
      }
    }
  }

  .grw-drawer-toggler {
    display: none; // invisible in default
  }

  .grw-sidebar-content-header {
    .grw-btn-reload {
      font-size: 18px;
    }
  }
}

// Dock Mode
@mixin dock() {
  z-index: $zindex-sticky;

  // 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});
  }
  div[data-testid='Navigation'] {
    position: unset;

    top: $navbar-total-height;
  }
}

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

  // override @atlaskit/navigation-next styles
  div[data-testid='Navigation'] {
    max-width: 80vw;

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

  &:not(.open) {
    div[data-testid='Navigation'] {
      transform: translateX(-100%);
    }
  }
  &.open {
    div[data-testid='Navigation'] {
      transform: translateX(0);
    }

    .grw-drawer-toggler {
      display: block;
    }
  }

  .grw-drawer-toggler {
    position: fixed;
    right: -15px;

    @include media-breakpoint-down(sm) {
      bottom: 15px;
      width: 42px;
      height: 42px;
      font-size: 18px;
    }
    @include media-breakpoint-up(md) {
      top: 72px;
      width: 50px;
      height: 50px;
      font-size: 24px;
    }

    transform: translateX(100%);
  }
}

.grw-sidebar {
  @include media-breakpoint-down(sm) {
    @include drawer();
  }
  @include media-breakpoint-up(md) {
    &.grw-sidebar-drawer {
      @include drawer();
    }
    &:not(.grw-sidebar-drawer) {
      @include dock();
    }
  }
}

// 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 + 1;
}