astuto/app/javascript/stylesheets/general/_header.scss

.navbar {
  position: sticky;
  z-index: 1;
  top: 0px;

  background-color: white;

  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.25);

  box-shadow: 0 1px 4px rgba(0,0,0,0.15), 0 1px 8px rgba(0,0,0,0.15);

  margin-bottom: 1em;

  .navbar-brand {
    font-size: 18pt;
    font-weight: 700;

    .logo {
      @extend
        .d-inline-block,
        .align-top,
        .mr-2;

      width: 36px;
    }
  }

  .boardsNav {
    .nav-item {
      @extend
        .badge,
        .text-uppercase;
      
      font-size: 14px;
      text-align: left;
    }

    .nav-item.active {
      @extend .badgeLight;
    }
  }

  .fullname {
    vertical-align: middle;

    color: $astuto-black;
  }

  .dropdown-toggle::after {
    vertical-align: middle;
  }

  .navbar-toggler:focus {
    outline: none;
  }

  .navbar-toggler[aria-expanded="true"] {
    background-color: $astuto-grey;
  }

  .dropdown-item:active {
    background-color: $astuto-black;
  }
}

@media (prefers-color-scheme: dark) {
  .navbar {
    background-color: $astuto-black;

    .fullname {  
      color: $navbar-dark-brand-color;
    }

    .navbar-brand {
      color: $navbar-dark-brand-color;
  
      @include hover-focus {
        color: $navbar-dark-brand-hover-color;
      }
    }

    .dropdown-menu {
      background-color: #363636;
    }

    .dropdown-item {
      color: white;
      &:hover {
        background-color: black;
      }
    }
  
    .navbar-nav {
      .nav-link {
        color: $navbar-dark-color;
  
        @include hover-focus {
          color: $navbar-dark-hover-color;
        }
  
        &.disabled {
          color: $navbar-dark-disabled-color;
        }
      }
  
      .show > .nav-link,
      .active > .nav-link,
      .nav-link.show,
      .nav-link.active {
        color: $navbar-dark-active-color;
      }
    }
  
    .navbar-toggler {
      color: $navbar-dark-color;
      border-color: $navbar-dark-toggler-border-color;
    }
  
    .navbar-toggler-icon {
      background-image: $navbar-dark-toggler-icon-bg;
    }
  
    .navbar-text {
      color: $navbar-dark-color;
      a {
        color: $navbar-dark-active-color;
  
        @include hover-focus {
          color: $navbar-dark-active-color;
        }
      }
    }
  }
}