112 lines
3.4 KiB
JavaScript
112 lines
3.4 KiB
JavaScript
import React from "react";
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import LanguageSwitch from "../language-switch/language-switch.component";
|
|
|
|
import Logo from "../../assets/images/main/header/logo.svg";
|
|
import Logo2 from "../../assets/images/main/footer/logo.svg";
|
|
import Phone from "../../assets/images/main/footer/phone.png";
|
|
import Email from "../../assets/images/main/footer/email.png";
|
|
|
|
import "./header.style.scss";
|
|
|
|
const MidHeader = () => {
|
|
const { t, i18n } = useTranslation();
|
|
|
|
const toggleMenu = () => {
|
|
const MenuButton = document.getElementsByClassName("mobile-menu-btn")[0];
|
|
const Menu = document.getElementsByClassName("mobile-menu")[0];
|
|
|
|
MenuButton.classList.toggle("open");
|
|
Menu.classList.toggle("open");
|
|
|
|
if (Menu.classList.contains("open")) {
|
|
const outsideClickListener = (event) => {
|
|
let MenuVisible = getComputedStyle(Menu).right;
|
|
|
|
if (
|
|
!Menu.contains(event.target) &&
|
|
MenuVisible !== 0 &&
|
|
!MenuButton.contains(event.target)
|
|
) {
|
|
Menu.classList.remove("open");
|
|
MenuButton.classList.remove("open");
|
|
removeClickListener();
|
|
}
|
|
if (!Menu.classList.contains("open")) {
|
|
removeClickListener();
|
|
}
|
|
};
|
|
const removeClickListener = () => {
|
|
document.removeEventListener("click", outsideClickListener);
|
|
};
|
|
document.addEventListener("click", outsideClickListener);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("resize", () => {
|
|
document
|
|
.getElementsByClassName("mobile-menu-btn")[0]
|
|
.classList.remove("open");
|
|
document.getElementsByClassName("mobile-menu")[0].classList.remove("open");
|
|
});
|
|
|
|
return (
|
|
<header>
|
|
<div className="logo">
|
|
<img src={Logo} alt="MID" />
|
|
</div>
|
|
<nav className="navigation">
|
|
<a href="#services">{t("menu.services")}</a>
|
|
<a href="#about-us">{t("menu.about_us")}</a>
|
|
<a href="#projects">{t("menu.portfolio")}</a>
|
|
<a href="#pricing">{t("menu.pricing")}</a>
|
|
<a href="#contact-us">{t("menu.contact_us")}</a>
|
|
<LanguageSwitch />
|
|
</nav>
|
|
|
|
<div
|
|
className="mobile-menu-btn"
|
|
onClick={toggleMenu}
|
|
onKeyDown={toggleMenu}
|
|
aria-label="menu button"
|
|
role="button"
|
|
tabIndex={0}
|
|
>
|
|
<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>
|
|
</div>
|
|
<div className="mobile-menu">
|
|
<img src={Logo2} alt="MID Creative Digital Agency" />
|
|
|
|
<nav className="navigation">
|
|
<a href="#top">Home</a>
|
|
<a href="#services">Services</a>
|
|
<a href="#about-us">About Us</a>
|
|
<a href="#projects">Featured Projects</a>
|
|
<a href="#contact-us">Contact Us</a>
|
|
</nav>
|
|
|
|
<div className="header-contacts">
|
|
<a href="tel:+371 2662 0770">
|
|
<img src={Phone} alt="phone" />
|
|
</a>
|
|
<a href="tel:+371 2662 0770">+371 2662 0770</a>
|
|
</div>
|
|
<div className="header-contacts">
|
|
<a href="mailto:info@midcreative.eu">
|
|
<img src={Email} alt="email" />
|
|
</a>
|
|
<a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default MidHeader;
|