Add language options on mobile #95
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
added 10 commits
July 30, 2024 15:45
1 task
tkapa
approved these changes
Jul 31, 2024
There was a problem hiding this comment.
LGTM - After clarification from @jaydenalchin I think this solution has turned out well 👍
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.
Description
This PR updates the mega menu so you can switch between different versions (i.e. French, Chinese) of the site while on a mobile device. I've based the design on a concept designed by @bettybondoc. The search bar for mobile devices has been moved into the side bar so that the language options are immediately visible from the top of the screen.
TLDR: I converted the search box into a dumb component, moved it into the side navigation bar for mobile devices and moved the form state and logic into the main layout component.
Screenshots
Figure: Search window state preserved between desktop and mobile view
Figure: New resized window layout
Figure: New sidebar layout
Figure: New sidebar open layout
Figure: Performing a search using the responsive layout