fusionjs · lhorie · Sep 15, 2021 · Aug 8, 2021 · Aug 8, 2021 · Aug 8, 2021
diff --git a/package.json b/package.json
@@ -27,8 +27,8 @@
     "gatsby-transformer-remark": "^1.7.7",
     "just-safe-get": "^2.0.0",
     "prismjs": "^1.15.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "react-helmet": "^5.2.0",
     "styletron-client": "^3.0.0-rc.1",
     "styletron-react": "^3.0.0-rc.2",

diff --git a/src/components/burger-menu-button.js b/src/components/burger-menu-button.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { bool, func } from 'prop-types';
+
+import { StyledBurger, StyledBurgerBar } from './styled-elements';
+
+const Burger = ({ open, setOpen }) => {
+    const handleClick = () => setOpen(!open)
+    return (
+        <StyledBurger onClick={handleClick}>
+            <StyledBurgerBar styleProps={{open}} />
+            <StyledBurgerBar styleProps={{open}} />
+            <StyledBurgerBar styleProps={{open}} />
+        </StyledBurger>
+    )
+}
+
+Burger.propTypes = {
+    open: bool.isRequired,
+    setOpen: func.isRequired,
+};
+
+export default Burger;
diff --git a/src/components/main-nav.js → src/components/nav-items.js b/src/components/main-nav.js → src/components/nav-items.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {styled} from 'styletron-react';
 import Helmet from 'react-helmet';
 import Link from 'gatsby-link';
-import {MainNavContainer, MainNavItem, SearchField} from './styled-elements';
+import { MainNavItem, SearchField } from './styled-elements';
 import {getPath} from '../utils';
 
 const InternalLink = props => {
@@ -20,7 +20,7 @@ class DocsSearch extends React.Component {
       <SearchField
         styleProps={{
           overrides: {
-            '@media (max-width: 355px)': {
+            '@media (max-width: 587px)': {
               display: 'none',
             },
             verticalAlign: 'baseline !important',
@@ -33,7 +33,7 @@ class DocsSearch extends React.Component {
   }
 }
 
-const Nav = props => {
+const NavItems = props => {
   const {data, location, pathPrefix} = props;
 
   function matchPath(regexp) {
@@ -45,8 +45,10 @@ const Nav = props => {
     return matchPath(reNews);
   }
 
+  const handleLinkClick = () => props.setOpenMobileMenu()
+
   return (
-    <MainNavContainer data-test="main-nav">
+    <React.Fragment>
       {data.map((item, index) => {
         const re = new RegExp(`^${pathPrefix}${item.pathPrefix}(/|$)`);
         const isActive = matchPath(re);
@@ -55,6 +57,7 @@ const Nav = props => {
           <InternalLink
             key={index}
             to={item.path || getPath(item.pathPrefix, item.children[0])}
+            onClick={handleLinkClick}
           >
             {isActive ? (
               <Helmet
@@ -66,23 +69,18 @@ const Nav = props => {
           </InternalLink>
         );
       })}
-      <InternalLink to="/support">
+      <InternalLink to="/support" onClick={handleLinkClick}>
         <MainNavItem
           styleProps={{
             isActive: isActive('/support'),
-            overrides: {
-              '@media (max-width: 474px)': {
-                display: 'none',
-              },
-            },
           }}
         >
           Support
         </MainNavItem>
       </InternalLink>
       <DocsSearch />
-    </MainNavContainer>
+    </React.Fragment>
   );
 };
 
-export default Nav;
+export default NavItems;
diff --git a/src/components/page-header.js b/src/components/page-header.js
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import Link from 'gatsby-link';
+import {
+  H1,
+  Header,
+  HeaderTitle,
+  MainNavContainer,
+  MobileNavContainer,
+} from './styled-elements';
+import {
+  PageWidth,
+  FlexContainer,
+  FlexItem,
+} from '../layouts/styled-elements';
+import Burger from './burger-menu-button';
+import NavItems from './nav-items';
+import docsContents from '../nav-docs.yml';
+import apiContents from '../nav-api.yml';
+
+const PageHeader = ({
+  location,
+  pathPrefix,
+}) => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const handlSetOpen = () => { setMobileMenuOpen(!mobileMenuOpen) };
+
+  return (
+    <Header>
+      <Burger open={mobileMenuOpen} setOpen={handlSetOpen} />
+      <PageWidth>
+        <FlexContainer>
+          <FlexItem>
+            <H1>
+              <Link to="/" style={{ backgroundColor: 'transparent' }}>
+                <HeaderTitle>Fusion.js</HeaderTitle>
+              </Link>
+            </H1>
+          </FlexItem>
+          <FlexItem>
+            <MainNavContainer data-test="main-nav">
+              <NavItems
+                data={[docsContents, apiContents]}
+                location={location}
+                pathPrefix={pathPrefix}
+                setOpenMobileMenu={handlSetOpen}
+              />
+            </MainNavContainer>
+          </FlexItem>
+        </FlexContainer>
+        {mobileMenuOpen && (
+          <MobileNavContainer>
+            <NavItems
+              data={[docsContents, apiContents]}
+              location={location}
+              pathPrefix={pathPrefix}
+              setOpenMobileMenu={handlSetOpen}
+            />
+          </MobileNavContainer>
+        )}
+      </PageWidth>
+    </Header>
+  )
+}
+
+export default PageHeader;
diff --git a/src/components/styled-elements.js b/src/components/styled-elements.js
@@ -9,7 +9,18 @@ const {
   fontFamily,
 } = require('./style-settings');
 
-exports.MainNavContainer = styled('div', {});
+exports.MainNavContainer = styled('div', () => ({
+  '@media (max-width: 587px)': {
+    display: 'none',
+  },
+}));
+
+exports.MobileNavContainer = styled('div', () => ({
+  paddingBottom: '15px',
+  '@media (min-width: 588px)': {
+    display: 'none',
+  },
+}));
 
 exports.SearchField = styled('input', ({styleProps = {}}) => ({
   boxSizing: 'border-box',
@@ -55,10 +66,10 @@ exports.MainNavItem = styled('span', ({styleProps = {}}) => ({
   textDecoration: 'none',
   lineHeight: '1',
   padding: '17px 15px 19px 15px',
-  borderTopWidth: '4px',
-  borderTopStyle: 'solid',
+  borderBottomWidth: '4px',
+  borderBottomStyle: 'solid',
   color: styleProps.isActive ? whiteColor : white120Color,
-  borderTopColor: styleProps.isActive ? primaryColor : 'transparent',
+  borderBottomColor: styleProps.isActive ? primaryColor : 'transparent',
   ':hover': {
     color: whiteColor,
   },
@@ -69,6 +80,9 @@ exports.MainNavItem = styled('span', ({styleProps = {}}) => ({
     padding: '17px 4px 19px 4px',
     letterSpacing: '1px',
   },
+  '@media (max-width: 587px)': {
+    width: '97vw'
+  },
   ...styleProps.overrides,
 }));
 
@@ -94,6 +108,52 @@ exports.SideNavUl = styled('ul', ({styleProps = {}}) => ({
   ...styleProps.overrides,
 }));
 
+exports.StyledBurger = styled('button', ({styleProps = {}}) => ({
+  position: 'absolute',
+  top: '10px',
+  right: '15px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-around',
+  width: '32px',
+  height: '32px',
+  background: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  padding: '0',
+  zIndex: '99',
+
+  ':focus': {
+    outline: 'none'
+  },
+
+  '@media (min-width: 588px)': {
+    display: 'none',
+  },
+}));
+
+exports.StyledBurgerBar = styled('div', ({ styleProps = {} }) => ({
+    width: '32px',
+    height: '2px',
+    backgroundColor: whiteColor,
+    transition: 'all 0.3s linear',
+    position: 'relative',
+    transformOrigin: '1px',
+
+    ':first-child': {
+      transform: styleProps.open ? 'rotate(45deg)' : 'rotate(0)',
+    },
+
+    ':nth-child(2)': {
+      opacity: styleProps.open ? '0' : '1',
+      transform: styleProps.open ? 'translateX(20px)' : 'translateX(0)',
+    },
+
+    ':nth-child(3)': {
+      transform: styleProps.open ? 'rotate(-45deg)' : 'rotate(0)',
+    },
+}));
+
 exports.SideNavLi = styled('li', ({styleProps = {}}) => ({
   margin: '0',
   ...styleProps.overrides,
@@ -123,3 +183,40 @@ exports.SideNavItem = styled('span', ({styleProps = {}}) => ({
   },
   ...styleProps.overrides,
 }));
+
+exports.Header = styled('div', {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  minHeight: '52px',
+  background: '#041725',
+  color: whiteColor,
+  zIndex: '999',
+});
+
+exports.HeaderTitle = styled('span', {
+  backgroundColor: 'transparent',
+  display: 'inline-block',
+  fontWeight: '100',
+  fontSize: '20px',
+  textTransform: 'uppercase',
+  letterSpacing: '4px',
+  textDecoration: 'none',
+  color: whiteColor,
+  paddingTop: '16px',
+  paddingBottom: '16px',
+  paddingLeft: '15px',
+  paddingRight: '15px',
+  lineHeight: '1',
+  ':hover': {
+    textDecoration: 'none',
+  },
+});
+
+exports.H1 = styled('h1', {
+  marginTop: '0',
+  marginBottom: '0',
+  marginLeft: '0',
+  marginRight: '0',
+});
diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -1,21 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import Link from 'gatsby-link';
 import {
   Page,
   PageWidth,
-  H1,
-  Header,
-  HeaderTitle,
   Body,
   FlexContainer,
   FlexItem,
   SideNavContainer,
   Content,
 } from './styled-elements';
-import MainNav from '../components/main-nav';
 import SideNav from '../components/side-nav';
+import PageHeader from '../components/page-header';
 import Footer from '../components/footer';
 import docsContents from '../nav-docs.yml';
 import apiContents from '../nav-api.yml';
@@ -59,26 +55,10 @@ class Template extends React.Component {
             {name: 'keywords', content: 'web, light, javascript, react, ssr'},
           ]}
         />
-        <Header>
-          <PageWidth>
-            <FlexContainer>
-              <FlexItem>
-                <H1>
-                  <Link to="/" style={{backgroundColor: 'transparent'}}>
-                    <HeaderTitle>Fusion.js</HeaderTitle>
-                  </Link>
-                </H1>
-              </FlexItem>
-              <FlexItem>
-                <MainNav
-                  data={[docsContents, apiContents]}
-                  location={location}
-                  pathPrefix={pathPrefix}
-                />
-              </FlexItem>
-            </FlexContainer>
-          </PageWidth>
-        </Header>
+        <PageHeader
+          location={location}
+          pathPrefix={pathPrefix}
+        />
         <Body>
           <PageWidth>
             <FlexContainer>