-
Notifications
You must be signed in to change notification settings - Fork 114
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.
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
Header Component (initial responsive styles) #12
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this looks great! what a hamburger
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see it just merged so I'll just place these as comments.
transition: 0.18s; | ||
} | ||
|
||
&.HamburgerMenu__open { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Following suit naming conventions this would be .is-open
as a state classname.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you. I was unsure how best to name this class. I'll update it in a PR shortly.
nav.nav--main { | ||
width: 100%; | ||
height: auto; | ||
&.Header--main__menuOpen nav { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here with the suit naming convention.
className={cx('HamburgerMenu', { HamburgerMenu__open: open })} | ||
onClick={() => toggle()} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like the flow.
🎉 This PR is included in version 1.0.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Description
First pass at adding the mobile styles for the header / navigation component.
We will want to revisit this once we have final designs and direction around animations.
Related Ticket(s)
Screenshot(s)