Move site nav into a menu on smaller screens #234
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
andrewiggins
requested review from
gregwhitworth,
levithomason and
una
as code owners
andrewiggins
commented
Dec 3, 2020
| background-color: #666; | ||
| } | ||
|
|
||
| @media (max-width: 640px) { |
There was a problem hiding this comment.
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!
| const ContentWrapper = | ||
| frontmatter && frontmatter.path && frontmatter.path.startsWith('/components/') | ||
| ? ComponentLayout | ||
| : ({ children }) => <>{children}</> |
There was a problem hiding this comment.
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.
gregwhitworth
approved these changes
Dec 9, 2020
|
Thanks for this @andrewiggins - I filed the following to track other mobile site improvements. Feel free to recommend any others you've seen: #239 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
On screens up to 640px wide, the site navigation is moved into a menu that is toggled on click. For this PR, I wanted to keep it very simple to serve as a stop-gap (as suggested in #170) until the proposed re-design in #29 happens.
Some current limitations I'll tackle in future PRs
I'll add some additional context to specific changes in the comments below.
Related: #170