Added hook for ham menu functionality #19
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
arnavb
requested changes
Sep 22, 2020
|
Sure. Any particular way you'd like me to achieve that? |
|
I think adding a CSS transition to the active class would be the best approach. This issue has some examples. |
|
I think CSS is too messy, IMO, especially with a pre-existing library. React has plenty of animation libraries, though. I'll just stop here. You can either accept my PR or just close it. Sorry about that. |
arnavb
requested changes
Sep 24, 2020
There was a problem hiding this comment.
As far as CSS transition goes, it really isn't going to bloat anything since it's just simple code to add (I wrote the code below by tweaking the code from that issue a little bit). Try doing something similar and adding it. In contrast to what you said, a React transition library will add much more bloat than just 2 CSS rule blocks.
.navbar-menu {
display: block;
opacity: 0;
position: absolute;
left: 0;
right: 0;
transform: translateY(-100%);
transition: all 0.2s cubic-bezier(0.3, 0.01, 1, -0.09);
pointer-events: none;
}
.navbar-menu.is-active {
opacity: 1;
transform: none;
pointer-events: auto;
}
arnavb
approved these changes
Sep 24, 2020
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.
Edit: Fixes #18
The menu is implemented with toggle functionality and works as expected. No need for custom JS — possible with a
useStatehook