Almost finished translations

site/components/common/Navbar/NavBarFiltersDrawer.tsx

@@ -1,57 +1,76 @@
-import { Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody, Link, Box, Stack, Heading, Divider } from "@chakra-ui/react"
-import React, { useEffect, useState } from "react"
-import filtersData from '../../../static_data/navBarMenuData.json';
-import NavBarFiltersItem from './NavBarFiltersItem';
+import {
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  Link,
+  Box,
+  Stack,
+  Heading,
+  Divider,
+} from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
+import filtersData from '../../../static_data/navBarMenuData.json'
+import NavBarFiltersItem from './NavBarFiltersItem'
 
-export default function NavBarFiltersDrawer(props: { 
-  onClose: () => void;
-  isOpen: boolean;
+export default function NavBarFiltersDrawer(props: {
+  onClose: () => void
+  isOpen: boolean
 }) {
+  const { locale = 'it' } = useRouter()
 
-    const [placement, setPlacement] = React.useState('left' as const)
-    const [regions, setRegions] = React.useState<NavItem[]>([]);
-    const [categories, setCategories] = React.useState<NavItem[]>([]);
+  const [placement, setPlacement] = React.useState('left' as const)
+  const [regions, setRegions] = React.useState<NavItem[]>([])
+  const [categories, setCategories] = React.useState<NavItem[]>([])
 
-    useEffect(() => {
-      setRegions(filtersData.regions);
-      setCategories(filtersData.categories);
-    }, []);
-
-    return (
-      <>
-        <Drawer placement={placement} onClose={props.onClose} isOpen={props.isOpen}>
-          <DrawerOverlay />
-          <DrawerContent>
-            <DrawerBody>
-              <Stack mt={5} direction={"column"} spacing={"20"}>
-                <Box>
-                  <Heading size={"lg"} mb={5}>Regions</Heading>
-                  {
-                    regions.map(region => (
-                      <NavBarFiltersItem key={region.label} {...region} />
-                    ))
-                  }
-                </Box>
-                <Box>
-                  <Heading mb={5} size={"lg"}>Categories</Heading>
-                  {
-                    categories.map(category => (
-                      <NavBarFiltersItem key={category.label} {...category} />
-                    ))
-                  }
-                </Box>
-              </Stack>
-            </DrawerBody>
-          </DrawerContent>
-      </Drawer>
-      </>
+  useEffect(() => {
+    setRegions(filtersData.regions)
+    setCategories(
+      filtersData.categories[locale as keyof typeof filtersData.categories]
     )
-  }
-  
-  interface NavItem {
-    label: string;
-    subLabel?: string;
-    children?: Array<NavItem>;
-    href?: string;
-    enabled: boolean;
-  };
+  }, [])
+
+  return (
+    <>
+      <Drawer
+        placement={placement}
+        onClose={props.onClose}
+        isOpen={props.isOpen}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerBody>
+            <Stack mt={5} direction={'column'} spacing={'20'}>
+              <Box>
+                <Heading size={'lg'} mb={5}>
+                  {locale === 'it' ? 'Regioni' : 'Regions'}
+                </Heading>
+                {regions.map((region) => (
+                  <NavBarFiltersItem key={region.label} {...region} />
+                ))}
+              </Box>
+              <Box>
+                <Heading mb={5} size={'lg'}>
+                  {locale === 'it' ? 'Categorie' : 'Categories'}
+                </Heading>
+                {categories.map((category) => (
+                  <NavBarFiltersItem key={category.label} {...category} />
+                ))}
+              </Box>
+            </Stack>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  )
+}
+
+interface NavItem {
+  label: string
+  subLabel?: string
+  children?: Array<NavItem>
+  href?: string
+  enabled: boolean
+}

site/components/common/Navbar/Navbar.tsx

@@ -17,12 +17,18 @@ interface NavbarProps {
 }
 
 const Navbar: FC<NavbarProps> = ({ links }) => {
-
-  const { isOpen: isOpenDrawer, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure()
+  const {
+    isOpen: isOpenDrawer,
+    onOpen: onOpenDrawer,
+    onClose: onCloseDrawer,
+  } = useDisclosure()
 
   return (
     <>
-      <NavBarFiltersDrawer onClose={onCloseDrawer} isOpen={isOpenDrawer} ></NavBarFiltersDrawer>
+      <NavBarFiltersDrawer
+        onClose={onCloseDrawer}
+        isOpen={isOpenDrawer}
+      ></NavBarFiltersDrawer>
       <NavbarRoot>
         <Container clean className="mx-auto max-w-8xl px-6">
           <div className={s.nav}>
@@ -38,10 +44,13 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
                 </Link>
                 {links?.map((l) => (
                   <Link href={l.href} key={l.href}>
-                    {
-                      l.label === 'Regions' ? (<a onClick={onOpenDrawer} className={s.link}>{l.label}</a>)
-                        : <a className={s.link}>{l.label}</a> 
-                    }
+                    {l.label === 'Regions' || l.label === 'Regioni' ? (
+                      <a onClick={onOpenDrawer} className={s.link}>
+                        {l.label}
+                      </a>
+                    ) : (
+                      <a className={s.link}>{l.label}</a>
+                    )}
                   </Link>
                 ))}
               </nav>