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

.nav {
	width: 100%;
	padding: #{10 / $base-font-size}rem #{32 / $base-font-size}rem 0 #{32 / $base-font-size}rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.nav__items-left, .nav__items-right {
	@include themify() {
		border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
	}
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding: #{3 / $base-font-size}rem 0;
}

.nav__items-left {
  & button {
    @include themify() {
      color: getThemifyVariable('inactive-text-color');
    }
  }
}

.nav__item {
	position: relative;
	padding: 0 #{24 / $base-font-size}rem;
	text-align: center;
}

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

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


.nav__dropdown {
	@include themify() {
		background-color: map-get($theme-map, 'modal-background-color');
		border: 1px solid map-get($theme-map, 'modal-border-color');
		box-shadow: 0 0 18px getThemifyVariable('shadow-color');
	}
  @extend %hidden-element;
	text-align: left;
	width: #{140 / $base-font-size}rem;
	.nav__item:hover & {
		display: flex;
		position: absolute;
		flex-direction: column;
  	top: #{-8 / $base-font-size}rem;;
		left: #{-11 / $base-font-size}rem;
		height: auto;
	}
	padding-bottom: #{8 / $base-font-size}rem;
  z-index: 1;
}

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

.nav__dropdown li {
  padding: #{4 / $base-font-size}rem #{16 / $base-font-size}rem;
  width: 100%;
}

.nav__dropdown a, button {
  @include themify() {
    color: getThemifyVariable('secondary-text-color');
  }
}

.nav__dropdown button {
  padding: 0;
}

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

.nav__dropdown-heading {
  @include themify() {
		border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
  }
  margin-top: #{3 / $base-font-size}rem;
  text-align: center;
  margin-bottom: #{4 / $base-font-size}rem;
}

.nav__dropdown-heading a, .nav__dropdown-heading a:hover {
  @include themify() {
    color: getThemifyVariable('inactive-text-color');
  }
  cursor: default;
  width: 100%;
}

.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;
}