feat: add divlo.fr

components/Header/Navigation/NavigationLink.tsx

@@ -0,0 +1,54 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import classNames from 'classnames'
+
+type NavigationLinkComponent = React.FC<{ path: string }>
+
+export const NavigationLink: NavigationLinkComponent = props => {
+  const { pathname } = useRouter()
+  const isCurrentPage = pathname === props.path
+
+  return (
+    <>
+      <li className='navbar-item'>
+        <Link href={props.path}>
+          <a
+            className={classNames('navbar-link', {
+              'navbar-link-active': isCurrentPage
+            })}
+          >
+            {props.children}
+          </a>
+        </Link>
+      </li>
+
+      <style jsx>
+        {`
+          .navbar-link {
+            display: block;
+            padding: 0.5rem 1rem;
+          }
+          .navbar-link:hover {
+            text-decoration: none;
+            color: rgba(255, 255, 255, 0.75);
+          }
+          .navbar-link,
+          .navbar-link-active {
+            color: rgba(255, 255, 255, 0.5);
+          }
+          .navbar-link-active,
+          .navbar-link-active:hover {
+            color: var(--text-color);
+          }
+          .navbar-item {
+            list-style: none;
+          }
+          .navbar-link {
+            font-size: 16px;
+            padding: 0.5rem;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Header/Navigation/index.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames'
+import useTranslation from 'next-translate/useTranslation'
+
+import { NavigationLink } from './NavigationLink'
+
+type NavigationComponent = React.FC<{ isActive: boolean }>
+
+export const Navigation: NavigationComponent = props => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <nav className='Header__navbar'>
+        <ul
+          className={classNames('navbar__list', {
+            'navbar__list-active': props.isActive
+          })}
+        >
+          <NavigationLink path='/'>{t('common:home')}</NavigationLink>
+          <NavigationLink path='/setup'>Setup</NavigationLink>
+        </ul>
+      </nav>
+
+      <style jsx>
+        {`
+          @media (min-width: 992px) {
+            .Header__navbar {
+              display: flex;
+              flex-basis: auto;
+            }
+          }
+          .Header__navbar {
+            flex-basis: 100%;
+            flex-grow: 1;
+            align-items: center;
+          }
+          .navbar__list {
+            display: flex;
+            flex-direction: row;
+            margin-left: auto;
+          }
+          .navbar__list.navbar__list-active {
+            margin: 0 !important;
+            display: flex;
+          }
+          @media (max-width: 992px) {
+            .navbar__list {
+              display: none;
+              flex-direction: column;
+              align-items: center;
+              padding-left: 0;
+              list-style: none;
+            }
+          }
+        `}
+      </style>
+    </>
+  )
+}