#26 initial header structure and adding vector

gatsby-config.js

@@ -43,5 +43,13 @@ module.exports = {
         typePathsFilenamePrefix: "prismic-typepaths---powerhouse-site",
       },
     },
+    {
+      resolve: "gatsby-plugin-react-svg",
+      options: {
+        rule: {
+          include: /vectors/ // See below to configure properly
+        }
+      }
+    }
   ],
 }

package.json

@@ -17,6 +17,7 @@
     "@walltowall/gatsby-source-prismic-schemas": "^1.1.0",
     "gatsby": "^2.26.1",
     "gatsby-plugin-netlify-headers": "^1.0.1",
+    "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sass": "^4.0.2",
     "gatsby-source-prismic": "^3.3.3",
     "node-sass": "^5.0.0",

src/components/header/header.jsx

@@ -0,0 +1,66 @@
+import React from "react"
+import styled from "styled-components"
+import dimensions from "../../style/dimensions"
+import Hamburger from "../../vectors/hamburger.svg"
+const NavContainer = styled.div``
+
+const Logo = styled.div`
+  font-weight: bold;
+  font-size: 24px;
+  padding-top: 32px;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    text-align: center;
+    font-size: 20px;
+    padding-top: 24px;
+
+  }
+`
+
+const NavLinks = styled.div`
+  position: absolute;
+  right: 80px;
+  top: 40px;
+  display: flex;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    display: none;
+  }
+`
+
+const NavLink = styled.div`
+  font-weight: bold;
+  font-size: 16px;
+  padding-left: 100px;
+`
+
+const MobileIcon = styled.div`
+@media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: none;
+  }
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    left: 24px;
+    top: 32px;
+    position: absolute;
+    
+  }
+`
+
+export default function header() {
+  return (
+    <NavContainer>
+      <Logo>PowerHouse</Logo>
+
+      <MobileIcon>
+        <Hamburger />
+      </MobileIcon>
+      <NavLinks>
+        <NavLink>ABOUT</NavLink>
+        <NavLink>PROCESS</NavLink>
+        <NavLink>PRODUCTS</NavLink>
+        <NavLink>SOLUTIONS</NavLink>
+      </NavLinks>
+    </NavContainer>
+  )
+}

src/components/layout.js

@@ -1,69 +1,34 @@
+
 import React from "react"
 import styled from "styled-components"
 import "../style/typography.scss"
-
+import "../style/global.scss"
 import dimensions from "../style/dimensions"
 import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables"
+import Footer from "../components/footer.js"
+import Header from "../components/header/header.jsx"
 
 const LayoutContainer = styled.div`
-  body * {
-    box-sizing: border-box;
-    margin: 0;
-  }
-
-  html,
-  body,
-  #root {
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    min-height: 100%;
-  }
-
-  body {
-    width: 100%;
-    margin: 0 auto;
-    font-size: 16px;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-
-    @media (max-width: ${dimensions.maxwidthMobile}px) {
-      font-size: 14px;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-  }
-
-  /*
-  A workaround for forcing accessibility wrappers
-  to have a 100% height.
-  Reach Router issue here: https: //github.com/reach/router/issues/63
-  */
-  #___gatsby,
-  div[role="group"][tabindex] {
-    height: 100%;
-    min-height: 100% !important;
-  }
-
-  padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};
-
-  margin: 0 auto;
+@media (min-width: ${dimensions.maxwidthTablet}px) {
+  padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s
+}
+@media (max-width: ${dimensions.maxwidthTablet}px) {
+  padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile};
+}
 `
 const LayoutBody = styled.div`
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};
-  }
-
-  @media (max-width: ${dimensions.maxwidthMobile}px) {
-    padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile};
-  }
+  // @media (min-width: ${dimensions.maxwidthTablet}px) {
+  //   padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s
+  // }
+  // @media (max-width: ${dimensions.maxwidthTablet}px) {
+  //   padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile};
+  // }
 `
 
 const Layout = ({ children }) => {
   return (
     <LayoutContainer>
+      <Header />
       <LayoutBody>{children}</LayoutBody>
     </LayoutContainer>
   )

src/style/global.scss

@@ -0,0 +1,4 @@
+html, body
+{
+    margin: 0px !important; padding: 0px !important;
+}