fix: search header grey background #41

Signed-off-by: heitorlessa <[email protected]>

Author: heitorlessa

docs/src/gatsby-theme-apollo-docs/components/header.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from '@emotion/styled';
+import { HEADER_HEIGHT } from '../utils';
+import { breakpoints } from 'gatsby-theme-apollo-core';
+
+const Wrapper = styled.header({
+    position: 'sticky',
+    top: 0,
+    left: 0,
+    zIndex: 1
+});
+
+const InnerWrapper = styled.div({
+    display: 'flex',
+    alignItems: 'center',
+    height: HEADER_HEIGHT,
+    padding: '0 56px',
+    backgroundColor: 'white',
+    [breakpoints.md]: {
+        padding: '0 24px'
+    }
+});
+
+export default function Header(props) {
+    return (
+        <Wrapper>
+            {props.beforeContent}
+            <InnerWrapper className="content-header">{props.children}</InnerWrapper>
+        </Wrapper>
+    );
+}
+
+Header.propTypes = {
+    beforeContent: PropTypes.node.isRequired,
+    children: PropTypes.node.isRequired
+};