cc155ccde4
All checks were successful
Build and Deploy Astro Landing / deploy (push) Successful in 1m39s
124 lines
3.7 KiB
Text
124 lines
3.7 KiB
Text
---
|
|
import "./header.style.css";
|
|
import { Image } from "astro:assets";
|
|
import Logo from "@images/main/header/logo.svg";
|
|
import Logo2 from "@images/main/footer/logo.svg";
|
|
import Phone from "@images/main/footer/phone.png";
|
|
import Email from "@images/main/footer/email.png";
|
|
import { languages, type SupportedLang } from "@/i18n/ui";
|
|
import {
|
|
getLangFromUrl,
|
|
useTranslatedPath,
|
|
useTranslations,
|
|
} from "@/i18n/utils";
|
|
|
|
const lang = getLangFromUrl(Astro.url);
|
|
const t = useTranslations(lang);
|
|
const translatePath = useTranslatedPath(lang);
|
|
---
|
|
|
|
<header>
|
|
<div class="cont">
|
|
<div class="logo">
|
|
<a href="/"><Image src={Logo} alt="MID" /></a>
|
|
</div>
|
|
|
|
<nav class="navigation">
|
|
<a href={translatePath("/#services")}>{t("menu.services")}</a>
|
|
<a href={translatePath("/#about-us")}>{t("menu.about_us")}</a>
|
|
<a href={translatePath("/#projects")}>{t("menu.portfolio")}</a>
|
|
<a href="/blog">{t("menu.blog")}</a>
|
|
<a href={translatePath("/#contact-us")}>{t("menu.contact_us")}</a>
|
|
</nav>
|
|
|
|
<nav class="lang-switcher" aria-label="Language switcher">
|
|
{
|
|
Object.entries(languages).map(([locale, label]) => {
|
|
const targetLang = locale as SupportedLang;
|
|
return (
|
|
<a
|
|
href={translatePath("/", targetLang)}
|
|
class={targetLang === lang ? "active" : ""}
|
|
>
|
|
{label}
|
|
</a>
|
|
);
|
|
})
|
|
}
|
|
</nav>
|
|
|
|
<button
|
|
class="mobile-menu-btn"
|
|
aria-label="Toggle menu"
|
|
aria-expanded="false"
|
|
>
|
|
<span id="top-left"></span>
|
|
<span id="top-right"></span>
|
|
<span id="center-left"></span>
|
|
<span id="center-right"></span>
|
|
<span id="bottom-left"></span>
|
|
<span id="bottom-right"></span>
|
|
</button>
|
|
|
|
<div class="mobile-menu">
|
|
<Image src={Logo2} alt="MID Creative Digital Agency" />
|
|
|
|
<nav class="navigation">
|
|
<a href={translatePath("/#top")}>{t("menu.home")}</a>
|
|
<a href={translatePath("/#services")}>{t("menu.services")}</a>
|
|
<a href={translatePath("/#about-us")}>{t("menu.about_us")}</a>
|
|
<a href={translatePath("/#projects")}>{t("menu.portfolio")}</a>
|
|
<a href="/blog">{t("menu.blog")}</a>
|
|
<a href={translatePath("/#contact-us")}>{t("menu.contact_us")}</a>
|
|
</nav>
|
|
|
|
<nav class="lang-switcher" aria-label="Language switcher mobile">
|
|
{
|
|
Object.entries(languages).map(([locale, label]) => {
|
|
const targetLang = locale as SupportedLang;
|
|
return (
|
|
<a
|
|
href={translatePath("/", targetLang)}
|
|
class={targetLang === lang ? "active" : ""}
|
|
>
|
|
{label}
|
|
</a>
|
|
);
|
|
})
|
|
}
|
|
</nav>
|
|
|
|
<div class="header-contacts">
|
|
<a href="tel:+37126620770">+371 2662 0770</a>
|
|
</div>
|
|
<div class="header-contacts">
|
|
<a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
const btn = document.querySelector(".mobile-menu-btn") as HTMLElement;
|
|
const menu = document.querySelector(".mobile-menu") as HTMLElement;
|
|
|
|
btn.addEventListener("click", () => {
|
|
const isOpen = menu.classList.toggle("open");
|
|
btn.classList.toggle("open");
|
|
btn.setAttribute("aria-expanded", String(isOpen));
|
|
});
|
|
|
|
document.addEventListener("click", (e) => {
|
|
if (!menu.contains(e.target as Node) && !btn.contains(e.target as Node)) {
|
|
menu.classList.remove("open");
|
|
btn.classList.remove("open");
|
|
btn.setAttribute("aria-expanded", "false");
|
|
}
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
menu.classList.remove("open");
|
|
btn.classList.remove("open");
|
|
btn.setAttribute("aria-expanded", "false");
|
|
});
|
|
</script>
|