chore(site): handle navigation bar on mobile remove unnecessary @mate…

…rial-ui/core (#769)

functions/package.json

@@ -23,7 +23,6 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
-    "@material-ui/core": "^4.11.0",
     "@sendgrid/mail": "^7.4.0",
     "@testing-library/cypress": "^7.0.3",
     "antd": "^4.14.0",

package.json

@@ -82,7 +82,6 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
-    "@material-ui/core": "^4.11.0",
     "@sendgrid/mail": "^7.4.0",
     "@testing-library/cypress": "^7.0.3",
     "antd": "^4.14.0",

src/__tests__/Navbar/Navbar.test.tsx

@@ -5,12 +5,13 @@ import Navbar from '../../pages/components/Navbar/Navbar';
 
 describe('Navbar', () => {
   it('renders the card', async () => {
-    const { findByTestId } = render(
+    const { findByText } = render(
       <TestContext>
         <Navbar to="/" />
       </TestContext>
     );
 
-    await findByTestId('sub-menu');
+    await findByText('IgboAPI');
+    await findByText('Try it Out');
   });
 });

src/__tests__/Navbar/NavigationMenu.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TestContext from '../components/TestContext';
+import NavigationMenu from '../../pages/components/Navbar/NavigationMenu';
+import { navigationLinks } from '../../shared/constants/navigationLinks';
+
+describe('NavigationMenu', () => {
+  it('renders the navigation menu', async () => {
+    const { findByText } = render(
+      <TestContext>
+        <NavigationMenu />
+      </TestContext>
+    );
+
+    await Promise.all(navigationLinks.map(async ({ label }) => await findByText(label)));
+  });
+});

src/__tests__/Navbar/NavigationOptions.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TestContext from '../components/TestContext';
+import NavigationOptions from '../../pages/components/Navbar/NavigationOptions';
+import { navigationLinks } from '../../shared/constants/navigationLinks';
+
+describe('NavigationOptions', () => {
+  it('renders the navigation options', async () => {
+    const { findByText } = render(
+      <TestContext>
+        <NavigationOptions />
+      </TestContext>
+    );
+
+    await Promise.all(navigationLinks.map(async ({ label }) => await findByText(label)));
+  });
+});

src/__tests__/components/TestContext.tsx

@@ -6,6 +6,20 @@ configure({ testIdAttribute: 'data-test' });
 jest.mock('i18next');
 jest.mock('next/router');
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 const TestContext = ({ children }: { children: ReactElement }) => children;
 
 export default TestContext;

src/pages/components/Demo/Demo.tsx

@@ -8,14 +8,16 @@ import { API_ROUTE, DICTIONARY_APP_URL } from '../../../siteConstants';
 import { Example, Word } from '../../../types';
 import { WordDialect } from '../../../types/word';
 
-const Demo = ({ searchWord, words }: { searchWord?: string; words: Word[] }) => {
+const Demo = ({ searchWord, words }: { searchWord?: string, words: Word[] }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [isSearchingWord, setIsSearchingWord] = useState(false);
   const [keyword, setKeyword] = useState(searchWord);
   const [queries, setQueries] = useState({});
-  const [initialQueries, setInitialQueries] = useState<{ examples?: Example[]; dialects?: WordDialect; word?: string }>(
-    {}
-  );
+  const [initialQueries, setInitialQueries] = useState<{
+    examples?: Example[],
+    dialects?: WordDialect,
+    word?: string,
+  }>({});
   const [productionUrl, setProductionUrl] = useState('');
   const responseBody = JSON.stringify(words, null, 4);
   useEffect(() => {
@@ -51,7 +53,8 @@ const Demo = ({ searchWord, words }: { searchWord?: string; words: Word[] }) =>
   };
 
   const constructRequestUrl = () => {
-    const appendQueries = constructQueryString() || queryString.stringify(omit(initialQueries, ['word']));
+    const appendQueries =
+      constructQueryString() || queryString.stringify(omit(initialQueries, ['word']));
     const requestUrl =
       `${productionUrl || API_ROUTE}/api/v1/words?keyword=${keyword || ''}` +
       `${keyword && appendQueries ? '&' : ''}` +
@@ -78,7 +81,12 @@ const Demo = ({ searchWord, words }: { searchWord?: string; words: Word[] }) =>
   return !isLoading ? (
     <Box className="flex flex-col items-center space-y-12">
       <Box className="flex flex-col items-center">
-        <Heading as="h2" id="try-it-out" className="text-4xl text-blue-500 font-bold" fontSize="6xl">
+        <Heading
+          as="h2"
+          id="try-it-out"
+          className="text-4xl text-blue-500 font-bold"
+          fontSize="6xl"
+        >
           Test Drive the API
         </Heading>
         <Text className="px-6 lg:px-0 text-center lg:text-left text-gray-500">
@@ -156,7 +164,7 @@ const Demo = ({ searchWord, words }: { searchWord?: string; words: Word[] }) =>
             </Text>
           </form>
         </Box>
-        <Box className="flex flex-col lg:w-auto">
+        <Box className="flex flex-col w-full lg:w-auto">
           <Heading
             as="h3"
             className="text-center lg:text-left self-center lg:mt-4
@@ -166,7 +174,7 @@ const Demo = ({ searchWord, words }: { searchWord?: string; words: Word[] }) =>
             Response
           </Heading>
           <JSONPretty
-            className="jsonPretty self-center lg:w-auto bg-gray-800 rounded-md p-2 overflow-auto"
+            className="jsonPretty self-center lg:w-auto bg-gray-800 rounded-md p-2 overflow-auto w-full"
             id="json-pretty"
             data={responseBody}
           />

src/pages/components/Navbar/Navbar.tsx

@@ -1,32 +1,26 @@
-import React, { useState } from 'react';
-import { Box, Button, Heading, Image, Link as ChakraLink } from '@chakra-ui/react';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import React from 'react';
+import { Box, Heading, Link as ChakraLink, Show } from '@chakra-ui/react';
 import { Link } from 'react-scroll';
-import SubMenu from './SubMenu';
+import NavigationMenu from './NavigationMenu';
+import NavigationOptions from './NavigationOptions';
 import TryItOut from '../TryItOut';
 
-const menuIcon = (
-  <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
-    <path d="M14 5l-6.5 7L1 5" stroke="currentColor" strokeLinecap="square" />
-  </svg>
-);
-
-const Navbar = ({ to = '/' }: { to?: string }) => {
-  const [isMenuVisible, setIsMenuVisible] = useState(false);
-  const matchesLargeScreenQuery = useMediaQuery('(min-width:1024px)');
-  return (
-    <Box
-      className={`flex fixed items-center justify-between w-10/12 p-2 px-4 
+const Navbar = ({ to = '/' }: { to?: string }) => (
+  <Box
+    className={`flex fixed items-center justify-between w-10/12 p-2 px-4 
       backdrop-blur-md select-none w-8/12`}
-      style={{ zIndex: 2 }}
-      borderColor="gray.300"
-      borderWidth="1px"
-      borderRadius="md"
-      mt="4">
+    style={{ zIndex: 2 }}
+    borderColor="gray.300"
+    borderWidth="1px"
+    borderRadius="md"
+    mt="4"
+  >
+    <Box className="flex flex-row items-center">
       <Heading
         as="h1"
         className="transition-element text-3xl font-extrabold hover:text-gray-700 text-gray-900"
-        pb="0">
+        pb="0"
+      >
         {to ? (
           <ChakraLink href={to}>
             <Heading fontSize="2xl" pb="0">
@@ -39,32 +33,21 @@ const Navbar = ({ to = '/' }: { to?: string }) => {
             to="homepage-container"
             smooth
             offset={-100}
-            duration={600}>
+            duration={600}
+          >
             Igbo API
           </Link>
         )}
       </Heading>
-      {!matchesLargeScreenQuery ? (
-        <Button
-          type="button"
-          backgroundColor="transparent"
-          _hover={{ backgroundColor: 'transparent' }}
-          _active={{ backgroundColor: 'transparent' }}
-          _focus={{ backgroundColor: 'transparent' }}
-          className={`transition-element mr-5 lg:mr-0 ${
-            isMenuVisible ? 'transform rotate-90' : ''
-          }`}
-          onClick={() => setIsMenuVisible(!isMenuVisible)}>
-          {menuIcon}
-        </Button>
-      ) : null}
-      <SubMenu
-        isVisible={matchesLargeScreenQuery || isMenuVisible}
-        onSelect={() => setIsMenuVisible(false)}
-      />
-      <TryItOut size="sm" borderRadius="full" />
+      <Show below="md">
+        <NavigationMenu />
+      </Show>
     </Box>
-  );
-};
+    <Show above="md">
+      <NavigationOptions />
+    </Show>
+    <TryItOut size="sm" borderRadius="full" />
+  </Box>
+);
 
 export default Navbar;

src/pages/components/Navbar/NavigationMenu.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Link from 'next/link';
+import { Menu, MenuButton, MenuList, MenuItem, IconButton } from '@chakra-ui/react';
+import { FiChevronDown } from 'react-icons/fi';
+import { navigationLinks } from '../../../shared/constants/navigationLinks';
+
+const NavigationMenu = () => (
+  <Menu>
+    <MenuButton
+      as={IconButton}
+      icon={<FiChevronDown />}
+      variant="ghost"
+      _hover={{ backgroundColor: 'transparent' }}
+      _focus={{ backgroundColor: 'transparent' }}
+      _active={{ backgroundColor: 'transparent' }}
+    />
+    <MenuList>
+      {navigationLinks.map(({ href, label }) => (
+        <MenuItem key={label}>
+          <Link href={href}>{label}</Link>
+        </MenuItem>
+      ))}
+    </MenuList>
+  </Menu>
+);
+
+export default NavigationMenu;

src/pages/components/Navbar/NavigationOptions.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { UnorderedList, ListItem, Link } from '@chakra-ui/react';
+import { navigationLinks } from '../../../shared/constants/navigationLinks';
+
+const NavigationOptions = () => (
+  <UnorderedList
+    className="w-full flex flex-row justify-center items-center space-x-3"
+    data-test="sub-menu"
+  >
+    x
+    {navigationLinks.map(({ href, label }) => (
+      <ListItem className="transition-element" key={label}>
+        <Link className="cursor-pointer font-normal" href={href} role="link" fontWeight="semibold">
+          {label}
+        </Link>
+      </ListItem>
+    ))}
+  </UnorderedList>
+);
+export default NavigationOptions;

src/pages/components/TryItOut/TryItOut.tsx

@@ -16,6 +16,7 @@ const TryItOut = ({ size, ...props }: ButtonProps) => {
       color="white"
       transitionDuration="200ms"
       size={size || 'lg'}
+      px="6"
       onClick={() => {
         router.push('/#try-it-out');
         window.scrollBy({ top: -100, behavior: 'smooth' });

src/shared/constants/navigationLinks.ts

@@ -0,0 +1,18 @@
+export const navigationLinks: { href: string, label: string }[] = [
+  {
+    href: '#features',
+    label: 'Features',
+  },
+  {
+    href: '/about',
+    label: 'About',
+  },
+  {
+    href: '/docs',
+    label: 'Docs',
+  },
+  {
+    href: '/signup',
+    label: 'Get an API Key',
+  },
+];