yarkov.tech/src/components/Header/Header.astro

---
import { Icon } from "astro-icon";
import { IS_SITE_UNDER_CONSTRUCTION, SITE_METADATA } from "@root/config";
import { removeSlashes } from "@utils/string";
import ThemeSwitcher from "@components/ThemeSwticher";
import UIString from "@components/UIString";
import TranslatedLink from "@components/TranslatedLink";
import LanguageSelect from "@components/LanguageSelect";
import NavToggle from "./NavToggle";

const { name, nav, contacts } = SITE_METADATA;
const { pathname } = Astro.url;
---

<header {...(IS_SITE_UNDER_CONSTRUCTION ? { style: 'top: 45px;' } : {})}>
	<div class="container">
		<div class="logo">
			<TranslatedLink to={"/"}>
				{name}
			</TranslatedLink>
		</div>
		<nav>
			<ul>
				{
					nav.map((link) => (
						<li>
							<TranslatedLink
								class={pathname.includes(removeSlashes(link.url)) && pathname.split("/").length < 5 && "active"}
								to={link.url}
							>
								<UIString key={link.key} />
							</TranslatedLink>
						</li>
					))
				}
			</ul>
			<div class="contacts">
				<a href={"mailto:" + contacts.email}>
					Email
					<Icon name="email" width="18" height="18" />
				</a>
				<a href={contacts.githubUrl}>
					Github
					<Icon name="github_filled" width="18" height="18" />
				</a>
				<a href={contacts.telegramUrl}>
					Telegram
					<Icon name="telegram" width="18" height="18" />
				</a>
			</div>
			<div class="flex settings">
				<LanguageSelect />
				<ThemeSwitcher client:visible />
			</div>
		</nav>
		<NavToggle client:visible />
	</div>
</header>

<style lang="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);
		}

		& a:hover,
		a.active {
			color: var(--color-blue-500);
			text-decoration: underline;
			text-decoration-thickness: 2px;
			text-underline-offset: 4px;
		}

		& 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;
				}
			}
			& .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"] {
			overflow-y: hidden;
			touch-action: none;
			& 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;
					& ul {
						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;
					}
				}
			}
		}
	}
</style>