import React from 'react'
import Link from 'gatsby-link'
import Img from "gatsby-image"
import styled from 'styled-components'

import { withPrefix } from 'gatsby-link'

import * as palette from '../../utils/styles'

const Hero = ({avatar}) => {

const NavBar = styled.div`
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: ${palette.SECONDARY_COLOR };
`
const NavLeft = styled.div`
padding: 1rem;
position: relative;
opacity: 1;
align-self: self-start;
display: flex;
align-items: center;
justify-content: center;
a img {height:2rem;margin: 0;}
img{height: 100%;margin: 0;vertical-align:middle;}
h4 {margin:0 0 0 1rem;}
a h4 {color: ${palette.SECONDARY_COLOR };}
@media (max-width: 768px) {
  h4 {display: none;}
}
`
const NavRight = styled.div`
   padding: 1rem;
   position: relative;
   opacity: 1;
   align-self: self-end;
   display: flex;
   align-items: center;
   justify-content: center;
   img{height:1.618rem;margin:0 0 0 0;}
   h4 {margin:0 0 0 1rem;}
   a h4 {color: ${palette.SECONDARY_COLOR };}
`

const toggleMenu = () => {
  const wrapper = document.getElementById('nav');
  wrapper.classList.toggle('open--menu');
}

const closeMenu = () => {
  const wrapper = document.getElementById('nav');
  wrapper.classList.remove('open--menu');
}

return (
<nav>
  <NavBar>
    <NavLeft>
      <a href="/"><img src={withPrefix('./Logo_export.40pt.svg')} /></a><a href="/"><h4>I AM MATTHIAS</h4></a>
    </NavLeft>
    <NavRight>
      <a href="/about"><h4>ABOUT</h4></a>
    </NavRight>
  </NavBar>
</nav>
)
}

export default Hero;

@@ -650,17 +650,17 @@
 ddle;%7D%0Ah
-4
+3
  %7Bmargin
@@ -676,17 +676,17 @@
 em;%7D%0Aa h
-4
+3
  %7Bcolor:
@@ -747,17 +747,17 @@
 x) %7B%0A  h
-4
+3
  %7Bdispla
@@ -994,17 +994,17 @@
 0;%7D%0A   h
-4
+3
  %7Bmargin
@@ -1023,17 +1023,17 @@
 %7D%0A   a h
-4
+3
  %7Bcolor:
@@ -1435,17 +1435,17 @@
 f=%22/%22%3E%3Ch
-4
+3
 %3EI AM MA
@@ -1453,17 +1453,17 @@
 THIAS%3C/h
-4
+3
 %3E%3C/a%3E%0A  
@@ -1515,17 +1515,17 @@
 bout%22%3E%3Ch
-4
+3
 %3EABOUT%3C/
@@ -1525,17 +1525,17 @@
 ABOUT%3C/h
-4
+3
 %3E%3C/a%3E%0A  

Update index.js