p5.js-web-editor/client/styles/components/_nav.scss

.nav {
  height: #{42 / $base-font-size}rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  @include themify() {
    border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
  }

  & button {
    padding: 0;
  }
}

.nav__items-left,
.nav__items-right {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 100%;
  align-items: center;
}

.nav__items-left,
.nav__items-right {
  & button, & a {
    @include themify() {
      color: getThemifyVariable('primary-text-color');
    }
  }
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  & button {
    padding: #{12 / $base-font-size}rem #{10 / $base-font-size}rem;
  }
}

.nav__item:first-child,
.nav__item--no-icon {
  padding-left: #{15 / $base-font-size}rem;
}

.nav__item:last-child {
  padding-right: #{15 / $base-font-size}rem;
}

.nav__item-header-triangle polygon {
  @include themify() {
    fill: getThemifyVariable('icon-color');
  }
}

.nav__item:hover {
  .nav__item-header {
    @include themify() {
      color: getThemifyVariable('nav-hover-color');
    }
  }
  
  & g, & path {
    @include themify() {
      fill: getThemifyVariable('nav-hover-color');
    }
  }

  .nav__item-header-triangle polygon {
    @include themify() {
      fill: getThemifyVariable('nav-hover-color');
    }
  }
}

.nav__item-header:hover {
  @include themify() {
    color: getThemifyVariable('nav-hover-color');
  }
  & g, & path {
    @include themify() {
      fill: getThemifyVariable('nav-hover-color');
    }
  }
}

.nav__item-header-triangle {
	margin-left: #{5 / $base-font-size}rem;
}

.nav__dropdown {
  @include themify() {
      color: getThemifyVariable('nav-hover-color');
    }
}

.nav__item-header-triangle {
	margin-left: #{5 / $base-font-size}rem;
}

.nav__dropdown {
  @extend %dropdown-open-left;
  display: none;
  .nav__item--open & {
    display: flex;
  }
}

.nav__items-right {
  padding-right: #{20 / $base-font-size}rem;

  & .nav__dropdown {
    width: #{122 / $base-font-size}rem;
  }
}

.nav__item-spacer {
  @include themify() {
    color: map-get($theme-map, 'inactive-text-color');
    margin: 0 #{8 / $base-font-size}rem;
  }
}

// .nav__dropdown button {
//   padding: 0;
// }

.nav__dropdown-item {
  & button,
  & a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.nav__announce {
  position: absolute;
  top: #{40 / $base-font-size}rem;
  right: #{88 / $base-font-size}rem;
  width: #{398 / $base-font-size}rem;
  padding: #{5 / $base-font-size}rem 0;
  text-transform: uppercase;
  background-color: #ffbc00;
  color: white;
  text-align: center;
  padding: #{7 / $base-font-size}rem #{8 / $base-font-size}rem;
  line-height: 145%;
  z-index: 0;
}

.nav__item-logo {
  position: relative;
  height: #{42 / $base-font-size}rem;
  width: #{56 / $base-font-size}rem;

  & span {
    position: absolute;
  }
}
.svg__logo g > path {
  @include themify() {
      fill: getThemifyVariable('logo-color');
    }
}
.svg__logo g g:first-of-type path {
  fill: none;
}

.nav__keyboard-shortcut {
  font-size: #{12 / $base-font-size}rem;
  font-family: Inconsololata, monospace;

  @include themify() {
    color: getThemifyVariable('keyboard-shortcut-color');
  }

  .nav__dropdown-item:hover & {
    @include themify() {
      color: getThemifyVariable('button-hover-color');
    }
  }
}

.nav__back-icon {
  & g, & path {
    opacity: 1;
    @include themify() {
      fill: getThemifyVariable('inactive-text-color');
    }
  }
  margin-right: #{5 / $base-font-size}rem;
}

.nav__back-link {
  display: flex;
}