ReactMarkap/src/assets/scss/base/_header.scss

.header {
	flex-shrink: 0;
	min-height: $header-height;
	background-color: #7388ff;
	transition: min-height .225s ease;

	@include for-laptop-up {
		min-height: $header-height-desktop;
	}

	&__wrapper {
		display: flex;
		align-items: center;
		min-height: $header-height;
		transition: min-height .225s ease;

		@include for-laptop-up {
			min-height: $header-height-desktop;
		}
	}

	&__logo-link {
		display: block;
		width: 135px;
		height: 28px;
	}

	&__nav {
		position: fixed;
		top: $header-height;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		overflow: auto;
		background-color: transparent;
		opacity: 0;
		pointer-events: none;
		transition: opacity .225s ease;

		&.is-opened {
			opacity: 1;
			transform: translate(0, 0);
			pointer-events: auto;
			background-color: #ffffff;

			.main-header__nav-items {
				display: block;
			}
		}

		@include for-laptop-up {
			position: static;
			padding: 0;
			opacity: 1;
			pointer-events: auto;
			transition: none;
			background: transparent;
			height: inherit;
			overflow: visible;
			margin-left: auto;
			margin-right: 22px;
		}
	}

	&__nav-items {
		display: none;

		@include for-laptop-up {
			display: flex;
			height: inherit;
		}
	}

	&__nav-link {
		font-size: 20px;
		color: #606060;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 78px;
		border-bottom: 1px solid rgba(#d8d8d8, .48);

		@include for-laptop-up {
			font-size: 16px;
			color: $header-color;
			padding-left: 12px;
			padding-right: 12px;
			min-height: $header-height-desktop;
			border: 0 none;
			transition: color .225s ease;

			&:hover {
				color: lighten($header-color, 30%)
			}
		}
	}

	&__lang-select {
		margin-left: auto;
		margin-right: 10px;

		@include for-laptop-up {
			margin-left: 0;
			margin-right: 0;
		}
	}

	&__hamburger {
		width: 40px;
		height: 40px;
		flex-shrink: 0;
	}

	@include for-laptop-up {
		.hamburger {
			display: none;
		}
	}
}