Merge pull request #72 from newrelic/develop

Release

packages/gatsby-theme-newrelic/src/components/GlobalHeader.js

@@ -6,7 +6,7 @@ import DarkModeToggle from './DarkModeToggle';
 import ExternalLink from './ExternalLink';
 import NewRelicLogo from './NewRelicLogo';
 import Icon from './Icon';
-import SwiftTypeSearch from './SwiftTypeSearch';
+import SwiftypeSearch from './SwiftypeSearch';
 import Overlay from './Overlay';
 import GlobalNavLink from './GlobalNavLink';
 import useMedia from 'use-media';
@@ -18,6 +18,7 @@ const styles = {
     align-items: center;
   `,
   actionIcon: css`
+    cursor: pointer;
     transition: all 0.2s ease-out;
     color: var(--secondary-text-color);
 
@@ -34,13 +35,13 @@ const GlobalHeader = ({ editUrl, className, search }) => {
 
   useEffect(() => {
     if (isOverlayOpen && !new URLSearchParams(location.search).has('q')) {
-      navigate(location.pathname + '?q=');
+      navigate(`${location.pathname}?q=`);
     }
-    
+
     if (!isOverlayOpen) {
       navigate(location.pathname);
     }
-  }, [isOverlayOpen]);
+  }, [isOverlayOpen, location.pathname, location.search]);
 
   const { site } = useStaticQuery(graphql`
     query GlobalHeaderQuery {
@@ -91,17 +92,19 @@ const GlobalHeader = ({ editUrl, className, search }) => {
           padding: 0 ${layout.contentPadding};
         `}
       >
-        <Overlay
-          isOpen={isOverlayOpen}
-          onCloseOverlay={() => setIsOverlayOpen(false)}
-        >
-          <SwiftTypeSearch
-            css={css`
-              width: 950px;
-              margin: 3rem auto;
-            `}
-          />
-        </Overlay>
+        {search && (
+          <Overlay
+            isOpen={isOverlayOpen}
+            onCloseOverlay={() => setIsOverlayOpen(false)}
+          >
+            <SwiftypeSearch
+              css={css`
+                width: 950px;
+                margin: 3rem auto;
+              `}
+            />
+          </Overlay>
+        )}
         <nav
           css={css`
             display: flex;

packages/gatsby-theme-newrelic/src/components/Portal.js

@@ -2,15 +2,17 @@ import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 const Portal = ({ children }) => {
-  const [root] = useState(() => document.createElement('div'));
+  const [root] = useState(() =>
+    typeof document === 'undefined' ? null : document.createElement('div')
+  );
 
   useEffect(() => {
     document.body.appendChild(root);
 
     return () => document.body.removeChild(root);
   }, [root]);
 
-  return createPortal(children, root);
+  return root ? createPortal(children, root) : null;
 };
 
 export default Portal;

packages/gatsby-theme-newrelic/src/components/SwiftTypeSearch.js → packages/gatsby-theme-newrelic/src/components/SwiftypeSearch.js

@@ -15,7 +15,7 @@ import Icon from './Icon';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import styles from '../styles/SwiftTypeSearchStyles';
+import styles from '../styles/SwiftypeSearchStyles';
 import { navigate, useLocation } from '@reach/router';
 import qs from 'query-string';
 
@@ -50,7 +50,7 @@ const configOptions = {
   },
 };
 
-const SwiftTypeSearch = ({ className }) => {
+const SwiftypeSearch = ({ className }) => {
   const location = useLocation();
   return (
     <div css={styles} className={className}>
@@ -132,7 +132,7 @@ const InputView = ({ getAutocomplete, getInputProps }) => {
   );
 };
 
-SwiftTypeSearch.propTypes = {
+SwiftypeSearch.propTypes = {
   className: PropTypes.string,
 };
 
@@ -147,4 +147,4 @@ const StyledResultsContainer = styled.div`
   flex-direction: column;
 `;
 
-export default SwiftTypeSearch;
+export default SwiftypeSearch;