Move site nav into a menu on smaller screens (#234)

* Add basic mobile menu implementation Pages that are not responsive: * Component Name Matrix * Select Propsals * Checkbox Propsals Also, component name matrix is really slow to show menu. React is hogging the main thread. Also, the mobile menu won't show until the client-side React render happens, siiighh. This is blocked by a >1MB download of JS (mostly inlined images). siiggh * Prevent re-building the page content DOM on layout rerender * Add community links to mobile nav
openui · Dec 9, 2020 · 0788ecd · 0788ecd
1 parent f305abe
commit 0788ecd
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 34 deletions.
diff --git a/research/package.json b/research/package.json
@@ -45,6 +45,7 @@
     "@emotion/core": "^10.0.28",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.9",
     "@mdx-js/mdx": "^1.5.8",
     "@mdx-js/react": "^1.5.8",

diff --git a/research/src/components/community-links.js b/research/src/components/community-links.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
+
+export default function CommunityLinks({ githubURL, className = '' }) {
+  return (
+    <div className={'community-links ' + className}>
+      <a href={githubURL} target="_blank" rel="noreferrer noopener" style={{ color: 'inherit' }}>
+        <FontAwesomeIcon style={{ marginRight: '0.2em' }} icon={faGithub} /> GitHub
+      </a>
+
+      <a
+        href="https://discord.gg/DEWjhSw"
+        target="_blank"
+        rel="noreferrer noopener"
+        style={{ color: 'inherit' }}
+      >
+        <FontAwesomeIcon style={{ marginRight: '0.2em', marginLeft: '1em' }} icon={faDiscord} />{' '}
+        Discord
+      </a>
+    </div>
+  )
+}
diff --git a/research/src/components/global.css b/research/src/components/global.css
@@ -1,3 +1,84 @@
+/*       Header     */
+.header-menu-btn[type='button'] {
+  display: none;
+  padding: 0.25em 0.5em;
+  appearance: none;
+  border: 0;
+  background: none;
+  color: white;
+  cursor: pointer;
+}
+
+.header-menu-btn[type='button']:hover {
+  background-color: #666;
+}
+
+@media (max-width: 640px) {
+  .header-menu-btn[type='button'] {
+    display: block;
+  }
+}
+
+/*    Page Wrapper  */
+
+.page-wrapper {
+  display: flex;
+  padding: 0 1rem;
+  margin: 0 auto;
+  max-width: 1200px;
+}
+
+@media (max-width: 640px) {
+  .page-wrapper {
+    flex-direction: column;
+  }
+}
+
+/*      Community Links    */
+.community-links {
+  display: block;
+}
+
+.community-links.mobile {
+  display: none;
+  justify-content: space-around;
+  margin-bottom: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .community-links {
+    display: none;
+  }
+
+  .community-links.mobile {
+    display: flex;
+  }
+}
+
+/*      Site Nav    */
+#site-nav {
+  margin-right: 2em;
+}
+
+#site-nav > ul {
+  position: sticky;
+}
+
+@media (max-width: 640px) {
+  #site-nav {
+    display: none;
+    margin-right: 0;
+  }
+
+  #site-nav > ul {
+    position: static;
+  }
+
+  #site-nav.opened {
+    display: block;
+  }
+}
+
 /*      AnchorJS    */
 .anchorjs-link {
   color: #aaa;
@@ -37,7 +118,8 @@ table.nowrap-first-column td:nth-child(1) {
   white-space: nowrap;
 }
 
-table.research td.center, table.research th.center {
+table.research td.center,
+table.research th.center {
   text-align: center;
 }
 

diff --git a/research/src/components/header.js b/research/src/components/header.js
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Logo from './logo'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faBars } from '@fortawesome/free-solid-svg-icons'
+import Logo from './logo'
+import CommunityLinks from './community-links'
 
-const Header = ({ siteTitle, githubURL }) => (
+const Header = ({ siteTitle, githubURL, menuOpened, onToggleMenu }) => (
   <header
     style={{
       background: '#333',
@@ -27,19 +28,19 @@ const Header = ({ siteTitle, githubURL }) => (
         <Logo siteTitle={siteTitle} />
       </span>
 
-      <a href={githubURL} target="_blank" rel="noreferrer noopener" style={{ color: 'inherit' }}>
-        <FontAwesomeIcon style={{ marginRight: '0.2em' }} icon={faGithub} /> GitHub
-      </a>
+      <CommunityLinks githubURL={githubURL} />
 
-      <a
-        href="https://discord.gg/DEWjhSw"
-        target="_blank"
-        rel="noreferrer noopener"
-        style={{ color: 'inherit' }}
+      <button
+        type="button"
+        className="header-menu-btn"
+        aria-label="Toggle menu"
+        title="Toggle menu"
+        onClick={onToggleMenu}
+        aria-expanded={menuOpened ? 'true' : 'false'}
+        aria-controls="site-nav"
       >
-        <FontAwesomeIcon style={{ marginRight: '0.2em', marginLeft: '1em' }} icon={faDiscord} />{' '}
-        Discord
-      </a>
+        <FontAwesomeIcon icon={faBars} size="lg" />
+      </button>
     </div>
   </header>
 )

diff --git a/research/src/components/layout.js b/research/src/components/layout.js
@@ -56,12 +56,11 @@ const components = {
 }
 
 const Layout = ({ children, pageContext }) => {
-  const { frontmatter } = pageContext || {}
+  const [opened, setOpen] = React.useState(false)
+  const onToggleMenu = React.useCallback(() => setOpen((opened) => !opened), [setOpen])
 
-  const ContentWrapper =
-    frontmatter && frontmatter.path && frontmatter.path.startsWith('/components/')
-      ? ComponentLayout
-      : ({ children }) => <>{children}</>
+  const { frontmatter } = pageContext || {}
+  const useComponentLayout = frontmatter?.path?.startsWith('/components/') ?? false
 
   return (
     <StaticQuery
@@ -82,19 +81,18 @@ const Layout = ({ children, pageContext }) => {
             <Header
               siteTitle={data.site.siteMetadata.title}
               githubURL={data.site.siteMetadata.githubURL}
+              menuOpened={opened}
+              onToggleMenu={onToggleMenu}
             />
-            <div
-              style={{
-                display: 'flex',
-                padding: '0 1rem',
-                margin: '0 auto',
-                maxWidth: '1200px',
-              }}
-            >
-              <Navigation style={{ marginRight: '2em' }} />
+            <div className="page-wrapper">
+              <Navigation opened={opened} githubURL={data.site.siteMetadata.githubURL} />
 
-              <div style={{ flex: '1 1 auto', minWidth: 0 }}>
-                <ContentWrapper frontmatter={frontmatter}>{children}</ContentWrapper>
+              <div className="page-content" style={{ flex: '1 1 auto', minWidth: 0 }}>
+                {useComponentLayout ? (
+                  <ComponentLayout frontmatter={frontmatter}>{children}</ComponentLayout>
+                ) : (
+                  children
+                )}
               </div>
             </div>
           </div>

diff --git a/research/src/components/navigation.js b/research/src/components/navigation.js
@@ -2,8 +2,9 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { StaticQuery, graphql, Link } from 'gatsby'
+import CommunityLinks from './community-links'
 
-const Navigation = ({ style }) => (
+const Navigation = ({ opened, githubURL }) => (
   <StaticQuery
     query={graphql`
       query NavigationQuery {
@@ -65,8 +66,10 @@ const Navigation = ({ style }) => (
       )
 
       return (
-        <nav style={style}>
-          <ul style={{ position: 'sticky', top: '1em', margin: 0 }}>
+        <nav id="site-nav" className={opened ? 'opened' : ''}>
+          <CommunityLinks githubURL={githubURL} className={'mobile'} />
+
+          <ul style={{ top: '1em', margin: 0 }}>
             <li
               key="Home"
               style={{

diff --git a/research/yarn.lock b/research/yarn.lock
@@ -1132,6 +1132,11 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
   integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
 
+"@fortawesome/fontawesome-common-types@^0.2.32":
+  version "0.2.32"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259"
+  integrity sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==
+
 "@fortawesome/fontawesome-svg-core@^1.2.28":
   version "1.2.28"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
@@ -1146,6 +1151,13 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.28"
 
+"@fortawesome/free-solid-svg-icons@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz#e1432676ddd43108b41197fee9f86d910ad458ef"
+  integrity sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.32"
+
 "@fortawesome/react-fontawesome@^0.1.9":
   version "0.1.9"
   resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz#c865b9286c707407effcec99958043711367cd02"