feat: add divlo.fr

components/Header/index.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react'
+
+import { HamburgerIcon } from './HamburgerIcon'
+import { BrandLogo } from './BrandLogo'
+import { Navigation } from './Navigation'
+
+export const Header: React.FC = () => {
+  const [isActive, setIsActive] = useState(false)
+
+  const handleToggleNavbar = (): void => {
+    setIsActive(!isActive)
+  }
+
+  return (
+    <>
+      <header className='Header'>
+        <div className='container'>
+          <BrandLogo />
+          <HamburgerIcon
+            isActive={isActive}
+            handleToggleNavbar={handleToggleNavbar}
+          />
+          <Navigation isActive={isActive} />
+        </div>
+      </header>
+
+      <style jsx>
+        {`
+          .Header {
+            position: fixed;
+            width: 100%;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 100;
+
+            display: flex;
+            flex-flow: row wrap;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0.5rem 1rem;
+
+            border-bottom: var(--border-header-footer);
+            background-color: var(--color-background);
+          }
+          @media (min-width: 992px) {
+            .Header {
+              display: flex;
+              flex-basis: auto;
+              flex-flow: row nowrap;
+              justify-content: flex-start;
+            }
+          }
+          .Header > .container {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
+          }
+          @media (min-width: 992px) {
+            .Header > .container {
+              flex-wrap: nowrap;
+            }
+          }
+        `}
+      </style>
+    </>
+  )
+}