Localize the dashboard (#1265)

website/src/components/Layout.tsx

@@ -37,17 +37,17 @@ export const getDashboardLayout = (page: React.ReactElement) => (
       <SideMenuLayout
         menuButtonOptions={[
           {
-            label: "Dashboard",
+            labelID: "dashboard",
             pathname: "/dashboard",
             icon: Layout,
           },
           {
-            label: "Messages",
+            labelID: "messages",
             pathname: "/messages",
             icon: MessageSquare,
           },
           {
-            label: "Leaderboard",
+            labelID: "leaderboard",
             pathname: "/leaderboard",
             icon: BarChart2,
           },
@@ -70,17 +70,17 @@ export const getAdminLayout = (page: React.ReactElement) => (
     <SideMenuLayout
       menuButtonOptions={[
         {
-          label: "Users",
+          labelID: "users",
           pathname: "/admin",
           icon: Users,
         },
         {
-          label: "Status",
+          labelID: "status",
           pathname: "/admin/status",
           icon: Activity,
         },
         {
-          label: "Parameters",
+          labelID: "parameters",
           pathname: "/admin/parameters",
           icon: Settings,
         },

website/src/components/SideMenu.tsx

@@ -1,11 +1,12 @@
-import { Button, Card, Text, Tooltip, useColorMode } from "@chakra-ui/react";
-import { useTranslation } from "next-i18next";
-import { LucideIcon, Sun } from "lucide-react";
+import { Button, Card, Text, Tooltip } from "@chakra-ui/react";
+import { LucideIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { getTypeSafei18nKey } from "src/lib/i18n";
 
 export interface MenuButtonOption {
-  label: string;
+  labelID: string;
   pathname: string;
   icon: LucideIcon;
 }
@@ -16,7 +17,6 @@ export interface SideMenuProps {
 
 export function SideMenu(props: SideMenuProps) {
   const router = useRouter();
-  const { colorMode, toggleColorMode } = useColorMode();
   const { t } = useTranslation(["side_menu", "common"]);
 
   return (
@@ -27,35 +27,38 @@ export function SideMenu(props: SideMenuProps) {
         className="grid-cols-3 gap-2 sm:flex-col sm:justify-between p-4 h-full"
       >
         <nav className="grid grid-cols-3 col-span-3 sm:flex sm:flex-col gap-2">
-          {props.buttonOptions.map((item, itemIndex) => (
-            <Tooltip
-              key={itemIndex}
-              fontFamily="inter"
-              label={item.label}
-              placement="right"
-              className="hidden lg:hidden sm:block"
-            >
-              <Link key={`${item.label}-${itemIndex}`} href={item.pathname} style={{ textDecoration: "none" }}>
-                <Button
-                  justifyContent={["center", "center", "center", "left"]}
-                  gap="3"
-                  size="lg"
-                  width="full"
-                  bg={router.pathname === item.pathname ? "blue.500" : null}
-                  _hover={router.pathname === item.pathname ? { bg: "blue.600" } : null}
-                >
-                  <item.icon size={"1em"} className={router.pathname === item.pathname ? "text-blue-200" : null} />
-                  <Text
-                    fontWeight="normal"
-                    color={router.pathname === item.pathname ? "white" : null}
-                    className="hidden lg:block"
+          {props.buttonOptions.map((item) => {
+            const label = t(getTypeSafei18nKey(item.labelID));
+            return (
+              <Tooltip
+                key={item.labelID}
+                fontFamily="inter"
+                label={label}
+                placement="right"
+                className="hidden lg:hidden sm:block"
+              >
+                <Link key={item.labelID} href={item.pathname} className="no-underline">
+                  <Button
+                    justifyContent={["center", "center", "center", "start"]}
+                    gap="3"
+                    size="lg"
+                    width="full"
+                    bg={router.pathname === item.pathname ? "blue.500" : null}
+                    _hover={router.pathname === item.pathname ? { bg: "blue.600" } : null}
                   >
-                    {item.label}
-                  </Text>
-                </Button>
-              </Link>
-            </Tooltip>
-          ))}
+                    <item.icon size={"1em"} className={router.pathname === item.pathname ? "text-blue-200" : null} />
+                    <Text
+                      fontWeight="normal"
+                      color={router.pathname === item.pathname ? "white" : null}
+                      className="hidden lg:block"
+                    >
+                      {label}
+                    </Text>
+                  </Button>
+                </Link>
+              </Tooltip>
+            );
+          })}
         </nav>
       </Card>
     </main>