Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move site nav into a menu on smaller screens #234

Merged
merged 4 commits into from
Dec 9, 2020
Merged

Move site nav into a menu on smaller screens #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
84c3b33
Add basic mobile menu implementation
andrewiggins Dec 1, 2020
490df76
Prevent re-building the page content DOM on layout rerender
andrewiggins Dec 1, 2020
d2ccaac
Add community links to mobile nav
andrewiggins Dec 3, 2020
b233341
Merge branch 'master' into mobile-menu
andrewiggins Dec 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions research/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
23 changes: 23 additions & 0 deletions research/src/components/community-links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
84 changes: 83 additions & 1 deletion research/src/components/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I chose 640px semi-randomly (I just used the various device emulations devtools has to see what looked good on that sampling of devices). I imagine people here have done much more research on this so feedback here would be appreciated!

.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;
Expand Down Expand Up @@ -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;
}

Expand Down
29 changes: 15 additions & 14 deletions research/src/components/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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>
)
Expand Down
30 changes: 14 additions & 16 deletions research/src/components/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}</>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line was effectively creating a new component on each render of Layout, causing React to rebuild the page each time the menu was toggled. Fixed it by just rendering children directly instead of wrapping them in a function.

const { frontmatter } = pageContext || {}
const useComponentLayout = frontmatter?.path?.startsWith('/components/') ?? false

return (
<StaticQuery
Expand All @@ -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>
Expand Down
9 changes: 6 additions & 3 deletions research/src/components/navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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={{
Expand Down
12 changes: 12 additions & 0 deletions research/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down