wagtail/client/scss/components/_main-nav.scss

@use 'sass:map';

.nav-wrapper {
  position: relative;
  margin-left: -$menu-width;
  width: $menu-width;
  float: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: $nav-grey-1;

  .inner {
    background: $nav-grey-1;
    border-right: 1px solid transparent; // ensure visible separation in Windows High Contrast mode

    @include media-breakpoint-up(sm) {
      // On medium, make it possible for the nav links to scroll.
      display: flex;
      flex-flow: column nowrap;
    }
  }
}

.nav-toggle.icon {
  position: absolute;
  padding-left: $mobile-nice-padding;
  cursor: pointer;
  border: 1px solid transparent; // ensure visible separation in Windows High Contrast mode
  background-color: transparent;

  &:before {
    position: relative;
    top: 3px;
    font-size: 40px;
    color: $color-white;
    line-height: 40px;
    content: '\2261';
  }
}

.nav-main {
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  li {
    @include transition(border-color 0.2s ease);
    position: relative;
  }

  a {
    @include transition(border-color 0.2s ease);
    -webkit-font-smoothing: auto;
    text-decoration: none;
    display: block;
    color: $color-menu-text;
    padding: 0.8em 1.7em;
    font-size: 1em;
    font-weight: normal;
    // Note, font-weights lower than normal,
    // and font-size smaller than 1em (80% ~= 12.8px),
    // makes the strokes thinner than 1px on non-retina screens
    // making the text semi-transparent
    &:hover,
    &:focus {
      background-color: $nav-item-hover-bg;
      color: $color-white;
      text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    }
  }

  .menu-item a {
    position: relative;
    white-space: nowrap;
    border-left: 3px solid transparent;

    &:before {
      font-size: 1rem;
      vertical-align: -15%;
      margin-right: 0.5em;
    }

    // only really used for spinners and settings menu
    &:after {
      font-size: 1.5em;
      margin: 0;
      position: absolute;
      right: 0.5em;
      top: 0.5em;
      margin-top: 0;
    }
  }

  .menu-active {
    background: $nav-item-active-bg;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);

    > a {
      border-left-color: $color-salmon;
      color: $color-white;
    }
  }

  .nav-footer-submenu {
    a {
      border-left: 3px solid transparent;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:before {
        font-size: 1rem;
        margin-right: 0.5em;
        vertical-align: -10%;
      }
    }
  }

  .account {
    display: none;
  }

  *:focus {
    @include show-focus-outline-inside;
  }
}

.icon--menuitem {
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.5em;
  vertical-align: text-top;
}

.icon--submenu-trigger {
  // The menus are collapsible on desktop only.
  display: none;
  @include media-breakpoint-up(sm) {
    display: block;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    top: 0.8125em;
    right: 0.5em;
    @include transition(transform 0.3s ease);

    .menu-item.submenu-active & {
      transform-origin: 50% 50%;
      transform: rotate(180deg);
    }
  }
}

.icon--submenu-header {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 0.8em;
  opacity: 0.15;
}

.nav-submenu {
  background: $nav-submenu-bg;

  h2 {
    display: none;
  }

  .menu-item a {
    white-space: normal;
    padding: 0.9em 1.7em 0.9em 4.5em;

    &:before {
      margin-left: -1.5em;
    }

    .icon--menuitem {
      margin-left: -1.75em;
    }

    &:hover {
      background-color: rgba(100, 100, 100, 0.2);
    }
  }

  li {
    border: 0;
  }

  &__footer {
    margin: 0;
    padding: 0.9em 1.7em;
    text-align: center;
    color: $color-menu-text;
  }
}

.nav-search {
  position: relative;
  padding: 0 1em 1em;
  margin: 0;
  width: 100%;
  box-sizing: border-box;

  label {
    @include visuallyhidden();
  }

  input,
  button {
    border-radius: 0;
    font-size: 1em;
    border: 0;
  }

  input {
    cursor: pointer;
    border: 1px solid $nav-search-border;
    background-color: $nav-search-bg;
    color: $nav-search-color;
    padding: 0.8em 2.5em 0.8em 1em;
    font-weight: 600;

    &:hover {
      background-color: $nav-search-hover-bg;
    }

    &:active,
    &:focus {
      background-color: $nav-search-focus-bg;
      color: $nav-search-focus-color;
    }

    &::placeholder {
      color: $color-menu-text;
    }
  }

  button {
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 1em;
    bottom: 0;
    padding: 0;
    width: 3em;

    &:hover {
      background-color: $nav-item-hover-bg;
    }

    &:active {
      background-color: $nav-item-active-bg;
    }

    &:before {
      font-family: $font-wagtail-icons;
      font-weight: 200;
      text-transform: none;
      content: map.get($icons, 'search');
      display: block;
      height: 100%;
      line-height: 3.3em;
      padding: 0 1em;
    }
  }
}

// Navigation open condition
body.nav-open {
  .wrapper {
    transform: translate3d($menu-width, 0, 0);
  }

  .content-wrapper {
    position: fixed;
  }

  footer {
    bottom: 1px;
  }
}

// Explorer open condition, widens navigation area
body.explorer-open {
  .wrapper {
    transform: translate3d($menu-width-max, 0, 0);
  }

  .nav-wrapper {
    margin-left: -$menu-width-max;
    width: $menu-width-max;
  }

  .nav-main {
    display: none;
  }
}

@include media-breakpoint-up(sm) {
  .wrapper,
  body.nav-open .wrapper {
    transform: none;
    padding-left: $menu-width;

    @include transition(padding-left $menu-transition-duration ease);
  }

  body.sidebar-collapsed .wrapper {
    padding-left: $menu-width-slim;
  }

  .nav-wrapper {
    // height and position necessary to force it to 100% height of screen (with some JS help)
    position: absolute;
    left: 0;
    height: 100%;
    margin-left: 0;

    .inner {
      height: 100%;
      position: fixed;
      width: $menu-width;
      z-index: $nav-wrapper-inner-z-index;
    }
  }

  .nav-toggle.unbutton {
    display: none;
  }

  .nav-main {
    overflow: auto;
    margin-bottom: $nav-footer-closed-height;
    @include transition(margin-bottom 0.2s ease);

    .nav-footer {
      position: fixed;
      width: $menu-width;
      bottom: 0;
      background-color: $nav-footer-submenu-bg;
    }

    .nav-footer-submenu {
      @include transition(max-height 0.2s ease);
      max-height: 0;
    }

    &--open-footer {
      margin-bottom: $nav-footer-open-height;

      .nav-footer-submenu {
        max-height: $nav-footer-submenu-height;
      }
    }

    .account {
      @include clearfix;
      background: $nav-footer-account-bg;
      color: $color-menu-text;
      text-transform: uppercase;
      display: block;
      cursor: pointer;

      &:hover {
        background-color: rgba(100, 100, 100, 0.15);
        color: $color-white;
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
      }

      .avatar {
        float: left;
        margin-right: 0.9em;

        &:before {
          color: inherit;
          border-color: inherit;
        }
      }

      em {
        box-sizing: border-box;
        padding-right: 1.8em;
        margin-top: 1.2em;
        font-style: normal;
        font-weight: 700;
        width: 110px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        float: left;

        &:after {
          font-size: 1.5em;
          position: absolute;
          right: 0.25em;
        }
      }
    }
  }

  .nav-submenu {
    transform: translate3d(0, 0, 0);
    position: fixed;
    height: 100vh;
    width: 0;
    padding: 0;
    top: 0;
    left: $menu-width;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    h2,
    &__list {
      width: $menu-width;
    }

    h2 {
      display: block;
      padding: 0.2em 0;
      font-size: 1.2em;
      font-weight: 500;
      text-transform: none;
      text-align: center;
      color: $color-menu-text;

      &:before {
        font-size: 4em;
        display: block;
        text-align: center;
        margin: 0 0 0.2em;
        width: 100%;
        opacity: 0.15;
      }
    }

    &__list {
      overflow: auto;
      flex-grow: 1;
    }

    &__footer {
      line-height: $nav-footer-closed-height;
      padding: 0;
    }
  }

  li.submenu-active {
    background: $nav-submenu-bg;

    > a {
      text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);

      &:hover {
        background-color: transparent;
      }
    }

    .nav-submenu {
      @include transition(width 0.2s ease);
      box-shadow: 2px 0 2px rgba(0, 0, 0, 0.35);
      width: $menu-width;

      a {
        padding-left: 3.5em;
      }
    }
  }

  body.nav-open {
    .content-wrapper {
      position: relative;
    }
  }

  body.explorer-open {
    overflow: hidden;

    &:after {
      opacity: 1;
      visibility: visible;
    }

    .wrapper {
      transform: none;
    }

    .nav-wrapper {
      margin-left: 0;
      width: $menu-width;
    }

    .nav-main {
      display: block;
    }
  }
}

///////////////
// Z-indexes //
///////////////
.nav-toggle {
  z-index: 5;
}

// stylelint-disable-next-line no-duplicate-selectors
.nav-wrapper {
  z-index: 2;
}

// Avoiding a stacking context for the content-wrapper saves us a world
// of pain when dealing with overlays that are appended to the end of
// <body>, eg Hallo & calendars. As long as content-wrapper remains floated,
// the z-index shouldn't be required.

// .content-wrapper {
// z-index: 3;
// }
// stylelint-disable-next-line no-duplicate-selectors
.nav-submenu {
  z-index: 6;
}

footer,
.logo {
  z-index: 100;
}

@include media-breakpoint-up(sm) {
  .nav-main {
    .nav-footer {
      z-index: 2;
    }
  }

  .nav-submenu {
    z-index: 500;
  }

  // Allows overspill of messages banner onto left menu, but also explorer
  // to spill over main content
  .nav-wrapper {
    z-index: auto;
  }

  // footer is z-index: 100, so ensure the navigation sits on top of it.
  .nav-wrapper.submenu-active {
    z-index: 200;
  }
}