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

.grw-sidebar {
  .ak-navigation-resize-button {
    top: calc(50vh - 20px);
  }

  // override @atlaskit/navigation-next styles
  div[data-testid='GlobalNavigation'] {
    width: $grw-sidebar-nav-width;
  }
  div[class$='-NavigationContainer'] {
    // Adjust to be on top of the growi subnavigation
    z-index: $zindex-sticky + 5;
  }

  .grw-global-item-container {
    i {
      font-size: 1.5em;
    }

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

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

// Drawer Mode
@include media-breakpoint-down(sm) {
  .grw-sidebar {
    position: fixed;
    z-index: $zindex-fixed - 2;

    // override @atlaskit/navigation-next styles
    div[class$='-Outer'],
    div[class$='-teprsg'] {
      display: none;
    }

    &:not(.open) {
      div[class$='-NavigationContainer'] {
        left: -#{$grw-sidebar-nav-width + $grw-sidebar-content-min-width};
      }
    }
    &.open {
      div[class$='-NavigationContainer'] {
        left: 0;
      }
    }

    div[class$='-NavigationContainer'] {
      transition: left 300ms cubic-bezier(0.25, 1, 0.5, 1);
    }
  }

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

.grw-sidebar-header-container {
  padding: 10px;

  h3 {
    margin-bottom: 0;
  }
}

.grw-sidebar-content-container {
}