diff --git a/components/elements/LanguageSwitcher.js b/components/elements/LanguageSwitcher.js new file mode 100644 index 0000000..092b2a1 --- /dev/null +++ b/components/elements/LanguageSwitcher.js @@ -0,0 +1,38 @@ +import { useRouter } from "next/router" +import { useTranslations } from "next-intl" + +const LOCALES = [ + { code: "en", label: "EN" }, + { code: "fr", label: "FR" }, + { code: "es", label: "ES" }, +] + +export default function LanguageSwitcher() { + const router = useRouter() + const t = useTranslations("Navigation") + + const switchLocale = (locale) => { + router.push(router.asPath, router.asPath, { locale }) + } + + return ( +
  • + + {t("language")} + + +
  • + ) +} diff --git a/components/layout/Menu.js b/components/layout/Menu.js index 5bafd33..343a362 100644 --- a/components/layout/Menu.js +++ b/components/layout/Menu.js @@ -1,63 +1,55 @@ import Link from "next/link"; -import { useRouter } from "next/router"; +import { useTranslations } from "next-intl"; +import LanguageSwitcher from "../elements/LanguageSwitcher"; export default function Menu() { - const router = useRouter(); - + const t = useTranslations("Navigation"); return ( <> ); diff --git a/components/layout/MobileMenu.js b/components/layout/MobileMenu.js index 33970c3..4cf6d5a 100644 --- a/components/layout/MobileMenu.js +++ b/components/layout/MobileMenu.js @@ -1,80 +1,63 @@ import Link from "next/link"; import { useState } from "react"; +import { useTranslations } from "next-intl"; + export default function MobileMenu() { - const [isActive, setIsActive] = useState({ - status: false, - key: "", - }); + const t = useTranslations("Navigation"); + const [isActive, setIsActive] = useState({ status: false, key: "" }); const handleToggle = (key) => { if (isActive.key === key) { - setIsActive({ - status: false, - }); + setIsActive({ status: false }); } else { - setIsActive({ - status: true, - key, - }); + setIsActive({ status: true, key }); } }; + return ( <>