polyglot/app/assets/stylesheets/components/_navbar.scss

.polyglot-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: 3.5em;
  background: $navbar-background;

  .logo {
    color: $primary;
    margin-left: 1em;

    font-size: 2em;
    font-weight: bold;
    a:hover {
      color: $primary;
    }
  }

  .right-align {
    height: 100%;
    width: 16em;
    margin-right: 4em;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .links {
      display: flex;
      height: inherit;

      div {
        height: inherit;
        display: flex;
        align-items: center;
        border-bottom: 5px solid transparent;

        &:first-child {
          margin-right: 2.5em;
        }

        &.active {
          border-bottom: 5px solid $primary;
          color: white;
        }

        &:hover {
          color: white;
        }

        &.active, &:hover {
          a {
            color: white;
          }
        }

        a {
          color: $text-inactive;
          text-decoration: none;
        }
      }
    }
  }

  .profile {
    img {
      width: 3em;
      padding: 0.2em;
      border-radius: 50%;
    }
  }

  .burger-menu {
    margin-right: 20px;
    color: $primary;
  }

  .polyglot-dropdown {
    background-color: $navbar-background;

    li {
      a {
        color: $text-inactive;

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