Add categories into all products page and complete translation of that page

site/components/common/Category/CategoryListItem.tsx

@@ -0,0 +1,84 @@
+import {
+    Box,
+    Flex,
+    Text,
+    IconButton,
+    Button,
+    Stack,
+    Collapse,
+    Icon,
+    Link,
+    Popover,
+    PopoverTrigger,
+    PopoverContent,
+    useColorModeValue,
+    useBreakpointValue,
+    useDisclosure,
+  } from '@chakra-ui/react';
+  import {
+    HamburgerIcon,
+    CloseIcon,
+    ChevronDownIcon,
+    ChevronRightIcon,
+  } from '@chakra-ui/icons';
+  
+  const CategoryListItem = ({ label, children, href, enabled }: CategoryItem) => {
+    const { isOpen, onToggle } = useDisclosure();
+  
+    return (
+      <Stack spacing={4} onClick={children && onToggle} className={"block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8"}>
+        <Flex
+          py={2}
+          as={Link}
+          className={"block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4"}
+          href={enabled ? href : '#'}
+          justify={'space-between'}
+          align={'center'}
+          _hover={{
+            textDecoration: 'none',
+          }}>
+          <Text
+            fontWeight={600}
+            color={useColorModeValue('gray.600', 'gray.200')}>
+            {label}
+          </Text>
+          {children && (
+            <Icon
+              as={ChevronDownIcon}
+              transition={'all .25s ease-in-out'}
+              transform={isOpen ? 'rotate(180deg)' : ''}
+              w={6}
+              h={6}
+            />
+          )}
+        </Flex>
+  
+        <Collapse in={isOpen} animateOpacity style={{ marginTop: '0!important' }}>
+          <Stack
+            mt={2}
+            pl={4}
+            borderLeft={1}
+            borderStyle={'solid'}
+            borderColor={useColorModeValue('gray.200', 'gray.700')}
+            align={'start'}>
+            {children &&
+              children.map((child) => (
+                <Link key={child.label} py={2} href={enabled ? child.href : '#'}>
+                  {child.label}
+                </Link>
+              ))}
+          </Stack>
+        </Collapse>
+      </Stack>
+    );
+  };
+
+  interface CategoryItem {
+    label: string;
+    subLabel?: string;
+    children?: Array<CategoryItem>;
+    href?: string;
+    enabled: boolean;
+  };
+
+  export default CategoryListItem;

site/components/common/Navbar/Navbar.tsx

@@ -18,20 +18,11 @@ interface NavbarProps {
 }
 
 const Navbar: FC<NavbarProps> = ({ links }) => {
-  const {
-    isOpen: isOpenDrawer,
-    onOpen: onOpenDrawer,
-    onClose: onCloseDrawer,
-  } = useDisclosure()
 
   const { locale, pathname } = useRouter()
 
   return (
     <>
-      <NavBarFiltersDrawer
-        onClose={onCloseDrawer}
-        isOpen={isOpenDrawer}
-      ></NavBarFiltersDrawer>
       <NavbarRoot>
         <Container clean className="mx-auto max-w-8xl px-6">
           <div className={s.nav}>
@@ -49,13 +40,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
                 </Link>
                 {links?.map((l) => (
                   <Link href={l.href} key={l.href}>
-                    {l.label === 'Categories' || l.label === 'Categorie' ? (
-                      <a onClick={onOpenDrawer} className={s.link}>
-                        {l.label}
-                      </a>
-                    ) : (
-                      <a className={s.link}>{l.label}</a>
-                    )}
+                    <a className={s.link}>{l.label}</a>
                   </Link>
                 ))}
               </nav>