From 8913110750f80db0003586f55a71b495ade9f2e4 Mon Sep 17 00:00:00 2001
From: Kishan Takoordyal <kishan@kinesis.games>
Date: Thu, 4 Mar 2021 17:52:52 +0400
Subject: [PATCH] improvements + make header responsive

---
 src/App.js                               |  28 ++++-
 src/components/{Header.js => HeaderD.js} |  14 ++-
 src/components/HeaderM.js                | 147 +++++++++++++++++++++++
 tailwind.config.js                       |   1 +
 4 files changed, 181 insertions(+), 9 deletions(-)
 rename src/components/{Header.js => HeaderD.js} (93%)
 create mode 100644 src/components/HeaderM.js

diff --git a/src/App.js b/src/App.js
index 71e0b60..022d16a 100644
--- a/src/App.js
+++ b/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>
   );
 }
diff --git a/src/components/Header.js b/src/components/HeaderD.js
similarity index 93%
rename from src/components/Header.js
rename to src/components/HeaderD.js
index f6812e2..959b21d 100644
--- a/src/components/Header.js
+++ b/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}
diff --git a/src/components/HeaderM.js b/src/components/HeaderM.js
new file mode 100644
index 0000000..5d7c336
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 707ee50..0b5230e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -145,6 +145,7 @@ module.exports = {
       12: '3rem',
       16: '4rem',
       20: '5rem',
+      22: '5.5rem',
       24: '6rem',
       32: '8rem',
       36: '9rem',