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

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

.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: #{5 / $base-font-size}rem #{10 / $base-font-size}rem;
}

.nav__item {
	position: relative;
	min-width: #{72 / $base-font-size}rem;
	text-align: center;
}

.nav__dropdown {
	@include themify() {
		background-color: map-get($theme-map, 'background-color');
		border: 1px solid map-get($theme-map, 'ide-border-color');
	}
	@extend %hidden-element;
	& li + li {
		margin-top: #{10 / $base-font-size}rem;
	}
	width: #{140 / $base-font-size}rem;
	.nav__item:hover & {
		display: flex;
		position: absolute;
		flex-direction: column;
		padding: #{10 / $base-font-size}rem;
		left: #{-10 / $base-font-size}rem;
		height: auto;
	}
}