_header.scss

/**
 * The header at the top of the page.
 */

// If we want the shadow to only point downward in the future, set
// box-shadow to: 0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.11);
.bd-header {
  position: sticky;
  top: 0;
  z-index: $zindex-fixed;

  // Overrides bootstrap
  background: var(--pst-color-on-background) !important;
  box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow);

  height: var(--pst-header-height);
  max-height: var(--pst-header-height);
  width: 100%;
  padding: 0.5rem 0;
  max-width: 100vw;
  justify-content: center;
  .bd-header__inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  // Hide the header items on mobile
  .navbar-header-items {
    display: none;
    flex-shrink: 1;
    @include media-breakpoint-up($breakpoint-sidebar-primary) {
      display: flex;
      flex-grow: 1;
      padding: 0 0 0 0.5rem;
    }
  }

  #navbar-end,
  #navbar-center,
  #navbar-start {
    display: flex;
    align-items: center;
    flex-flow: wrap;
  }

  #navbar-end,
  #navbar-center {
    gap: 1rem;
  }

  // A little smaller because this is displayed by default on mobile
  #navbar-start {
    flex-shrink: 0;
    margin-right: auto;
    gap: 0.5rem;
  }

  #navbar-end {
    // End navbar items should snap to the right
    justify-content: end;
  }

  .navbar-nav {
    display: flex;

    @include media-breakpoint-up($breakpoint-sidebar-primary) {
      // Center align on wide screens so the dropdown button is centered properly
      align-items: center;
    }

    li a.nav-link {
      color: var(--pst-color-text-muted);

      &:hover {
        color: var(--pst-color-primary);
      }

      &:focus {
        color: var(--pst-color-primary);
      }
    }

    > .active > .nav-link {
      font-weight: 600;
      color: var(--pst-color-primary);
    }

    // Dropdowns for the extra links
    .dropdown {
      // The button that people click on
      > button {
        display: unset;
        color: var(--pst-color-text-muted);
        border: none;

        &:hover,
        &:active,
        &:focus {
          color: var(--pst-color-primary);
        }
      }

      .dropdown-menu {
        z-index: $zindex-popover;
        border: 1px solid var(--pst-color-border);
        box-shadow: 0 0 0.3rem 0.1rem var(--pst-color-shadow);
        background-color: var(--pst-color-on-background);
        padding: 0.5rem 1rem;
        margin: 0.5rem 0;
        min-width: 20rem;

        // Hide the menu unless show has been clicked
        &:not(.show) {
          display: none;
        }
      }
    }
  }
}

// inline the element in the navbar as long as they fit and use display block when collapsing
@include media-breakpoint-up($breakpoint-sidebar-primary) {
  .navbar-center-item {
    display: inline-block;
  }
}

.toc-entry > .nav-link.active {
  font-weight: 600;
  color: var(--pst-color-primary);
  background-color: transparent;
  border-left: 2px solid var(--pst-color-primary);
}

.nav-link {
  &:hover {
    border-style: none;
  }

  &.nav-external:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: var(--pst-icon-external-link);
    font-size: 0.75em;
    margin-left: 0.3em;
  }
}

#navbar-main-elements li.nav-item i {
  font-size: 0.7rem;
  padding-left: 2px;
  vertical-align: middle;
}

/**
 * Showing and hiding the sidebar toggle buttons and header items
 */
// Hide the header items on mobile
.bd-header {
  // Toggle labels
  label {
    &.sidebar-toggle {
      display: flex;
      cursor: pointer;
      font-size: var(--pst-font-size-icon);
      align-items: center;
      color: var(--pst-color-muted);
      margin-bottom: 0;
    }

    &.primary-toggle {
      padding-right: 1rem;
      @include media-breakpoint-up($breakpoint-sidebar-primary) {
        display: none;
      }
    }

    &.secondary-toggle {
      padding-left: 1rem;
      @include media-breakpoint-up($breakpoint-sidebar-secondary) {
        display: none;
      }
    }
  }

  // Hide the navbar header items on mobile because they're in the sidebar
  .navbar-header-items {
    display: none;
    @include media-breakpoint-up($breakpoint-sidebar-primary) {
      display: inherit;
    }
  }
}

// THe elements next to the hamburger menu only show on narrow screens
.navbar-persistent--mobile {
  margin-left: auto;
  @include media-breakpoint-up($breakpoint-sidebar-primary) {
    display: none;
  }
}

// The navbar-persistent content should only show on wide screens
.navbar-persistent--container {
  display: none;
  @include media-breakpoint-up($breakpoint-sidebar-primary) {
    display: flex;
  }
}