forked from Transparency/kgroad-frontend2
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import "./Navbar.scss";
|
|
import Image from "next/image";
|
|
import { Link } from "@/shared/config/navigation";
|
|
import { usePathname } from "@/shared/config/navigation";
|
|
import logo from "@/shared/assets/logo.svg";
|
|
import { LINKS } from "@/shared/variables/links";
|
|
import NavLanguage from "./NavLanguage/NavLanguage";
|
|
import NavAuth from "./NavAuth/NavAuth";
|
|
import menu from "./icons/menu.svg";
|
|
import cross from "./icons/cross.svg";
|
|
import NavMenu from "./NavMenu/NavMenu";
|
|
import { useState } from "react";
|
|
|
|
const Navbar = () => {
|
|
const pathname = usePathname();
|
|
const [openMenu, setOpenMenu] = useState<boolean>(false);
|
|
|
|
return (
|
|
<section className="navbar">
|
|
<Link href="/">
|
|
<Image src={logo} alt="Logo" />
|
|
</Link>
|
|
|
|
<nav className="navbar__links">
|
|
{LINKS().map((link) => (
|
|
<Link
|
|
className={`navbar__link${
|
|
pathname === link.pathname ? "_active" : ""
|
|
}`}
|
|
key={link.id}
|
|
href={link.pathname}
|
|
>
|
|
{link.pagename}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="navbar__lang-and-auth">
|
|
<NavLanguage />
|
|
<NavAuth setOpenMenu={setOpenMenu} />
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setOpenMenu((prev) => !prev)}
|
|
className="navbar__menu"
|
|
>
|
|
<Image src={openMenu ? cross : menu} alt="menu icon" />
|
|
</button>
|
|
|
|
{openMenu && <NavMenu setOpenMenu={setOpenMenu} />}
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|