Adding Mobile NavBar (#8)

* add header mobile

* fix test

Author: rpmolina

.nvmrc

@@ -0,0 +1 @@
+16.13.2

package-lock.json

@@ -60,6 +60,7 @@
   "dependencies": {
     "axios": "^0.27.2",
     "classnames": "^2.3.1",
+    "hamburger-react": "^2.5.0",
     "i18next": "^21.8.9",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-http-backend": "^1.4.1",

package.json

@@ -0,0 +1,42 @@
+import React, { FC } from 'react';
+import { NavContainer, Brand, NavList, NavItem } from './styles';
+import { useTranslation } from 'react-i18next';
+import { Link, NavLink } from 'react-router-dom';
+import { Routes } from 'routes/Routes';
+import Button from 'components/Button';
+import Sparkles from 'components/Sparkles';
+import NanBrand from 'components/NanBrand';
+import type { NavLinkProp } from 'components/Header/domain/links';
+
+type DesktopNavProps = {
+  links: NavLinkProp[];
+};
+
+const DesktopNav: FC<DesktopNavProps> = ({ links }) => {
+  const { t } = useTranslation(['config', 'translations']);
+  return (
+    <NavContainer className="desktop-nav">
+      <Link to={Routes.ROOT}>
+        <Brand>
+          <NanBrand />
+        </Brand>
+      </Link>
+
+      <NavList>
+        {links.map((link) => (
+          <NavItem key={link.to}>
+            <NavLink to={link.to}>{link.title(t)}</NavLink>
+          </NavItem>
+        ))}
+      </NavList>
+
+      <Sparkles colors={['#FFC700', '#22d0b6', '#22d0b6', '#80a6e9', '#f280b9', '#e35da0', '#0cea86']}>
+        <NavLink to={Routes.POWERED}>
+          <Button>Powered</Button>
+        </NavLink>
+      </Sparkles>
+    </NavContainer>
+  );
+};
+
+export default DesktopNav;

src/components/Header/Desktop/Desktop.tsx

@@ -0,0 +1 @@
+export { default } from './Desktop';

src/components/Header/Desktop/index.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const NavContainer = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1240px;
+  padding: 0 20px;
+`;
+
+export const Brand = styled.div`
+  padding-right: 20px;
+`;
+
+export const NavList = styled.ul`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 40px;
+`;
+
+export const NavItem = styled.li`
+  font-size: 20px;
+  font-weight: normal;
+  margin: 0 14px;
+  cursor: pointer;
+  list-style: none;
+
+  a {
+    text-decoration: none;
+    color: black;
+  }
+`;

src/components/Header/Desktop/styles.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { render, screen } from 'utils/test/test-utils';
-import Header from './Header';
+import Header from './Desktop';
+import { links } from './domain/links';
 
 test('testing i18n in Header', async () => {
-  render(<Header />);
+  render(<Header links={links} />);
   expect(screen.getByText('Router example')).toBeTruthy();
 });

src/components/Header/Header.test.tsx

@@ -1,42 +1,18 @@
 import React, { FC } from 'react';
-import { FixedContainer, Nav, NavContainer, Brand, NavList, NavItem } from './styles';
-import { useTranslation } from 'react-i18next';
+import { FixedContainer, Nav } from './styles';
 import useScroll from 'hooks/useScroll';
-import { Link, NavLink } from 'react-router-dom';
-import { Routes } from 'routes/Routes';
-import Button from 'components/Button';
-import Sparkles from 'components/Sparkles';
-import NanBrand from 'components/NanBrand';
+import Desktop from './Desktop';
+import Mobile from './Mobile';
+import { links } from './domain/links';
 
 const Header: FC = () => {
-  const { t } = useTranslation(['config', 'translations']);
   const isFixed = useScroll(50);
 
   return (
     <FixedContainer>
       <Nav condensed={isFixed}>
-        <NavContainer>
-          <Link to={Routes.ROOT}>
-            <Brand>
-              <NanBrand />
-            </Brand>
-          </Link>
-
-          <NavList>
-            <NavItem>
-              <NavLink to={Routes.LINKS_EXAMPLES}>{t('header.routerLinkExample', { ns: 'translations' })}</NavLink>
-            </NavItem>
-            <NavItem>
-              <NavLink to={Routes.API_EXAMPLES}>{t('header.integrations', { ns: 'translations' })}</NavLink>
-            </NavItem>
-          </NavList>
-
-          <Sparkles colors={['#FFC700', '#22d0b6', '#22d0b6', '#80a6e9', '#f280b9', '#e35da0', '#0cea86']}>
-            <NavLink to={Routes.POWERED}>
-              <Button>Powered</Button>
-            </NavLink>
-          </Sparkles>
-        </NavContainer>
+        <Desktop links={links} />
+        <Mobile links={links} />
       </Nav>
     </FixedContainer>
   );

src/components/Header/Header.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+import { NavContainer, Brand, MobileContainer, NavList, NavItem, HiddenMenuInput, LabelMenu } from './styles';
+import { useTranslation } from 'react-i18next';
+import { Link, NavLink } from 'react-router-dom';
+import { Routes } from 'routes/Routes';
+import NanBrand from 'components/NanBrand';
+import type { NavLinkProp } from 'components/Header/domain/links';
+import { Divide as Hamburger } from 'hamburger-react';
+
+type MobileNavProps = {
+  links: NavLinkProp[];
+};
+
+const MobileNav: FC<MobileNavProps> = ({ links }) => {
+  const { t } = useTranslation(['config', 'translations']);
+
+  return (
+    <NavContainer className="mobile-nav">
+      <Link style={{ zIndex: 1001 }} to={Routes.ROOT}>
+        <Brand>
+          <NanBrand />
+        </Brand>
+      </Link>
+
+      <HiddenMenuInput className="side-menu" id="side-menu" />
+      <LabelMenu htmlFor="side-menu">
+        <Hamburger />
+      </LabelMenu>
+
+      <MobileContainer>
+        <NavList>
+          {links.map((link) => (
+            <NavItem key={link.to}>
+              <NavLink to={link.to}>{link.title(t)}</NavLink>
+            </NavItem>
+          ))}
+        </NavList>
+      </MobileContainer>
+    </NavContainer>
+  );
+};
+
+export default MobileNav;

src/components/Header/Mobile/Mobile.tsx

@@ -0,0 +1 @@
+export { default } from './Mobile';