xrpl-dev-portal/styles/_side-nav.scss

/* Left/right nav fonts & colors scheme ------------------------------------- */
aside li a {
  color: $white;
  text-decoration: none;
  font-size: 1.05rem;
}
aside .sidenav_cat_title {
  color: $white;
}
aside a:hover,
aside .sidenav_cat_title:hover {
  color: $link-hover-color;
}

aside a.active,
aside a.active:hover,
aside .active > a,
aside .active > a:hover {
  color: $link-hover-color;
  font-weight: 700;
}
aside a.active-parent,
aside .active-parent > a {
  font-weight: 700;
}

:root.dark {
  aside a.active,
  aside a.active:hover,
  aside .active > a,
  aside .active > a:hover {
    color: $blue-purple-300;
  }
}

.page-toc .level-1 a,
.command-list .separator {
  font-weight: 700;
  // font-family: "Space Mono", monospace;
  color: $white;
}

/* Left navigation -----------------------------------------------------------*/

.nav-toggler {
  position: absolute;
  @include caret(down);
  width: 1.75em;
  height: 1.75em;
  line-height: 0;
  display: grid;
  justify-content: center;
  align-content: center;

  &::after {
    transition-duration: 0.3s;
  }
  &.collapsed::after {
    transform: rotate(-90deg);
  }
}

.dactyl-tree-nav {

  nav {
    margin-left: 1rem;
    padding-left: 0;
    border-left: 1px solid $white;

    .nav-link:hover,
    .nav-link:active {
      border-left: 1px solid $link-hover-color;
      margin-left: -1px;
    }

    .active > .nav-link {
      border-left: 2px solid $link-hover-color;
      margin-left: -1px;
      padding-left: calc(1rem - 1px);
    }
  }

  .nav-item {
    position: relative;

    .nav-link {
      padding: 0.25rem 1rem;
      font-size: 0.9rem;
    }
    &.nav-parent {
      padding-top: 0;

      .nav-link {
        padding-left: 0;
        padding-top: 0;
        font-size: 1.125rem;
        line-height: initial;
      }
    }

    .nav-toggler + .nav-link {
      padding-left: 2rem;
    }
  }

  > .nav-item {
    padding: .5rem 0;
    font-size: 1.125rem;

    > .nav-link {
      font-weight: bold;
    }
  }

  .collapsing.nav {
    // Fix for weird folding behavior in collapse animation.
    flex-wrap: unset;
  }
}


/* Right navigation --------------------------------------------------------- */


.toc-header {
  font-weight: bold;
  font-size: 14px;
  padding: 1rem 0;

  h4 {
    line-height: 20px;
    font-size: 1.2em;
    padding: 0;
    margin: 0;
  }
}

#page-toc-wrapper {
  // position: sticky;
  // max-height: 85vh;
  // top: 48px;
  // overflow: auto;
  // padding: 0;
  // border: none;

  .card-body {
    // padding: 0;
    list-style-type: none;
  }
}

.page-toc,
.command-list {
  padding-left: 0;
  border-left: 1px solid $white;

  li {
    list-style-type: none;
    padding: 0;

    &.separator {
      padding: .25rem 1rem;
    }

    a {
      display: block;
      margin-top: 5px;
      padding: .25rem 1rem;
      font-size: 0.9rem;

      &:hover,
      .active {
        text-decoration: none;
        border-left: 1px solid $link-hover-color;
        margin-left: -1px;
      }
    }

    &.active a,
    &.active a:hover {
      border-left: 2px solid $link-hover-color;
      padding-left: calc(1rem - 1px);
      margin-left: -1px;
    }
  }

  :root.dark & {
    .level-3 {
      border-left-color: $blue-purple-300;
    }

    li a {
      &:hover,
      .active {
        border-left-color: $blue-purple-300;
      }
    }
  }

  .level-3 {
    margin-left: 16px;
    border-left: 1px solid $white;
    margin-bottom: 0;
    padding-bottom: 5px;

    a {
      margin-top: 0;
      padding-bottom: 5px;
    }
  }


  &.no-sideline {
    border-left: 0;

    a:hover, a.active {
      border-left: 0;
      margin-left: 0;
    }
  }
}

.command-list li a {
  margin-top: 0;
}

// Keep the left docs nav sticky on short pages too (e.g. category index pages
// like /docs/concepts). Redocly gives the sidebar a fixed
// `height: calc(100vh - navbar - banner)`, which on a short page exactly fills
// the flex PageLayout container — leaving `position: sticky` no room to travel,
// so the nav scrolls out of view when you scroll down. Letting the sidebar take
// its content height (top-aligned) restores the sticky travel; max-height keeps
// it within the viewport and its inner MenuContainer still scrolls long navs.
@media screen and (min-width: 960px) {
  [data-component-name="Layout/PageLayout"] aside[data-component-name="Sidebar/Sidebar"] {
    align-self: flex-start;
    height: auto !important;
    max-height: calc(100vh - var(--navbar-height, 80px) - var(--banner-height, 0px));
  }
}