Merge pull request #62 from Scout-NU/#61-hamburger-functionality

#61 hamburger functionality/updating footer links and mailchimp funct…
Scout-NU · May 13, 2021 · b5b7841 · b5b7841
2 parents 2268042 + 61a84e8
commit b5b7841
Show file tree

Hide file tree

Showing 11 changed files with 527 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/footer/footer-styles.js b/src/components/footer/footer-styles.js
@@ -227,10 +227,11 @@ export const SockDescription = styled.div`
   }
 `
 
-export const SockCTA = styled.a`
+export const SockCTA = styled.button`
   font-size: 16px;
   padding-right: 60px;
   padding-left: 60px;
+  border: none;
   padding-top: 16px;
   padding-bottom: 16px;
   background-color: ${colors.seafoam900};

diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
@@ -64,16 +64,24 @@ export default function footer({ data }) {
                 <Sub1>
                   <label>{data.prismicFooter.data.sock_title}</label>
                 </Sub1>
-                <SockEmailForm>
+                <SockEmailForm
+                  action="https://gmail.us1.list-manage.com/subscribe/post?u=53c27f636ec14a9fe0cc740c3&amp;id=385b379fdd"
+                  method="post"
+                  id="mc-embedded-subscribe-form"
+                  name="mc-embedded-subscribe-form"
+                  class="validate"
+                  target="_blank"
+                  novalidate
+                >
                   <input type="text" placeholder="Enter your email" />
-                </SockEmailForm>
-                <SockDescription>
-                  <Body>{data.prismicFooter.data.sock_description}</Body>
-                </SockDescription>
+                  <SockDescription>
+                    <Body>{data.prismicFooter.data.sock_description}</Body>
+                  </SockDescription>
 
-                <SockCTA role="button" type="submit">
-                  Sign Up
-                </SockCTA>
+                  <SockCTA role="button" type="submit">
+                    Sign Up
+                  </SockCTA>
+                </SockEmailForm>
               </ConnectTitle>
             </SockContent>
           </SockContainer>
@@ -85,35 +93,35 @@ export default function footer({ data }) {
                   {data.prismicFooter.data.powerhouse_title}
                 </FooterHeader>
                 <AddressSection>
-                  {data.prismicFooter.data.address}{" "}
+                  {data.prismicFooter.data.address}
                 </AddressSection>
               </SocialSection>
 
               <LinkSection>
                 <LinkColumn>
                   <ul>
                     <li>
-                      <a href="/about">Home</a>
+                      <a href="/about">ABOUT</a>
                     </li>
                     <li>
-                      <a href="/about">About</a>
+                      <a href="/process">PROCESS</a>
                     </li>
                     <li>
-                      <a href="/about">Process</a>
+                      <a href="/products">PRODUCTS</a>
                     </li>
                   </ul>
                 </LinkColumn>
 
                 <LinkColumn>
                   <ul>
                     <li>
-                      <a href="/about">Products</a>
+                      <a href="/solutions">SOLUTIONS</a>
                     </li>
                     <li>
-                      <a href="/about">Solutions</a>
+                      <a href="/faq">FAQ</a>
                     </li>
                     <li>
-                      <a href="/about">FAQ</a>
+                      <a href="/contact">CONTACT</a>
                     </li>
                   </ul>
                 </LinkColumn>

diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
@@ -1,32 +1,44 @@
 import styled from "styled-components"
 import dimensions from "../../style/dimensions"
 import colors from "../../style/colors"
+import { Link } from "gatsby"
 
 export const NavContainer = styled.div`
-  z-index: 1;
-  padding-bottom: 32px;
+  z-index: 2;
   &.colorChange {
-    background-color: rgb(0, 0, 0, 0.55);
+    background-color: ${colors.blue900};
     color: ${colors.white900};
-
   }
 
   position: fixed;
   width: 100%;
   transition: 0.5s all ease;
+
+  color: ${colors.white900};
+
+  svg {
+    cursor: pointer;
+  }
+`
+export const LogoLink = styled.a`
   color: ${colors.black900};
+  text-decoration: none;
 
   &.home-header {
     color: ${colors.white900};
   }
+
+  img {
+    width: 186px;
+    margin-bottom: 32px;
+  }
 `
 
 export const Logo = styled.div`
   font-weight: bold;
   font-size: 24px;
   padding-top: 32px;
   padding-left: 80px;
-  color: ${colors.black900};
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     text-align: center;
@@ -35,8 +47,16 @@ export const Logo = styled.div`
     padding-left: 0px;
   }
 
+  &.colorChange {
+    a {
+      color: ${colors.white900};
+    }
+  }
+
   &.home-header {
-    color: ${colors.white900};
+    a {
+      color: ${colors.white900} !important;
+    }
   }
 `
 
@@ -58,18 +78,20 @@ export const NavLinks = styled.div`
   }
 `
 
-export const NavLink = styled.a`
+export const NavLink = styled(Link)`
   font-weight: bold;
   padding-left: 100px;
   text-decoration: none;
 
+  &.colorChange {
+    color: ${colors.white900};
+  }
 
   color: ${colors.black900};
 
   &.home-header {
     color: ${colors.white900};
   }
-
 `
 
 export const MobileIcon = styled.div`
@@ -83,3 +105,51 @@ export const MobileIcon = styled.div`
     position: absolute;
   }
 `
+
+export const OpenNavContainer = styled.div`
+  display: none;
+
+  &.open {
+    position: absolute;
+    top: 0;
+    z-index: 4;
+    width: 100%;
+    height: 100vh;
+    background-color: ${colors.blue900};
+    display: inherit;
+  }
+`
+
+export const CloseButton = styled.div`
+  position: absolute;
+  top: 17px;
+  right: 24px;
+`
+
+export const MobileLink = styled.li`
+  margin-bottom: 14.5vh;
+  display: flex;
+  z-index: 5;
+  position: relative;
+
+  a {
+    color: ${colors.white900};
+    font-size: 24px;
+    text-decoration: none;
+    margin-left: 36px;
+  }
+`
+
+export const MobileLinks = styled.ul`
+  margin-top: 8vh;
+  list-style: none;
+`
+export const NodeLine = styled.div`
+  width: 4px;
+  height: 80vh;
+  position: absolute;
+  top: 8vh;
+  left: 55px;
+  z-index: 3;
+  background-color: ${colors.grass900};
+`
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
@@ -1,50 +1,132 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import Hamburger from "../../vectors/hamburger.svg"
+import CloseIcon from "../../vectors/CloseIcon.svg"
+import { Link } from "gatsby"
+
 import {
   NavContainer,
   Logo,
   MobileIcon,
   NavLinks,
   NavLink,
+  OpenNavContainer,
+  CloseButton,
+  MobileLink,
+  MobileLinks,
+  NodeLine,
+  LogoLink,
 } from "./header-styles"
-
+import Circle from "../../vectors/circle.svg"
 import { NavText } from "../../style/type-styles"
+import { createGlobalStyle } from "styled-components"
+import LogoHomepage from "../../images/navlogohomepage.png"
+import NavLogo from "../../images/navlogo.png"
+
+const GlobalStyle = createGlobalStyle`
+   body {
+     overflow: ${props => (props.open == "open" ? "hidden" : "visible")};;
+   }
+`
 
 export const Header = ({ home }) => {
   const [open, setOpen] = useState(false)
   const [colorChange, setColorchange] = useState(false)
+  const [logoImage, setLogoImage] = useState()
   const changeNavbarColor = () => {
     if (typeof window !== "undefined" && window.scrollY >= 80) {
       setColorchange(true)
+      setLogoImage(LogoHomepage)
     } else {
       setColorchange(false)
+      !home && setLogoImage(NavLogo)
     }
   }
+
+  useEffect(() => {
+    home ? setLogoImage(LogoHomepage) : setLogoImage(NavLogo)
+  }, [setLogoImage])
+
   typeof window !== "undefined" &&
     window.addEventListener("scroll", changeNavbarColor)
-  return (
-    <NavContainer
-      className={
-        (colorChange ? "navbar colorChange" : "navbar") ||
-        (home === true ? "home-header" : "")
-      }
-    >
-      <Logo alt="PowerHouse Logo" className={home === true ? "home-header" : ""}>PowerHouse</Logo>
 
+  return (
+    <NavContainer className={colorChange ? "navbar colorChange" : "navbar"}>
+      <GlobalStyle open={open ? "open" : ""} />
+      <Logo
+        alt="PowerHouse Logo"
+        className={colorChange ? "navbar colorChange" : "navbar"}
+      >
+        <div>
+          <LogoLink className={home === true ? "home-header" : ""} href="/">
+            <img src={logoImage} />
+          </LogoLink>
+        </div>
+      </Logo>
       <MobileIcon onClick={() => setOpen(!open)} className={open ? "open" : ""}>
         <Hamburger className="hamburger" />
       </MobileIcon>
+
+      <OpenNavContainer className={open ? "open" : ""}>
+        <CloseButton
+          onClick={() => setOpen(!open)}
+          className={open ? "open" : ""}
+        >
+          <CloseIcon />
+        </CloseButton>
+        <NodeLine />
+
+        <MobileLinks>
+          <MobileLink>
+            <Circle />
+
+            <Link href="/">PowerHouse</Link>
+          </MobileLink>
+          <MobileLink>
+            <Circle />
+
+            <Link href="/about">About</Link>
+          </MobileLink>
+          <MobileLink>
+            <Circle />
+
+            <Link href="/process">Process</Link>
+          </MobileLink>
+          <MobileLink>
+            <Circle />
+
+            <Link href="/products">Products</Link>
+          </MobileLink>
+          <MobileLink>
+            <Circle />
+
+            <Link href="/solutions">Solutions</Link>
+          </MobileLink>
+        </MobileLinks>
+      </OpenNavContainer>
+
       <NavLinks className={home === true ? "home-header" : ""}>
-        <NavLink href="/about">
+        <NavLink
+          className={colorChange ? "colorChange" : "navbar"}
+          href="/about"
+        >
           <NavText>ABOUT</NavText>
         </NavLink>
-        <NavLink href="/process">
+        <NavLink
+          className={colorChange ? "colorChange" : "navbar"}
+          href="/process"
+        >
           <NavText>PROCESS</NavText>
         </NavLink>
-        <NavLink href="/products">
+        <NavLink
+          className={colorChange ? "colorChange" : "navbar"}
+          href="/products"
+        >
           <NavText>PRODUCTS</NavText>
         </NavLink>
-        <NavLink href="/solutions">
+        <NavLink
+          className={colorChange ? "colorChange" : "navbar"}
+          href="/solutions"
+        >
           <NavText>SOLUTIONS</NavText>
         </NavLink>
       </NavLinks>