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

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

      .simplebar-mask {
        z-index: 110; // greater than the value of .grw-navigation-draggable to fix https://redmine.weseek.co.jp/issues/86678
      }
    }
    .grw-navigation-draggable {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 100%;
      z-index: 10; // greater than the value of SimpleBar
      width: 0;
      .grw-navigation-draggable-hitarea {
        position: relative;
        left: -4px;
        width: 24px;
        height: 100%;
        cursor: ew-resize;
        .grw-navigation-draggable-hitarea-child {
          position: absolute;
          left: 3px;
          display: none;
          width: 2px;
          height: 100%;
          background-color: rgb(76, 154, 255);
        }
      }
      .grw-navigation-resize-button {
        position: fixed;

        $width: 27.691px;
        $height: 23.999px;

        @mixin hitarea($size-hitarea) {
          top: ($width - $size-hitarea) / 2;
          left: ($height - $size-hitarea) / 2;
          width: $size-hitarea;
          height: $size-hitarea;
        }

        // locate to the center of screen
        top: calc(50vh - $height/2);

        display: none;
        padding: 0px;
        background-color: transparent;
        border: 0;
        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;

          position: absolute;
          @include hitarea(30px);
        }

        // reverse and center icon at the time of collapsed
        &.collapsed {
          display: block;
          .hexagon-container svg {
            transform: rotate(180deg);
          }
          .hitarea {
            @include hitarea(80px);
          }
        }
      }
      &:hover {
        .grw-navigation-draggable-hitarea-child {
          display: block;
        }
        .grw-navigation-resize-button {
          display: block;
        }
      }
    }
  }

  .grw-sidebar-nav {
    height: 100vh;

    .btn {
      width: $grw-sidebar-nav-width;
      line-height: 1em;
      border-radius: 0;
      box-shadow: none !important;

      // 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 !important;
  }

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

// style to apply when displaying search page
.growi.on-search {
  // set sidebar height shown in search page
  $search-page-sidebar-height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width));

  .grw-sidebar {
    height: $search-page-sidebar-height;
    .data-layout-container {
      height: 100%;
    }
  }
}