yarkov.tech/src/components/Header/Header.scss

.header {
	position: sticky;
	top: 0;
	border-bottom: 1px solid var(--border-color);
	background-color: var(--background-header-color);
	padding-top: 13.5px;
	padding-bottom: 13.5px;
	user-select: none;
	z-index: 9999;
	& .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&__logo a {
		text-decoration: none;
		font-weight: 600;
		font-size: var(--font-size-lg);
		color: var(--font-color);
		&:hover {
			text-decoration: underline;
			text-decoration-thickness: 2px;
			text-underline-offset: 5px;
		}
	}
	&__nav {
		display: flex;
		align-items: center;
		& ul {
			display: flex;
			list-style: none;
			column-gap: 20px;
			margin: 0;
			padding: 0;
			margin-right: 35px;
			& li a {
				display: inline-block;
				font-weight: 500;
				color: var(--font-color);
				text-decoration: none;
				text-transform: lowercase;
				&:hover,
				&.active {
					color: var(--color-blue-500);
					text-decoration: underline;
					text-decoration-thickness: 2px;
					text-underline-offset: 4px;
				}
			}
		}
		&-contacts {
			display: flex;
			align-items: center;
			column-gap: 10px;
			margin-right: 30px;
			& a {
				text-decoration: none;
				font-size: 0;
				&:hover {
					opacity: var(--opacity-hover);
				}
			}
		}
		&-settings {
			column-gap: 13.5px;
		}
	}
}

@media screen and (max-width: 768px) {
	.header {
		padding: 10px 0;
		&__nav {
			display: none;
		}
	}

	body[data-is-mobile-open="true"] {
		& .header {
			padding: 15px 0;
			background-color: var(--background-header-color);
			position: fixed;
			right: 0;
			left: 0;
			top: 0;
			bottom: 0;
			height: 100%;
			z-index: 9999;
			& .container {
				flex-direction: column;
				row-gap: 3rem;
			}
			&__logo {
				align-self: flex-start;
			}
			&__nav {
				display: block;
				&-links {
					display: block;
					text-align: center;
					margin: 0;
					& li {
						margin-bottom: 30px;
						& a {
							font-size: var(--font-size-xl);
						}
					}
				}
				&-contacts {
					margin-right: 0;
					margin-top: 2rem;
					justify-content: center;
				}
			}
			& .nav-toggle {
				position: absolute;
				right: var(--content-padding);
			}
			& .theme-switcher {
				display: block;
				position: absolute;
				bottom: 45px;
				right: 2.5rem;
				& svg {
					width: 36px;
					height: 36px;
				}
			}
		}
	}
}