[#3929] Add Header

akvo · Sep 26, 2022 · acef984 · acef984
1 parent 6be2451
commit acef984
Show file tree

Hide file tree

Showing 2 changed files with 357 additions and 0 deletions.
diff --git a/landing/src/components/header/index.js b/landing/src/components/header/index.js
@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from "react";
+import "./index.scss";
+import { Link, useHistory } from "react-router-dom";
+import { ReactComponent as DownArrow } from "../../images/down-arrow.svg";
+
+import Button from "../reusable/button";
+import Dropdown from "../reusable/dropdown";
+
+const DISABLE_SCROLLING_CLASS = "disabled-scroll";
+
+const Header = () => {
+  const history = useHistory();
+  const [selected, setSelected] = useState(null);
+  const [isShownMenu, setIsShownMenu] = useState(false);
+  const { innerWidth } = window;
+  const body = document.querySelector("body");
+  const languages = [
+    { id: 1, value: "En", label: "En" },
+    { id: 2, value: "Fr", label: "Fr" },
+    { id: 3, value: "Es", label: "Es" },
+  ];
+
+  useEffect(() => {
+    if (isShownMenu && innerWidth < 601) {
+      body.classList.add(DISABLE_SCROLLING_CLASS);
+    } else {
+      body.classList.remove(DISABLE_SCROLLING_CLASS);
+    }
+  }, [isShownMenu]);
+
+  return (
+    <div className="header-wrapper">
+      <header className="header">
+        <h1 className="flow-logo">
+          <Link to="/">Akvoflow</Link>
+        </h1>
+        <nav className="navigation">
+          <ul className="navigation-list">
+            <li className="list-item">
+              <Link
+                to="/key-features"
+                onClick={() => setSelected("/key-features")}
+                className={"/key-features" === selected ? `selected` : ""}
+              >
+                Key features
+              </Link>
+            </li>
+            <li className="list-item">
+              <Link
+                to="/pricing"
+                onClick={() => setSelected("/pricing")}
+                className={"/pricing" === selected ? `selected` : ""}
+              >
+                Pricing
+              </Link>
+            </li>
+            <li className="list-item">
+              <Link
+                to="/contact"
+                onClick={() => setSelected("/contact")}
+                className={"/contact" === selected ? `selected` : ""}
+              >
+                Contact
+              </Link>
+            </li>
+          </ul>
+          <div className="extra-navigation">
+            <Dropdown
+              selectData={languages}
+              Icon={DownArrow}
+              className="nav-item language-select"
+            />
+            <a
+              href="http://akvoflowsandbox.appspot.com/"
+              className="nav-item login"
+            >
+              Log in
+            </a>
+            <Button type="outlined" text="Free trial" linkTo="/signup" />
+          </div>
+        </nav>
+        <button
+          className={
+            isShownMenu
+              ? `toggle-menu-button closed-menu`
+              : `toggle-menu-button opened-menu`
+          }
+          onClick={() => setIsShownMenu(!isShownMenu)}
+        >
+          {isShownMenu ? "close" : "open"}
+        </button>
+      </header>
+      <div
+        className={isShownMenu ? `menu-wrapper visible` : `menu-wrapper hide`}
+      >
+        <nav className="menu-navigation">
+          <ul className="menu-navigation-list">
+            <li className="menu-list-item">
+              <Link onClick={() => setIsShownMenu(false)} to="/key-features">
+                Key features
+              </Link>
+            </li>
+            <li className="menu-list-item">
+              <Link onClick={() => setIsShownMenu(false)} to="/pricing">
+                Pricing
+              </Link>
+            </li>
+            <li className="menu-list-item">
+              <Link onClick={() => setIsShownMenu(false)} to="/contact">
+                Contact
+              </Link>
+            </li>
+          </ul>
+          <div className="menu-extra-navigation">
+            <Button
+              action={() => setIsShownMenu(false)}
+              type="outlined"
+              text="Free trial"
+              linkTo="/signup"
+            />
+            <a
+              onClick={() => setIsShownMenu(false)}
+              href="http://akvoflowsandbox.appspot.com/"
+              className="menu-nav-item login"
+            >
+              Log in
+            </a>
+          </div>
+        </nav>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/landing/src/components/header/index.scss b/landing/src/components/header/index.scss
@@ -0,0 +1,222 @@
+@import "../../variables.scss";
+.disabled-scroll {
+  overflow: hidden;
+}
+
+.header-wrapper {
+  position: relative;
+  min-height: 60px;
+
+  .menu-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: #fff;
+    z-index: 99;
+    transition: all ease-out 0.3s;
+    padding-top: 60px;
+    &.hide {
+      transform: translateY(-108%);
+    }
+    &.visible {
+      transform: translateY(0);
+    }
+    .menu-navigation-list {
+      margin: 0;
+      .menu-list-item {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        a {
+          display: block;
+          color: #000000;
+          font-size: 12px;
+          line-height: 16px;
+          padding: 20px;
+        }
+      }
+    }
+    .menu-extra-navigation {
+      margin-top: 330px;
+      a {
+        display: block;
+        max-width: max-content;
+        margin: auto;
+        &.login {
+          font-weight: 400;
+          font-size: 12px;
+          color: $grey;
+          line-height: 16px;
+          margin-top: 20px;
+        }
+      }
+    }
+    @media (min-width: 601px) {
+      display: none;
+    }
+  }
+
+  .header {
+    position: fixed;
+    top: 0;
+    width: calc(100% - 40px);
+    display: flex;
+    align-items: center;
+    padding: 9.5px 20px;
+    background-color: rgba(255, 255, 255, 0.95);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    z-index: 999;
+    .flow-logo {
+      &,
+      a {
+        width: 99.75px;
+        height: 20px;
+      }
+      margin-right: 50px;
+    }
+    a:not(.flow-logo a) {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      font-size: 16px;
+      color: $grey;
+      line-height: 24px;
+      overflow: hidden;
+
+      &:hover,
+      &.selected {
+        color: $black;
+        position: relative;
+        &::after {
+          opacity: 1;
+        }
+      }
+      &.selected::after {
+        content: " ";
+        display: block;
+        background-color: $grey;
+        height: 1px;
+        position: absolute;
+        bottom: 0;
+        width: 100px;
+      }
+    }
+
+    .toggle-menu-button {
+      border: 0;
+      padding: 20px;
+      max-height: 40px;
+      max-width: 40px;
+      position: relative;
+      text-indent: -9999px;
+      background-position: center;
+
+      &.opened-menu {
+        background-color: #fff;
+        background-image: url("../../images/menu-icon.svg");
+      }
+
+      &.closed-menu {
+        background-color: #fefaf0;
+        background-image: url("../../images/close-icon.svg");
+      }
+    }
+    .navigation {
+      width: 100%;
+      ul {
+        margin: 0;
+      }
+      &,
+      .navigation-list,
+      .extra-navigation {
+        display: flex;
+        align-items: center;
+        .list-item:not(:last-of-type) {
+          margin-right: 25px;
+        }
+      }
+
+      .extra-navigation {
+        width: 100%;
+        max-width: max-content;
+        margin-left: auto;
+        .nav-item:not(:last-child) {
+          margin-right: 14px;
+        }
+        .custom-select-container {
+          width: 61px;
+          height: 39px;
+          .custom-select {
+            border-radius: 10px;
+            max-width: calc(61px - 20px);
+            max-height: calc(37px - 16px);
+            overflow: hidden;
+            border: 1px solid #e7eeed;
+            transition: all ease-out 0.3s;
+
+            & * {
+              text-transform: uppercase;
+            }
+            svg {
+              position: relative;
+              bottom: -2px;
+              right: -4px;
+            }
+          }
+        }
+        .open-select {
+          max-height: 105px !important;
+        }
+      }
+
+      .extra-navigation .login,
+      .extra-navigation button,
+      .navigation-list {
+        display: none;
+      }
+    }
+  }
+
+  @media (min-width: 601px) {
+    min-height: 90px;
+    .header {
+      padding: 22.5px 40px;
+      width: calc(100% - 80px);
+      a:not(.flow-logo a) {
+        font-size: 12px;
+        line-height: 16px;
+      }
+      .navigation {
+        .extra-navigation,
+        .extra-navigation button,
+        .navigation-list {
+          display: flex;
+        }
+        .extra-navigation {
+          .nav-item:not(:last-child) {
+            margin-right: 30px;
+          }
+          .custom-select {
+            & * {
+              font-weight: 700;
+            }
+          }
+        }
+      }
+      .toggle-menu-button {
+        display: none;
+      }
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .header {
+      padding: 22.5px 157px;
+      width: calc(100% - calc(157px * 2));
+      a:not(.flow-logo a) {
+        font-size: 16px;
+        line-height: 24px;
+      }
+    }
+  }
+}