diff --git a/src/shared/config/navigation.ts b/src/shared/config/navigation.ts index 8c51d5c..fa72bff 100644 --- a/src/shared/config/navigation.ts +++ b/src/shared/config/navigation.ts @@ -1,7 +1,7 @@ import { createSharedPathnamesNavigation } from "next-intl/navigation"; export const locales = ["en", "ru", "kg"] as const; -export const localePrefix = "always"; // Default +export const localePrefix = "always"; export const { Link, redirect, usePathname, useRouter } = createSharedPathnamesNavigation({ locales, localePrefix }); diff --git a/src/widgets/Navbar/NavMenu/NavMenu.scss b/src/widgets/Navbar/NavMenu/NavMenu.scss index 0ea1bf5..6eff243 100644 --- a/src/widgets/Navbar/NavMenu/NavMenu.scss +++ b/src/widgets/Navbar/NavMenu/NavMenu.scss @@ -4,7 +4,7 @@ padding: 48px 30px 30px 30px; width: 100%; height: 100vh; - min-height: 500px; + min-height: 600px; position: fixed; top: 72px; left: 0; @@ -12,8 +12,10 @@ flex-direction: column; gap: 26px; background-color: white; + overflow: scroll; - a { + a, + button { justify-content: flex-start; font-size: 24px; font-weight: 500; @@ -22,4 +24,31 @@ &__link_active { color: $light-blue; } + + &__language { + button { + margin-bottom: 20px; + display: flex; + align-items: center; + gap: 4px; + color: #66727f; + img { + width: 18px; + height: 18px; + } + } + &-wrapper { + display: flex; + flex-direction: column; + gap: 10px; + a { + color: #66727f; + } + } + + &_active { + color: black !important; + font-weight: 700 !important; + } + } } diff --git a/src/widgets/Navbar/NavMenu/NavMenu.tsx b/src/widgets/Navbar/NavMenu/NavMenu.tsx index ad8766b..3dd4fda 100644 --- a/src/widgets/Navbar/NavMenu/NavMenu.tsx +++ b/src/widgets/Navbar/NavMenu/NavMenu.tsx @@ -2,6 +2,10 @@ import { LINKS } from "@/shared/variables/links"; import "./NavMenu.scss"; 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"; interface INavMenuProps { setOpenMenu: (boolean: boolean) => void; @@ -10,7 +14,37 @@ interface INavMenuProps { const NavMenu: React.FC = ({ setOpenMenu, }: INavMenuProps) => { + const [openMenuLanguage, setOpenMenuLanguage] = + useState(false); + const router = useRouter(); const pathname = usePathname(); + const { locale } = useParams(); + + const [_, startTransition] = useTransition(); + const [currentLanguage, setCurrentLanguage] = useState( + locale as string + ); + + useEffect(() => { + const params = window.location.search || ""; + startTransition(() => { + router.replace(`/${currentLanguage}${pathname}${params}`, { + scroll: false, + }); + }); + }, [currentLanguage]); + + const langKeys: Record = { + 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 ( ); }; diff --git a/src/widgets/Navbar/NavMenu/icons/chevron_down.svg b/src/widgets/Navbar/NavMenu/icons/chevron_down.svg new file mode 100644 index 0000000..3ebba56 --- /dev/null +++ b/src/widgets/Navbar/NavMenu/icons/chevron_down.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +