website/themes/sqrl-hexo-theme-doc/source/style/_doc/navigation.scss

//
// Navbar
//
.doc-navbar {
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: $doc-navbar-height;
  padding: 0 10px;
  z-index: 3;
  background: $doc-navbar-background-color;
  border-bottom: 1px solid $doc-navbar-border-color;
  transition: 0.1s ease-in-out;

  @media screen and (min-width: $doc-breakpoint) {
    width: $doc-sidebar-width;
  }

  .doc-search-form {
    margin-top: 0.7rem;
    margin-bottom: 0rem;
    margin-left: auto;

    @media screen and (min-width: $doc-breakpoint) {
      display: none
    }
  }

  &__logo {
    flex-grow: 1;
    display: flex;
    height: 100%;
    align-items: center;

    @media screen and (max-width: $doc-breakpoint) {
      flex-grow: initial;
    }
  }

  &__logo__img {
    width: 30px;
    height: 30px;
    margin-right: 6px;
  }

  &__logo__text {
    flex-grow: 1;
    margin-right: 0.6rem;
    line-height: 1.6rem;
    font-size: 14px;
    font-family: "Source Sans Pro", "Ubuntu", "Helvetica Neue", "Helvetica", sans-serif;
    font-weight: 700;
    color: $doc-navbar-logo-text-color;

    @media screen and (max-width: $doc-breakpoint) {
      display: none
    }
  }

  &__sidebar-toggle {
    line-height: $doc-navbar-height;
    font-size:2rem;
    height: 100%;
    display: inline-block;
    vertical-align: middle;

    @media screen and (min-width: $doc-breakpoint) {
      display: none
    }
  }

  &__sidebar-close {
    display: table;
    height: 100%;
    font-size: 12px;
    color: $dc-gray30;

    &:before {
      display: table-cell;
      vertical-align: middle;
    }
  }

  &__sidebar-close--desktop {
    float: right;

    @media screen and (max-width: $doc-breakpoint) {
      display: none
    }
  }
}


//
// Sidebar
//
.doc-sidebar-toggle {
  color: $dc-gray30;
  font-size: 2.5rem;
  font-weight: 500;
}

.doc-sidebar-toggle--primary {
  color: $doc-color-primary;
}

.doc-sidebar {
  position: fixed;
  top: $doc-navbar-height;
  right: auto;
  bottom: 0;
  left: 0;
  width: $doc-sidebar-width;
  height: auto;
  transition: 0.1s ease-in-out;
  background: $doc-sidebar-background-color;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 2;

  @media screen and (max-width: $doc-breakpoint) {
    transform: translateX(-$doc-sidebar-width);
  }

  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.07);
    cursor: grab;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
  }

  &__vertical-menu {
    float: right;
    text-align: center;
    width: $doc-sidebar-width-collapsed;

    &__item {
      display: block;
      padding: 0.6rem;
    }

    &__item--primary {
      color: $doc-color-primary;
    }
  }

  &__search-form {
    height: 36px;
    width: 100%;
    margin: 24px 0 0 22px;

    @media screen and (max-width: $doc-breakpoint) {
      display: none;
    }
  }
}

.doc-sidebar-list {
  padding-left: 0px;

  &__item {
    margin-left: $doc-sidebar-left-margin;
    list-style: none;
    line-height: 30px;
    font-size: $doc-sidebar-font-size-normal;
    font-weight: $doc-sidebar-font-weight-normal;
    color: $doc-sidebar-color;

    &--link{

      &+#{&} {
        border-top: $doc-sidebar-item-border;
      }

      &:hover{
        color: $doc-sidebar-current-color;
      }
    }

    &--label{
      border-top: $doc-sidebar-item-border;
      margin-left: 0px;
      padding-left: $doc-sidebar-left-margin;
      font-weight: $doc-sidebar-font-weight-bold;
      font-size: $doc-sidebar-font-size-small;
      padding-bottom: 5px;
      padding-top: 5px;
      margin-top: 10px;
      color: $doc-sidebar-label-color;


      &:first-of-type{
        border-top: initial;
      }
    }

    &--current, &--current-ancestor {
      color: $doc-sidebar-current-color;
      font-weight: $doc-sidebar-font-weight-bold;
    }

    a {
      color: inherit;
    }
  }

  > li.doc-sidebar-list__item { // just first level
    &--current, &--current-ancestor {
      &::before{
        border-left: 3px solid $doc-sidebar-current-color;
        content: " ";
        position: absolute;
        left: 0px;
        height: 30px;
      }
    }
  }

  &__toc-list {
    padding-left: 12px;
  }

  &__toc-item {
    color: $doc-sidebar-color;
    list-style: none;
    font-weight: 300;
    padding-right: 12px;
    border-top: $doc-sidebar-item-border;

    &--current {
      color: $doc-sidebar-current-color;
    }

    &:first-child {
      border-top: none
    }
  }
}

// Sidebar children list
.doc-sidebar-list {
  &__children-list {
    padding-left: 10px;
  }

  &__children-list--hidden {
    display: none;
  }
}

.doc-sidebar-list__item {

  &--child {
      margin-left: 0;
  }

  &--has-children > .doc-sidebar-list__toc-list{
      padding-left: 24px;
  }

  &__children-toggle {
    cursor: pointer;
    display: block;

    &:before {
      position: absolute;
      left: 2.2rem;
      display: block;
      width: 1rem;
      height: 1rem;
      line-height: 1rem;
      margin-top: 0.85rem;
      text-align: center;
    }

    &:hover {
      color: $doc-sidebar-current-color;

      &:before {
        border-color: $doc-sidebar-current-color;
      }
    }
  }

  &__children-toggle--hide {
    &:before {
      content: '-';
    }
  }

  &__children-toggle--show {
    &:before {
      content: '+';
    }
  }
}