Add navbar

This commit is contained in:
anime committed 2024-08-15 12:59:15 +06:00
1 parent 238a3ef8d0
commit 5bda172d1b
37 files changed
+790 -28

No files matched your search

+7
View File
@@ -0,0 +1,7 @@
"use client";
import { SessionProvider } from "next-auth/react";
export const Providers = ({ children }: { children: React.ReactNode }) => {
return <SessionProvider>{children}</SessionProvider>;
};
+12 -5
View File
@@ -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>
);
}
+1 -1
View File
@@ -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 (
+12
View File
@@ -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

File renamed without changes.
+14
View File
@@ -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");
+58
View File
@@ -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" },
];
+113
View File
@@ -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

+75
View File
@@ -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;
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

+15
View File
@@ -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

+7
View File
@@ -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

File renamed without changes.