improvements + make header responsive

src/App.js

@@ -1,11 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import Header from './components/Header';
+import useWindowSize from './useWindowSize';
+
+import HeaderD from './components/HeaderD';
+import HeaderM from './components/HeaderM';
 
 export default function App() {
+  const [currentLanguage, setCurrentLanguage] = useState('en');
+  const [showCookies, setShowCookies] = useState(true);
+
+  const { width } = useWindowSize();
+
   return (
     <div className="w-full overflow-x-hidden">
-      <Header />
+      {width > 660 ? (
+        <HeaderD
+          currentLanguage={currentLanguage}
+          setCurrentLanguage={setCurrentLanguage}
+          showCookies={showCookies}
+          setShowCookies={setShowCookies}
+        />
+      ) : (
+        <HeaderM
+          currentLanguage={currentLanguage}
+          setCurrentLanguage={setCurrentLanguage}
+          showCookies={showCookies}
+          setShowCookies={setShowCookies}
+        />
+      )}
     </div>
   );
 }

src/components/HeaderD.js

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import proximity_logo from '../assets/images/proximity_logo.svg';
 import backgroundVideo from '../assets/videos/video.mp4';
 
-export default function Header() {
-  const [currentLanguage, setCurrentLanguage] = useState('en');
-  const [showCookies, setShowCookies] = useState(true);
-
+export default function HeaderD({
+  currentLanguage,
+  setCurrentLanguage,
+  showCookies,
+  setShowCookies,
+}) {
   const headerLinkClasses =
     'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg';
 
@@ -91,7 +93,7 @@ export default function Header() {
       <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
         <div
           className={`w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent ${
-            !showCookies && 'mb-20'
+            showCookies ? 'mb-2' : 'mb-22'
           }`}
         />
         {showCookies && cookies}

src/components/HeaderM.js

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+
+import proximity_logo from '../assets/images/proximity_logo.svg';
+import backgroundVideo from '../assets/videos/video.mp4';
+
+export default function HeaderD({
+  currentLanguage,
+  setCurrentLanguage,
+  showCookies,
+  setShowCookies,
+}) {
+  const [showSidebar, setShowSidebar] = useState(false);
+
+  const headerLinkClasses =
+    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg w-full bg-gray-900 my-1 py-2 text-center opacity-75 rounded';
+
+  const sidebar = (
+    <div className="absolute z-30 w-5/6 h-full flex flex-col justify-start bg-gray-700 bg-opacity-75 pt-20 px-2">
+      <a className={headerLinkClasses} href="/">
+        About
+      </a>
+      <a className={headerLinkClasses} href="/">
+        Work
+      </a>
+      <a className={headerLinkClasses} href="/">
+        Latest
+      </a>
+      <a className={headerLinkClasses} href="/">
+        People & Careers
+      </a>
+      <a className={headerLinkClasses} href="/">
+        Contact
+      </a>
+    </div>
+  );
+
+  const cookies = (
+    <div className="w-full bg-indigo-1000 flex flex-col items-center justify-center py-4 px-2">
+      <div className="text-gray-100 font-avenirbook text-xs font-normal text-center">
+        This website uses cookies to improve your experience. We'll assume
+        you're ok with this, but you can opt out if you wish.
+      </div>
+
+      <div className="w-full px-2 flex justify-around items-center mt-4">
+        <button
+          className="flex items-center justify-center rounded px-6 py-1 text-sm font-bold bg-gray-100 text-indigo-1000 mx-4 hover:opacity-75 focus:opacity-75"
+          onClick={() => setShowCookies(false)}
+        >
+          Accept
+        </button>
+
+        <a
+          className="text-gray-200 border-b border-red-1000 hover:text-white focus:text-white text-sm"
+          href="/"
+        >
+          Read more
+        </a>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="h-screen w-full">
+      <div className="absolute z-20 h-12 w-full flex items-center justify-between mt-4 px-4">
+        <img
+          src={proximity_logo}
+          alt="Proximity Logo"
+          className="h-full object-scale-down"
+        />
+
+        <div className="w-2/5 h-full flex items-center justify-end">
+          {/* <a className={headerLinkClasses} href="/">
+            About
+          </a>
+          <a className={headerLinkClasses} href="/">
+            Work
+          </a>
+          <a className={headerLinkClasses} href="/">
+            Latest
+          </a>
+          <a className={headerLinkClasses} href="/">
+            People & Careers
+          </a>
+          <a className={headerLinkClasses} href="/">
+            Contact
+          </a> */}
+
+          <div className="border h-10 px-2 flex justify-between items-center">
+            <button
+              className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
+                currentLanguage === 'en' ? 'font-bold' : ''
+              }`}
+              onClick={() => setCurrentLanguage('en')}
+            >
+              EN
+            </button>
+            <button
+              className={`uppercase font-avenirbook text-lg text-gray-200 ml-1 ${
+                currentLanguage === 'fr' ? 'font-bold' : ''
+              }`}
+              onClick={() => setCurrentLanguage('fr')}
+            >
+              FR
+            </button>
+          </div>
+
+          <button
+            className={`ml-4 w-10 h-10 flex justify-center items-center ri-${
+              showSidebar ? 'close' : 'menu'
+            }-fill bg-${
+              showSidebar ? 'red' : 'blue'
+            }-500 opacity-75 text-lg font-bold text-gray-100 rounded-sm`}
+            onClick={() => setShowSidebar((current) => !current)}
+          />
+        </div>
+      </div>
+
+      <div className="absolute z-10 w-full h-full flex items-center justify-center">
+        <p className="w-5/6 font-avenirblack text-center text-4xl font-bold text-gray-200">
+          We make people
+          <br />
+          more valuable to brands
+        </p>
+      </div>
+
+      <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
+        <div
+          className={`w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent ${
+            showCookies ? 'mb-2' : 'mb-22'
+          }`}
+        />
+        {showCookies && cookies}
+      </div>
+
+      {showSidebar && sidebar}
+
+      <video
+        className="h-full w-full bg-gray-900 z-0 object-cover absolute"
+        autoPlay
+        loop
+        muted
+      >
+        <source src={backgroundVideo} type="video/mp4" />
+      </video>
+    </div>
+  );
+}

tailwind.config.js

@@ -145,6 +145,7 @@ module.exports = {
       12: '3rem',
       16: '4rem',
       20: '5rem',
+      22: '5.5rem',
       24: '6rem',
       32: '8rem',
       36: '9rem',