removes routing based menu for a basic state managed menu

fbshipit-source-id: 4db2384

Author: jimmylee

components/DocumentationHeader.js

@@ -10,12 +10,6 @@ import DismissIcon from '~/components/icons/DismissIcon';
 import AlgoliaSearch from '~/components/plugins/AlgoliaSearch';
 import VersionSelector from '~/components/VersionSelector';
 
-const STYLES_HIDE_MOBILE = css`
-  @media screen and (max-width: ${Constants.breakpoints.mobile}) {
-    display: none;
-  }
-`;
-
 const STYLES_LEFT = css`
   flex-shrink: 0;
   padding-right: 24px;
@@ -63,7 +57,6 @@ const STYLES_TITLE_TEXT = css`
 const STYLES_MENU_BUTTON = css`
   cursor: pointer;
   height: 100%;
-  display: none;
   align-items: center;
   justify-content: center;
   padding-left: 24px;
@@ -81,36 +74,22 @@ const STYLES_MENU_BUTTON = css`
   }
 
   @media screen and (max-width: ${Constants.breakpoints.mobile}) {
-    display: flex;
     padding-left: 16px;
   }
 `;
 
-const STYLES_DISMISS_BUTTON = css`
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: 24px;
-  margin-left: 16px;
-  border-left: 1px solid ${Constants.colors.border};
-  text-decoration: none;
-  color: ${Constants.colors.black};
-
-  :visited {
-    color: ${Constants.colors.black};
-  }
-
-  :hover {
-    color: ${Constants.colors.expo};
-  }
+const STYLES_MENU_BUTTON_IS_MOBILE = css`
+  display: none;
 
   @media screen and (max-width: ${Constants.breakpoints.mobile}) {
-    padding-left: 16px;
+    display: flex;
   }
 `;
 
+const STYLES_MENU_BUTTON_VISIBLE = css`
+  display: flex;
+`;
+
 export default class DocumentationHeader extends React.PureComponent {
   render() {
     return (
@@ -124,33 +103,31 @@ export default class DocumentationHeader extends React.PureComponent {
 
           <h1 className={STYLES_TITLE_TEXT}>Expo Docs</h1>
 
-          {!this.props.hideVersionSelector && (
+          {!this.props.isVersionSelectorHidden && (
             <VersionSelector
-              className={STYLES_HIDE_MOBILE}
               style={{ marginLeft: 16 }}
-              activeVersion={this.props.activeVersion}
+              version={this.props.version}
               onSetVersion={this.props.onSetVersion}
             />
           )}
         </div>
         <div className={STYLES_RIGHT}>
-          {!this.props.hideAlgoliaSearch && (
-            <AlgoliaSearch router={this.props.router} activeVersion={this.props.activeVersion} />
+          {!this.props.isAlogliaSearchHidden && (
+            <AlgoliaSearch router={this.props.router} version={this.props.version} />
           )}
 
           {!this.props.isMenuActive && (
-            <Link
-              prefetch
-              href={`/mobile-navigation`}
-              as={`/mobile-navigation/${this.props.activeVersion}`}>
-              <a className={STYLES_MENU_BUTTON}>
-                <MenuIcon />
-              </a>
-            </Link>
+            <span
+              className={`${STYLES_MENU_BUTTON} ${STYLES_MENU_BUTTON_IS_MOBILE}`}
+              onClick={this.props.onShowMenu}>
+              <MenuIcon />
+            </span>
           )}
 
           {this.props.isMenuActive && (
-            <span className={STYLES_DISMISS_BUTTON} onClick={() => window.history.back()}>
+            <span
+              className={`${STYLES_MENU_BUTTON} ${STYLES_MENU_BUTTON_VISIBLE}`}
+              onClick={this.props.onHideMenu}>
               <DismissIcon />
             </span>
           )}

components/DocumentationPage.js

@@ -37,6 +37,10 @@ const mutateRouteDataForRender = data => {
 };
 
 export default class DocumentationPage extends React.Component {
+  state = {
+    isMenuActive: false,
+  };
+
   componentDidMount() {
     Router.onRouteChangeStart = () => {
       window.NProgress.start();
@@ -61,6 +65,18 @@ export default class DocumentationPage extends React.Component {
     }
   };
 
+  _handleShowMenu = () => {
+    this.setState({
+      isMenuActive: true,
+    });
+  };
+
+  _handleHideMenu = () => {
+    this.setState({
+      isMenuActive: false,
+    });
+  };
+
   render() {
     const canonicalUrl = `https://docs.expo.io${Utilities.replaceVersionInUrl(
       this.props.url.pathname,
@@ -81,32 +97,38 @@ export default class DocumentationPage extends React.Component {
     const headerElement = (
       <DocumentationHeader
         pathname={this.props.url.pathname}
-        activeVersion={this.version}
+        version={this.version}
+        isMenuActive={this.state.isMenuActive}
+        isAlogiaSearchHidden={this.state.isMenuActive}
         onSetVersion={this._handleSetVersion}
+        onShowMenu={this._handleShowMenu}
+        onHideMenu={this._handleHideMenu}
       />
     );
 
     const sidebarElement = (
-      <DocumentationSidebar
-        url={this.props.url}
-        asPath={this.props.asPath}
-        routes={routes}
-        activeVersion={this.version}
-      />
+      <DocumentationSidebar url={this.props.url} asPath={this.props.asPath} routes={routes} />
     );
 
     return (
-      <DocumentationPageLayout header={headerElement} sidebar={sidebarElement}>
+      <DocumentationPageLayout
+        header={headerElement}
+        sidebar={sidebarElement}
+        isMenuActive={this.state.isMenuActive}>
         <Head title={`${this.props.title} - Expo Documentation`}>
           {version === 'unversioned' && <meta name="robots" content="noindex" />}
           {version !== 'unversioned' && <link rel="canonical" href={canonicalUrl} />}
         </Head>
 
-        <div className={STYLES_DOCUMENT}>
-          <H1>{this.props.title}</H1>
-          {this.props.children}
-          <DocumentationFooter />
-        </div>
+        {!this.state.isMenuActive ? (
+          <div className={STYLES_DOCUMENT}>
+            <H1>{this.props.title}</H1>
+            {this.props.children}
+            <DocumentationFooter />
+          </div>
+        ) : (
+          <DocumentationSidebar url={this.props.url} asPath={this.props.asPath} routes={routes} />
+        )}
       </DocumentationPageLayout>
     );
   }

components/DocumentationPageLayout.js

@@ -46,7 +46,7 @@ export default props => {
     <div className={STYLES_CONTAINER}>
       <div className={STYLES_HEADER}>{props.header}</div>
       <div className={STYLES_CONTENT}>
-        <div className={STYLES_LEFT}>{props.sidebar}</div>
+        {!props.isMenuActive ? <div className={STYLES_LEFT}>{props.sidebar}</div> : undefined}
         <div className={STYLES_RIGHT}>{props.children}</div>
       </div>
     </div>

components/VersionSelector.js

@@ -80,12 +80,12 @@ export default class VersionSelector extends React.Component {
     return (
       <div className={STYLES_SELECT} style={this.props.style}>
         <label className={STYLES_SELECT_TEXT} htmlFor="version-menu">
-          {this.props.activeVersion} <ChevronDownIcon style={{ marginLeft: 8 }} />
+          {this.props.version} <ChevronDownIcon style={{ marginLeft: 8 }} />
         </label>
         <select
           className={STYLES_SELECT_ELEMENT}
           id="version-menu"
-          value={this.props.activeVersion}
+          value={this.props.version}
           onChange={e => this.props.onSetVersion(e.target.value)}>
           {orderVersions(VERSIONS)
             .map(version => {

pages/mobile-navigation.js

@@ -65,10 +65,6 @@ app.prepare().then(() => {
     server.use(compression());
   }
 
-  server.get('/mobile-navigation/:version', (req, res) => {
-    app.render(req, res, '/mobile-navigation', { version: req.params.version });
-  });
-
   // NOTE(jim): Mutations have to line up with FS paths provided by mdjs.
   server.get('/versions/:version', (req, res) => {
     const { query } = parse(req.url, true);