Start migration

site/components/common/Navbar/NavBarFiltersDrawer.tsx

@@ -0,0 +1,57 @@
+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';
+
+export default function NavBarFiltersDrawer(props: { 
+  onClose: () => void;
+  isOpen: boolean;
+}) {
+
+    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>
+      </>
+    )
+  }
+  
+  interface NavItem {
+    label: string;
+    subLabel?: string;
+    children?: Array<NavItem>;
+    href?: string;
+    enabled: boolean;
+  };

site/components/common/Navbar/NavBarFiltersItem.tsx

@@ -0,0 +1,83 @@
+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 NavBarFiltersItem = ({ label, children, href, enabled }: NavItem) => {
+    const { isOpen, onToggle } = useDisclosure();
+  
+    return (
+      <Stack spacing={4} onClick={children && onToggle}>
+        <Flex
+          py={2}
+          as={Link}
+          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 NavItem {
+    label: string;
+    subLabel?: string;
+    children?: Array<NavItem>;
+    href?: string;
+    enabled: boolean;
+  };
+
+  export default NavBarFiltersItem;

site/components/common/Navbar/Navbar.tsx

@@ -4,6 +4,8 @@ import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
+import { useDisclosure } from '@chakra-ui/react'
+import NavBarFiltersDrawer from './NavBarFiltersDrawer'
 
 interface Link {
   href: string
@@ -14,43 +16,54 @@ interface NavbarProps {
   links?: Link[]
 }
 
-const Navbar: FC<NavbarProps> = ({ links }) => (
-  <NavbarRoot>
-    <Container clean className="mx-auto max-w-8xl px-6">
-      <div className={s.nav}>
-        <div className="flex items-center flex-1">
-          <Link href="/">
-            <a className={s.logo} aria-label="Logo">
-              <Logo />
-            </a>
-          </Link>
-          <nav className={s.navMenu}>
-            <Link href="/search">
-              <a className={s.link}>All</a>
-            </Link>
-            {links?.map((l) => (
-              <Link href={l.href} key={l.href}>
-                <a className={s.link}>{l.label}</a>
+const Navbar: FC<NavbarProps> = ({ links }) => {
+
+  const { isOpen: isOpenDrawer, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure()
+
+  return (
+    <>
+      <NavBarFiltersDrawer onClose={onCloseDrawer} isOpen={isOpenDrawer} ></NavBarFiltersDrawer>
+      <NavbarRoot>
+        <Container clean className="mx-auto max-w-8xl px-6">
+          <div className={s.nav}>
+            <div className="flex items-center flex-1">
+              <Link href="/">
+                <a className={s.logo} aria-label="Logo">
+                  <Logo />
+                </a>
               </Link>
-            ))}
-          </nav>
-        </div>
-        {process.env.COMMERCE_SEARCH_ENABLED && (
-          <div className="justify-center flex-1 hidden lg:flex">
-            <Searchbar />
+              <nav className={s.navMenu}>
+                <Link href="/search">
+                  <a className={s.link}>All</a>
+                </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> 
+                    }
+                  </Link>
+                ))}
+              </nav>
+            </div>
+            {process.env.COMMERCE_SEARCH_ENABLED && (
+              <div className="justify-center flex-1 hidden lg:flex">
+                <Searchbar />
+              </div>
+            )}
+            <div className="flex items-center justify-end flex-1 space-x-8">
+              <UserNav />
+            </div>
           </div>
-        )}
-        <div className="flex items-center justify-end flex-1 space-x-8">
-          <UserNav />
-        </div>
-      </div>
-      {process.env.COMMERCE_SEARCH_ENABLED && (
-        <div className="flex pb-4 lg:px-6 lg:hidden">
-          <Searchbar id="mobile-search" />
-        </div>
-      )}
-    </Container>
-  </NavbarRoot>
-)
+          {process.env.COMMERCE_SEARCH_ENABLED && (
+            <div className="flex pb-4 lg:px-6 lg:hidden">
+              <Searchbar id="mobile-search" />
+            </div>
+          )}
+        </Container>
+      </NavbarRoot>
+    </>
+  )
+}
 
 export default Navbar