import React from 'react';
import { Link } from 'gatsby';
import SiteLogo from './site-logo';
import { SprkIcon, SprkTextInput } from '@sparkdesignsystem/spark-react';
import ContextMenu from './ContextMenu';

const Header = ({ menuVisible, setMenuVisible, context, setContext }) => (
  <header className="docs-header">
    <div className="docs-header__group">
      <button className="docs-header__menu-button" onClick={() => { setMenuVisible(!menuVisible); }}>
        <span className="sprk-u-ScreenReaderText">Toggle Navigation</span>
        <SprkIcon iconName="menu"/>
      </button>
      <Link to="/" onClick={() => {setContext('homepage');}} className="docs-header__logo-container">
        <SiteLogo/>
      </Link>
    </div>
    <div className="docs-header__group docs-header__menu-wrapper">
      <div className="docs-header__menu">
        <ContextMenu
          autoNav
          context={context}
          setContext={setContext}
          className="sprk-o-HorizontalList"/>
      </div>
      <SprkTextInput
        additionalClasses="docs-header-search"
        leadingIcon="search"
        hiddenLabel
        name="InlineSearch"
        placeholder="Search"
      />
    </div>
  </header>
);

export default Header;

@@ -62,34 +62,34 @@
 ort 
-SiteLogo from './site-logo
+PropTypes from 'prop-types
 ';%0Ai
@@ -95,16 +95,18 @@
 import %7B
+%0A 
  SprkIco
@@ -121,17 +121,17 @@
 extInput
- 
+%0A
 %7D from '
@@ -159,24 +159,60 @@
 ark-react';%0A
+import SiteLogo from './site-logo';%0A
 import Conte
@@ -405,16 +405,24 @@
  %3Cbutton
+%0A       
  classNa
@@ -450,16 +450,24 @@
 -button%22
+%0A       
  onClick
@@ -508,16 +508,45 @@
 ble); %7D%7D
+%0A        type=%22button%22%0A      
 %3E%0A      
@@ -647,16 +647,17 @@
 e=%22menu%22
+ 
 /%3E%0A     
@@ -667,16 +667,17 @@
 button%3E%0A
+%0A
       %3CL
@@ -683,15 +683,31 @@
 Link
- to=%22/%22
+%0A        to=%22/%22%0A       
  onC
@@ -719,16 +719,17 @@
 %7B() =%3E %7B
+ 
 setConte
@@ -743,18 +743,27 @@
 epage');
+ 
 %7D%7D
+%0A       
  classNa
@@ -794,16 +794,23 @@
 ntainer%22
+%0A      
 %3E%0A      
@@ -820,16 +820,17 @@
 SiteLogo
+ 
 /%3E%0A     
@@ -845,24 +845,25 @@
 %0A    %3C/div%3E%0A
+%0A
     %3Cdiv cla
@@ -1119,16 +1119,17 @@
  %3C/div%3E%0A
+%0A
       %3CS
@@ -1330,16 +1330,165 @@
 er%3E%0A);%0A%0A
+Header.propTypes = %7B%0A  menuVisible: PropTypes.bool,%0A  setMenuVisible: PropTypes.func,%0A  context: PropTypes.string,%0A  setContext: PropTypes.func,%0A%7D;%0A%0A
 export d

add header proptypes