weseek__growi/packages/app/src/components/Sidebar.module.scss

@use '~/styles/variables' as var;
@use '~/styles/mixins';
@use '~/styles/bootstrap/init' as bs;

.grw-sidebar :global {
  // sticky
  position: sticky;
  top: var.$grw-navbar-border-width;

  // set the max value that should be taken when sticky
  height: calc(100vh - var.$grw-navbar-border-width);

  // override @atlaskit/navigation-next styles
  $navbar-total-height: var.$grw-navbar-height + var.$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;

          :global .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 {
          position: absolute;
          border-radius: bs.$rounded-pill;

          @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-drawer-toggler {
    display: none; // invisible in default
  }

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


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

  // override @atlaskit/navigation-next styles
  $navbar-total-height: var.$grw-navbar-height + var.$grw-navbar-border-width;
  .data-layout-container {
    max-height: calc(100vh - #{var.$grw-navbar-border-width});
  }
  .navigation {
    position: unset;

    top: $navbar-total-height;
  }
}

// Drawer Mode
@mixin drawer() {
  z-index: bs.$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 mixins.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 bs.media-breakpoint-down(sm) {
      bottom: 15px;
      width: 42px;
      height: 42px;
      font-size: 18px;
    }
    @include bs.media-breakpoint-up(md) {
      top: 72px;
      width: 50px;
      height: 50px;
      font-size: 24px;
    }

    transform: translateX(100%);
  }
}

// '&' could not be set after :global
// workaround from https://github.com/css-modules/css-modules/issues/295#issuecomment-404873976
.grw-sidebar :global {
  .grw-sidebar-drawer {
    @include drawer();
  }
  .grw-sidebar-dock {
    @include bs.media-breakpoint-down(sm) {
      @include drawer();
    }
    @include bs.media-breakpoint-up(md) {
      @include dock();
    }
  }
}

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

// '&' could not be set after :global
// workaround from https://github.com/css-modules/css-modules/issues/295#issuecomment-952885628
.grw-sidebar-backdrop {
  &:global(.modal-backdrop) {
    z-index: bs.$zindex-fixed + 1;
  }
}