MusareReact/frontend/app/styles/navbar.scss

@import "colors";
@import "breakpoints";
@import "specific/button";

header {
	background-color: $musare_color_primary_blue;
	display: flex;
	justify-content: space-between;

	height: 64px;

	> a {
		height: 38px;
		margin: 13px;

		img {
			height: 100%;
		}
	}

	.hamburger {
		background-color: $musare_color_primary_blue;
		transition: .1s ease;

		&:hover, &:focus {
			background-color: $musare_color_secondary_blue;
			cursor: pointer;
		}

		span {
			background-color: $musare_color_white;
			display: flex;
			margin-left: auto;
			margin-right: auto;
		}
	}

	navbar {
		background-color: $musare_color_primary_blue;
		display: flex;

		a {
			color: $musare_color_white;
			display: inline-block;
			text-decoration: none;
			text-align: center;

			transition: .1s ease;

			&:hover, &:focus {
				background-color: $musare_color_secondary_blue;
				cursor: pointer;
			}
		}
	}
}

@include responsive(smallest) {
	header {
		height: 64px;

		.hamburger {
			height: 64px;
			width: 64px;

			span {
				width: 34px;
				height: 2px;

				&:nth-child(2) {
					margin-top: 11px;
				}

				&:nth-child(3) {
					margin-top: 11px;
				}
			}
		}

		navbar {
			visibility: hidden;
			display: none;
			width: 100%;
			height: calc(100% - 64px);
			flex-direction: column;
			position: absolute;
			top: 64px;
			z-index: 100;

			&.show {
				visibility: visible;
				display: flex;
			}

			a {
				width: 100%;
				height: 64px;
				line-height: 64px;
				font-size: 27px;
			}
		}
	}
}

@include responsive(large) {
	header {
		.hamburger {
			visibility: hidden;
			display: none;
		}

		navbar {
			visibility: unset;
			display: flex;
			flex-direction: row;
			height: 64px;
			width: unset;
			position: unset;

			a {
				height: 24px;
				line-height: 24px;
				font-size: 18px;
				padding: 20px 10px;
			}
		}
	}
}