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;

  // 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;

    // 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;

      $size-hitarea: 80px;

      position: absolute;
      top: ($width - $size-hitarea) / 2;
      left: ($height - $size-hitarea) / 2;
      width: $size-hitarea;
      height: $size-hitarea;
    }

    // reverse and center icon at the time of collapsed
    &.collapsed {
      opacity: 1;
      .hexagon-container svg {
        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;
  .data-layout-container {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 0px);
    margin-top: 0px;
    // css-teprsg
    > div:nth-of-type(2) {
      padding-left: unset !important;
      margin-left: unset !important;
    }
  }
  .navigation {
    .grw-navigation-wrap {
      display: flex;
      flex-direction: row;
      height: 100%;
      overflow: hidden;
      .grw-contextual-navigation {
        position: relative;
        width: 240px;
        height: 100%;
        &:not(.dragging) {
          transition: width 200ms cubic-bezier(0.2, 0, 0, 1) 0s;
        }
        will-change: width;
        .grw-contextual-navigation-child {
          position: absolute;
          top: 0px;
          left: 0px;
          box-sizing: border-box;
          width: 100%;
          min-width: 240px;
          height: 100%;
          overflow-x: hidden;
          transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
          transition-duration: 0.22s;
          transition-property: boxShadow, transform;
          animation-duration: 0.22s;
          animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
          animation-fill-mode: forwards;
          .grw-contextual-navigation-sub {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            overflow: hidden auto;
          }
        }
      }
    }
    .grw-navigation-draggable {
      position: absolute;
      top: 0px;
      bottom: 0px;
      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;
        width: 24px;
        height: 100%;
        cursor: ew-resize;
        .grw-navigation-draggable-hitarea-child {
          position: absolute;
          left: 3px;
          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-sidebar-nav {
    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;
  .data-layout-container {
    max-height: calc(100vh - #{$grw-navbar-border-width});
  }
  .navigation {
    position: unset;

    top: $navbar-total-height;
  }
}

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

  .data-layout-container {
    position: fixed;
    top: 0;
    width: 0;
  }
  div.navigation.transition-enabled {
    max-width: 80vw;

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

  &:not(.open) {
    div.navigation {
      transform: translateX(-100%);
    }
  }
  &.open {
    div.navigation {
      transform: translateX(0);
    }

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

  .grw-navigation-resize-button {
    display: none;
  }

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

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