Add navbar
No files matched your search
@@ -0,0 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
|
||||
export const Providers = ({ children }: { children: React.ReactNode }) => {
|
||||
return <SessionProvider>{children}</SessionProvider>;
|
||||
};
|
||||
@@ -2,7 +2,9 @@ import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { NextIntlClientProvider, useMessages } from "next-intl";
|
||||
import Footer from "../widgets/Footer/Footer";
|
||||
import Footer from "../../widgets/Footer/Footer";
|
||||
import Navbar from "@/widgets/Navbar/Navbar";
|
||||
import { Providers } from "./Providers";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
@@ -22,10 +24,15 @@ export default function RootLayout({
|
||||
|
||||
return (
|
||||
<html lang={params.locale}>
|
||||
<NextIntlClientProvider locale={params.locale} messages={messages}>
|
||||
<body className={inter.className}>{children}</body>
|
||||
<Footer />
|
||||
</NextIntlClientProvider>
|
||||
<body className={inter.className}>
|
||||
<NextIntlClientProvider locale={params.locale} messages={messages}>
|
||||
<Providers>
|
||||
<Navbar />
|
||||
<div>{children}</div>
|
||||
<Footer />
|
||||
</Providers>
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
// import "./globals.scss";
|
||||
// import "@/shared/fonts/fonts.scss";
|
||||
import NotFound from "./widgets/NotFound/NotFound";
|
||||
import NotFound from "../widgets/NotFound/NotFound";
|
||||
|
||||
export default function NotFoundPage() {
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
<svg width="138.000000" height="33.000000" viewBox="0 0 138 33" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs>
|
||||
<pattern id="pattern_1252_375810" patternContentUnits="objectBoundingBox" width="1.000000" height="1.000000">
|
||||
<use xlink:href="#image1252_37581_0" transform="matrix(0.004525,0,0,0.018922,0,-0.00144)"/>
|
||||
</pattern>
|
||||
<image id="image1252_37581_0" width="221.000000" height="53.000000" xlink:href="data:image/png;base64,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 truncated
|
||||
</defs>
|
||||
<rect id="image 1" width="138.000000" height="33.000000" fill="url(#pattern_1252_375810)" fill-opacity="1.000000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
@@ -0,0 +1,14 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export const LINKS = () => {
|
||||
const t = useTranslations("navigation");
|
||||
|
||||
const LINKS = [
|
||||
{ id: 1, pagename: t("home"), pathname: "/" },
|
||||
{ id: 2, pagename: t("news"), pathname: "/news" },
|
||||
{ id: 3, pagename: t("tenders"), pathname: "/tenders" },
|
||||
{ id: 4, pagename: t("contacts"), pathname: "/contacts" },
|
||||
];
|
||||
|
||||
return LINKS;
|
||||
};
|
||||
@@ -4,9 +4,9 @@ import facebook from "./assets/facebook.svg";
|
||||
import instagram from "./assets/instagram.svg";
|
||||
import app_store_btn from "./assets/app-store-btn.svg";
|
||||
import play_market_btn from "./assets/play-market-btn.svg";
|
||||
import { Link } from "@/app/shared/config/navigation";
|
||||
import { Link } from "@/shared/config/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { LINKS } from "@/app/shared/variables/links_footer";
|
||||
import { LINKS } from "@/shared/variables/links_footer";
|
||||
|
||||
const Footer = () => {
|
||||
const t = useTranslations("general");
|
||||
@@ -0,0 +1,58 @@
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { Link } from "@/shared/config/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface INavAuthProps {
|
||||
responsible?: boolean;
|
||||
setOpenMenu: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const NavAuth: React.FC<INavAuthProps> = ({
|
||||
responsible,
|
||||
setOpenMenu,
|
||||
}: INavAuthProps) => {
|
||||
const t = useTranslations("navigation");
|
||||
const session = useSession();
|
||||
const auth = session.status === "authenticated";
|
||||
|
||||
const pathname = usePathname();
|
||||
const isActiveProfile = pathname === "/profile";
|
||||
const isActiveSignIn = pathname === "/sign-in";
|
||||
|
||||
return (
|
||||
<>
|
||||
{auth ? (
|
||||
<Link
|
||||
onClick={() => setOpenMenu(false)}
|
||||
href="/profile/personal"
|
||||
className={`${
|
||||
responsible
|
||||
? `w-fit px-5 py-3 border-3 rounded-lg font-semibold transition-colors duration-300 ${"bg-[#3695d8] text-white"}`
|
||||
: "w-fit px-5 py-3 border-3 rounded-lg font-semibold transition-colors duration-300 bg-[#3695d8] text-white border-[#3695d8]"
|
||||
}`}
|
||||
>
|
||||
{t("profile")}
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
onClick={() => setOpenMenu(false)}
|
||||
href="/sign-in"
|
||||
className={`${
|
||||
responsible
|
||||
? `w-fit px-5 py-3 border-3 rounded-lg font-semibold transition-colors duration-300 ${
|
||||
isActiveSignIn
|
||||
? "bg-[#3695d8] text-white"
|
||||
: "bg-white text-[#3695d8] border-[#3695d8]"
|
||||
}`
|
||||
: "w-fit px-5 py-3 border-3 rounded-lg font-semibold transition-colors duration-300 bg-[#3695d8] text-white"
|
||||
}`}
|
||||
>
|
||||
{t("login")}
|
||||
</Link>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavAuth;
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useEffect, useRef, useState, useTransition } from "react";
|
||||
import chevron from "./icons/chevron-down.svg";
|
||||
import check from "./icons/check.svg";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { LANGUAGES } from "./variables";
|
||||
import { usePathname } from "@/shared/config/navigation";
|
||||
|
||||
const NavLanguage = () => {
|
||||
const [openMenu, setOpenMenu] = useState<boolean>(false);
|
||||
const menuRef: React.RefObject<HTMLDivElement> = useRef(null);
|
||||
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const { locale } = useParams();
|
||||
|
||||
const [_, startTransition] = useTransition();
|
||||
const [language, setLanguage] = useState<string>(locale as string);
|
||||
|
||||
useEffect(() => {
|
||||
const params = window.location.search || "";
|
||||
startTransition(() => {
|
||||
router.replace(`/${language}${pathname}${params}`, {
|
||||
scroll: false,
|
||||
});
|
||||
});
|
||||
}, [language]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: any) {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
||||
setOpenMenu(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [menuRef]);
|
||||
|
||||
return (
|
||||
<div ref={menuRef} className="relative">
|
||||
<button
|
||||
onClick={() => setOpenMenu((prev) => !prev)}
|
||||
className="flex items-center gap-[6px]"
|
||||
>
|
||||
{language === "ru" && <span>Рус</span>}
|
||||
{language === "kg" && <span>Кырг</span>}
|
||||
{language === "en" && <span>Eng</span>}
|
||||
<Image src={chevron} alt="chevron icon" />
|
||||
</button>
|
||||
{openMenu && (
|
||||
<div className="min-w-[130px] absolute top-[120%]">
|
||||
{LANGUAGES.map((lang) => (
|
||||
<button
|
||||
className={`px-[10px] py-[14px] w-full flex font-extrabold justify-start bg-white${
|
||||
language === lang.index
|
||||
? "px-[10px] py-[14px] w-full flex font-extrabold justify-start bg-[#f9fafb] items-center"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setLanguage(lang.index);
|
||||
setOpenMenu(false);
|
||||
}}
|
||||
key={lang.id}
|
||||
>
|
||||
{lang.language}
|
||||
{lang.index === language ? (
|
||||
<Image src={check} alt="check icon" />
|
||||
) : null}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavLanguage;
|
||||
@@ -0,0 +1,7 @@
|
||||
<svg width="15.007812" height="10.834961" viewBox="0 0 15.0078 10.835" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path id="Icon" d="M14.1699 0.835938L5.00391 10.0029L0.836914 5.83594" stroke="#3695D8" stroke-opacity="1.000000" stroke-width="1.666667" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 406 B |
@@ -0,0 +1,14 @@
|
||||
<svg width="10.000000" height="6.000000" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip1290_49928">
|
||||
<rect id="IMAGE" width="10.000000" height="6.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#clip1290_49928)">
|
||||
<path id="Vector" d="M0.246094 1.47363C-0.0820312 1.13672 -0.0820312 0.589844 0.246094 0.25293C0.574219 -0.0839844 1.10645 -0.0839844 1.43457 0.25293L5.59375 4.52637C5.92285 4.86328 5.92285 5.41016 5.59375 5.74707C5.26562 6.08398 4.73438 6.08398 4.40527 5.74707L0.246094 1.47363Z" fill="#66727F" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
<path id="Vector" d="M8.56543 0.25293C8.89355 -0.0839844 9.4248 -0.0839844 9.75293 0.25293C10.082 0.589844 10.082 1.13672 9.75293 1.47363L5.59375 5.74707C5.26562 6.08398 4.7334 6.08398 4.40527 5.74707C4.07715 5.41016 4.07715 4.86328 4.40527 4.52637L8.56543 0.25293Z" fill="#66727F" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,16 @@
|
||||
<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip1290_49924">
|
||||
<rect id="globe" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect id="globe" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<g clip-path="url(#clip1290_49924)">
|
||||
<path id="Vector" d="M12 22C6.47705 22 2 17.5225 2 12C2 6.47754 6.47705 2 12 2C17.5229 2 22 6.47754 22 12C22 17.5225 17.5229 22 12 22Z" stroke="#66727F" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||
<path id="Vector" d="M2 12L22 12" stroke="#66727F" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M16 12C15.9229 15.708 14.5015 19.2617 12 22C9.49854 19.2617 8.07715 15.708 8 12C8.07715 8.29199 9.49854 4.73828 12 2C14.5015 4.73828 15.9229 8.29199 16 12Z" stroke="#66727F" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,11 @@
|
||||
interface ILangs {
|
||||
id: number;
|
||||
language: string;
|
||||
index: string;
|
||||
}
|
||||
|
||||
export const LANGUAGES: ILangs[] = [
|
||||
{ id: 1, language: "Русский", index: "ru" },
|
||||
{ id: 2, language: "Кыргызча", index: "kg" },
|
||||
{ id: 3, language: "English", index: "en" },
|
||||
];
|
||||
@@ -0,0 +1,113 @@
|
||||
import { LINKS } from "@/shared/variables/links";
|
||||
// import NavAuth from "../NavAuth/NavAuth";
|
||||
import { Link, usePathname } from "@/shared/config/navigation";
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import chevron_down from "./icons/chevron_down.svg";
|
||||
import Image from "next/image";
|
||||
import logo from "@/shared/assets/logo.svg";
|
||||
import cross from "./icons/cross.svg";
|
||||
import NavAuth from "../NavAuth/NavAuth";
|
||||
|
||||
interface INavMenuProps {
|
||||
setOpenMenu: (boolean: boolean) => void;
|
||||
}
|
||||
|
||||
const NavMenu: React.FC<INavMenuProps> = ({ setOpenMenu }: INavMenuProps) => {
|
||||
const [openMenuLanguage, setOpenMenuLanguage] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const { locale } = useParams();
|
||||
|
||||
const [_, startTransition] = useTransition();
|
||||
const [currentLanguage, setCurrentLanguage] = useState<string>(
|
||||
locale as string
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const params = window.location.search || "";
|
||||
startTransition(() => {
|
||||
router.replace(`/${currentLanguage}${pathname}${params}`, {
|
||||
scroll: false,
|
||||
});
|
||||
});
|
||||
}, [currentLanguage]);
|
||||
|
||||
const langKeys: Record<string, string> = {
|
||||
ru: "Русский",
|
||||
kg: "Кыргызча",
|
||||
en: "English",
|
||||
};
|
||||
|
||||
const languages = [
|
||||
{ id: 1, language: "Русский", pathname: "ru" as const },
|
||||
{ id: 2, language: "Кыргызча", pathname: "kg" as const },
|
||||
{ id: 3, language: "English", pathname: "en" as const },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className="p-[48px] w-full h-full min-h-[600px] fixed left-0 flex flex-col gap-6 bg-white scroll inset-y-0 right-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link className="-m-1.5 p-1.5" href={"/"}>
|
||||
<Image src={logo} alt="Logo" className="h-8 w-auto" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setOpenMenu(false)}
|
||||
className="-m-2.5 rounded-md p-2.5 text-gray-700"
|
||||
>
|
||||
<Image src={cross} alt="cross" />
|
||||
</button>
|
||||
</div>
|
||||
{LINKS().map((link) => (
|
||||
<Link
|
||||
onClick={() => setOpenMenu(false)}
|
||||
className={`justify-start font-medium size-6${
|
||||
pathname === link.pathname ? "text-light-blue" : ""
|
||||
}`}
|
||||
href={`${pathname.slice(1, 3)}/${link.pathname}`}
|
||||
key={link.id}
|
||||
>
|
||||
{link.pagename}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<NavAuth setOpenMenu={setOpenMenu} responsible />
|
||||
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setOpenMenuLanguage((prev) => !prev)}
|
||||
className="mb-5 flex items-center gap-1 text-[#66727f]"
|
||||
>
|
||||
{langKeys[currentLanguage as string]}
|
||||
<Image
|
||||
className="w-[18px] h-[18px]"
|
||||
src={chevron_down}
|
||||
alt="Chevron Down"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{openMenuLanguage && (
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
{languages.map((lang) => (
|
||||
<Link
|
||||
onClick={() => setCurrentLanguage(lang.pathname)}
|
||||
className={`${
|
||||
currentLanguage === lang.pathname
|
||||
? "text-black font-bold"
|
||||
: "text-[#66727f]"
|
||||
}`}
|
||||
href="#"
|
||||
locale={lang.pathname}
|
||||
key={lang.id}
|
||||
>
|
||||
{lang.language}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavMenu;
|
||||
@@ -0,0 +1,11 @@
|
||||
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1252_38469)">
|
||||
<path d="M0.246139 1.47381C-0.0820464 1.13666 -0.0820464 0.590022 0.246139 0.252867C0.574324 -0.084289 1.10642 -0.084289 1.4346 0.252867L5.59423 4.52619C5.92241 4.86334 5.92241 5.40998 5.59423 5.74713C5.26604 6.08429 4.73395 6.08429 4.40576 5.74713L0.246139 1.47381Z" fill="#66727F"/>
|
||||
<path d="M8.56495 0.252867C8.89313 -0.0842888 9.42523 -0.0842889 9.75341 0.252867C10.0816 0.590023 10.0816 1.13666 9.75341 1.47382L5.59378 5.747C5.26559 6.08416 4.7335 6.08416 4.40531 5.747C4.07713 5.40985 4.07714 4.86334 4.40532 4.52619L8.56495 0.252867Z" fill="#66727F"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1252_38469">
|
||||
<rect width="10" height="6" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 807 B |
@@ -0,0 +1,15 @@
|
||||
<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip1256_72110">
|
||||
<rect id="x" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect id="x" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<g clip-path="url(#clip1256_72110)">
|
||||
<path id="Vector" d="M18 6L6 18" stroke="#32303A" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M6 6L18 18" stroke="#32303A" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 780 B |
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import Image, { StaticImageData } 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";
|
||||
import founded_ru from "./assets/founded-ru.png";
|
||||
import founded_en from "./assets/founded-en.png";
|
||||
import founded_kg from "./assets/founded-kg.png";
|
||||
import { useParams } from "next/navigation";
|
||||
import NavAuth from "./NavAuth/NavAuth";
|
||||
|
||||
const Navbar = () => {
|
||||
const pathname = usePathname();
|
||||
const [openMenu, setOpenMenu] = useState<boolean>(false);
|
||||
const { locale } = useParams();
|
||||
|
||||
const FOUNDED: Record<string, StaticImageData> = {
|
||||
ru: founded_ru,
|
||||
kg: founded_kg,
|
||||
en: founded_en,
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="bg-white">
|
||||
<nav className="mx-auto flex items-center justify-between py-6 lg:px-[90px] px-[90px] mm:px-[20px]">
|
||||
<div className="flex items-center gap-[10px]">
|
||||
<Link href="/">
|
||||
<Image src={logo} alt="Logo" className="navbar__logo-ti" />
|
||||
</Link>
|
||||
<Image
|
||||
className="mt-[30px] h-[120px] w-[120px] inline-block mr-[10px] object-cover"
|
||||
src={FOUNDED[locale as string]}
|
||||
alt="Founded by EU Image"
|
||||
/>
|
||||
<NavLanguage />
|
||||
</div>
|
||||
<nav className="hidden lg:flex lg:gap-x-6">
|
||||
{LINKS().map((link) => (
|
||||
<Link
|
||||
className={`text-black opacity-0.5 size-4 font-normal min-w-[150px] flex justify-center${
|
||||
pathname === link.pathname ? "opacity-1 font-extrabold" : ""
|
||||
}`}
|
||||
key={link.id}
|
||||
href={link.pathname}
|
||||
>
|
||||
{link.pagename}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<div className="hidden lg:flex items-center gap-6">
|
||||
<NavAuth setOpenMenu={setOpenMenu} />
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setOpenMenu((prev) => !prev)}
|
||||
className="hidden sm:flex"
|
||||
>
|
||||
<Image src={openMenu ? cross : menu} alt="menu icon" />
|
||||
</button>
|
||||
|
||||
{openMenu && <NavMenu setOpenMenu={setOpenMenu} />}
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip1256_72110">
|
||||
<rect id="x" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect id="x" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<g clip-path="url(#clip1256_72110)">
|
||||
<path id="Vector" d="M18 6L6 18" stroke="#32303A" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M6 6L18 18" stroke="#32303A" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 780 B |
@@ -0,0 +1,7 @@
|
||||
<svg width="20.000000" height="14.000000" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path id="Icon" d="M1 7L19 7M1 1L19 1M1 13L19 13" stroke="#344054" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 353 B |