diff --git a/package-lock.json b/package-lock.json
index a60e5a0..df25545 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3418,6 +3418,11 @@
}
}
},
+ "body-scroll-lock": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz",
+ "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg=="
+ },
"bonjour": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
diff --git a/src/components/footer/footer-styles.js b/src/components/footer/footer-styles.js
index 80486e4..5549b6a 100644
--- 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
index 4814665..d5ea1cf 100644
--- a/src/components/footer/footer.js
+++ b/src/components/footer/footer.js
@@ -64,16 +64,24 @@ export default function footer({ data }) {
-
+
-
-
- {data.prismicFooter.data.sock_description}
-
+
+ {data.prismicFooter.data.sock_description}
+
-
- Sign Up
-
+
+ Sign Up
+
+
@@ -85,7 +93,7 @@ export default function footer({ data }) {
{data.prismicFooter.data.powerhouse_title}
- {data.prismicFooter.data.address}{" "}
+ {data.prismicFooter.data.address}
@@ -93,13 +101,13 @@ export default function footer({ data }) {
@@ -107,13 +115,13 @@ export default function footer({ data }) {
diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
index 1f25c03..2034a4c 100644
--- a/src/components/header/header-styles.js
+++ b/src/components/header/header-styles.js
@@ -1,24 +1,37 @@
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`
@@ -26,7 +39,6 @@ export const Logo = styled.div`
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
index d8f2a97..0a0f8f2 100644
--- 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 (
-
- PowerHouse
+ return (
+
+
+
+
+
+ 
+
+