feat: add language switch

theodo · Apr 16, 2024 · e4c0e58 · e4c0e58
1 parent f4cbe24
commit e4c0e58
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 18 deletions.
diff --git a/next-i18next.config.js b/next-i18next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   i18n: {
-    defaultLocale: "fr", //default locale
+    defaultLocale: "en", //default locale
     locales: ["en", "fr"], // list of supported locales
   },
 };
diff --git a/next.config.js b/next.config.js
@@ -4,4 +4,13 @@ const { i18n } = require("./next-i18next.config");
 module.exports = {
   reactStrictMode: true,
   i18n,
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/home",
+        permanent: true,
+      },
+    ];
+  },
 };
diff --git a/src/components/ui/AppBar/Menu/Menu.tsx b/src/components/ui/AppBar/Menu/Menu.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 
+import LanguageSwitch from "src/components/ui/Buttons/LanguageSwitch";
 import { CartStoreItem, cartAtom } from "src/store/cart";
 import {
   ProductCategory,
@@ -30,7 +31,7 @@ const menuItems = [
 ];
 
 const Menu: React.FC = () => {
-  const { pathname } = useRouter();
+  const { pathname, locale } = useRouter();
   const [cart] = useAtom<CartStoreItem>(cartAtom);
 
   const cartItemsCount = () => {
@@ -48,14 +49,22 @@ const Menu: React.FC = () => {
         flex="1"
         sx={{ margin: "30px 25px" }}
         justifyContent="space-between"
+        gap={3}
       >
-        <Image
-          src={require("/public/icons/logo.svg")}
-          alt=""
-          role="presentation"
-          width={160}
-          height={55}
-        />
+        <Box display="flex" gap={5} alignItems="center">
+          <Link href={`/${locale}`} underline="none">
+            <Image
+              src={require("/public/icons/logo.svg")}
+              alt=""
+              role="presentation"
+              width={160}
+              height={55}
+            />
+          </Link>
+
+          <LanguageSwitch />
+        </Box>
+
         <Box display="flex" gap={5}>
           {menuItems.map(({ text, link, icon }) => (
             <Link

diff --git a/src/components/ui/Buttons/LanguageSwitch.tsx b/src/components/ui/Buttons/LanguageSwitch.tsx
@@ -0,0 +1,41 @@
+import { Box, Divider, Link } from "@mui/material";
+import { useRouter } from "next/router";
+
+const LanguageSwitch: React.FC = () => {
+  const router = useRouter();
+  const { pathname, locale } = router;
+
+  return (
+    <Box display="flex" gap={1} height="fit-content" width="fit-content">
+      <Link
+        component="button"
+        underline="none"
+        onClick={() => {
+          router.replace(pathname, pathname, { locale: "en" });
+        }}
+        aria-label="Switch to English"
+        padding="0"
+        sx={{ color: "primary.main" }}
+        style={{ padding: "0", margin: "0" }}
+        fontWeight={locale === "en" ? "bold" : "normal"}
+      >
+        EN
+      </Link>
+      <Divider orientation="vertical" variant="middle" flexItem />
+      <Link
+        component="button"
+        underline="none"
+        onClick={() => {
+          router.replace(pathname, pathname, { locale: "fr" });
+        }}
+        aria-label="Switch to French"
+        sx={{ color: "primary.main" }}
+        fontWeight={locale === "fr" ? "bold" : "normal"}
+      >
+        FR
+      </Link>
+    </Box>
+  );
+};
+
+export default LanguageSwitch;
diff --git a/src/components/ui/PageTextTemplate/PageTextTemplate.tsx b/src/components/ui/PageTextTemplate/PageTextTemplate.tsx
@@ -1,6 +1,8 @@
 import { Container } from "@mui/material";
 import Image from "next/image";
 
+import LanguageSwitch from "src/components/ui/Buttons/LanguageSwitch";
+
 export interface IPageTextTemplate {
   content: JSX.Element;
 }
@@ -35,14 +37,24 @@ const PageTextTemplate: React.FC<IPageTextTemplate> = ({ content }) => {
           margin: "30px 0",
         }}
       >
-        <Image
-          src={require("/public/icons/logo.svg")}
-          alt=""
-          role="presentation"
-          width={160}
-          height={40}
-          style={{ justifySelf: "top" }}
-        />
+        <Container
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            rowGap: "1em",
+            alignItems: "center",
+          }}
+        >
+          <Image
+            src={require("/public/icons/logo.svg")}
+            alt=""
+            role="presentation"
+            width={160}
+            height={40}
+            style={{ justifySelf: "top" }}
+          />
+          <LanguageSwitch />
+        </Container>
         <Container
           sx={{ height: "100%", display: "flex", justifyContent: "center" }}
         >

diff --git a/src/pages/index.tsx → src/pages/home.tsx b/src/pages/index.tsx → src/pages/home.tsx
@@ -76,7 +76,7 @@ const Home: NextPage = () => {
           />
           <ObjectiveCard />
         </Stack>
-        <AppLink text={t("intro-page.start")} link="/fruits" />
+        <AppLink text={t("intro-page.start")} link="fruits" />
       </Stack>
     </Container>
   );