open-vault/ui/app/styles/core/navbar.scss

.navbar {
  background-color: $black;
  display: flex;
  height: $header-height;
  justify-content: flex-start;
  left: 0;
  padding: $spacing-xs $spacing-s $spacing-xs 0;
  position: fixed;
  right: 0;
  top: 0;
}

.navbar-brand {
  background: $vault-gray;
  border-radius: 0 $radius-large $radius-large 0;
  margin-right: $spacing-s;
  min-height: auto;
  position: relative;
  z-index: 203;

  .navbar-item {
    background-color: transparent;
    padding: $spacing-xs $spacing-l;

    &:hover,
    .is-active {
      background-color: transparent;
    }
  }
}

.navbar-drawer-toggle {
  font-size: $size-6;
  color: $vault-gray;
  cursor: pointer;
  font-weight: $font-weight-semibold;
  margin-left: -$spacing-s;
  padding: $spacing-xs $spacing-xxs;
  background: none;
  border: none;

  .navbar-drawer & {
    position: absolute;
    top: $spacing-xs;
    right: $spacing-xxs;
  }
}

.navbar-drawer-overlay {
  height: 100vh;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: background-color $speed, opacity $speed;
  will-change: background-color, opacity;
  z-index: -1;

  &.is-active {
    background-color: rgba($black, 0.25);
    pointer-events: all;

    @include from($mobile) {
      background-color: transparent;
      pointer-events: none;
    }
  }
}

.navbar-sections,
.navbar-sections li,
.navbar-drawer-scroll,
.navbar-drawer-scroll > * {
  @include from($mobile) {
    align-items: center;
    display: flex;
  }
}

.navbar-sections {
  a {
    color: $grey-light;
    display: block;
    font-weight: $font-weight-semibold;
    line-height: 1.3;
    padding: $spacing-xs $spacing-m;
    text-decoration: none;
    transition: background-color $speed, color $speed;
    will-change: background-color, color;

    @include from($mobile) {
      border-radius: $radius;
      display: inline-block;
      padding: $spacing-xxs $spacing-s;
    }

    &.is-active {
      background-color: $vault-gray-700;
      color: $white;
    }

    &:hover {
      color: $white;
    }
  }
}

.navbar-end {
  margin-left: auto;
}

.navbar-item {
  padding: $spacing-xs;
}

.navbar-separator {
  background-color: $ui-gray-700;
  height: 1px;
  margin: $spacing-xs 0;
  width: 100%;

  @include from($mobile) {
    height: $spacing-l;
    margin: 0 $spacing-s;
    width: 1px;
  }
}

.navbar-drawer {
  flex: 1 1 auto;

  @include until($mobile) {
    background-color: $ui-gray-900;
    display: flex;
    flex-direction: column;
    height: 100vh;
    left: 0;
    padding: 4rem 0 $spacing-m;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: box-shadow $speed, transform $speed-slow;
    width: $drawer-width;
    will-change: transform, box-shadow;
    z-index: 201;
  }

  &.is-active {
    @include until($mobile) {
      box-shadow: 5px 0 10px rgba($black, 0.36);
      transform: translateX(0);
    }
  }

  .navbar-item .button {
    color: $grey-light;
    display: flex;
    font-size: 1rem;
    height: auto;
    justify-content: flex-start;
    text-align: left;
    width: 100%;

    @include from($mobile) {
      display: inline-flex;
      height: $spacing-l;
      width: auto;
    }

    &.popup-open,
    &.ember-basic-dropdown-trigger--below {
      color: $white;

      .is-status-chevron {
        transform: rotate(0deg);

        @include from($mobile) {
          transform: rotate(180deg);
        }
      }
    }

    .is-status-chevron {
      transform: rotate(270deg);

      @include from($mobile) {
        transform: rotate(0deg);
      }
    }
  }

  .button .icon,
  .button .icon:first-child:not(:last-child) {
    flex: 0;
    margin: 0 $spacing-xs 0 0;

    @include from($mobile) {
      margin: -$spacing-xxs;
      margin-right: 0;
    }
  }

  .status-menu-label {
    flex: 1 1 auto;
    line-height: 1;
  }

  .nav-console-button .status-menu-label,
  .nav-user-button .status-menu-label {
    flex: 1 1 auto;

    @include from($mobile) {
      display: none;
    }
  }
}

.nav-user-button .icon {
  position: relative;
}
.nav-user-button.may-expire .icon:first-of-type::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: $yellow;
}
.navbar-drawer-scroll {
  overflow: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;

  &::before {
    background-image: linear-gradient(to bottom, $ui-gray-900, rgba($ui-gray-900, 0));
    content: '';
    height: $spacing-xs;
    left: 0;
    position: absolute;
    right: 0;
    top: $header-height;
    z-index: 1;

    @include from($mobile) {
      display: none;
    }
  }
}

.navbar-drawer .ember-basic-dropdown-content {
  @include until($mobile) {
    position: relative;
  }
}