Add active state to top navigation #7933
Conversation
|
Hey Kurt! To quote myself (from my review of the other PR we got for this):
…so still 👍for getting this in as it is right now. For all of my ongoing .org nav redesign mocks (Figma), I've chosen the "2px underline" variant for now—that's the second option from the ones shown below:
I think any of those will work; the one I currently opted for most probably being the least clear of all options. What do you think? Any of those free us of the slight jumping connected to |
|
Any reason why you didn’t use getProps? |
|
@LekoArts fix for that coming |
|
@fk, let me play with styles a bit, I think we can prevent jumping when using bold, will also add underline |
|
Yay! Let's get this in! I saw a couple of things related to a change of the header height that this PR introduces (e.g. the sidebar in your last screenshot overlapping the bottom border of the header). I don't think this needs any changes to the active style itself btw! |
…(active nav state)) (#7995) * Use the palette * Backticks * Stop guesstimating presets.bannerHeight… and actually use it. :-) Also allow any amount of (one-line, scrolling overflow) copy in the banner. * use presets.bannerHeight to define the height of the banner component instead of deriving presets.bannerHeight from padding and font-size/line-height * don’t wrap white-space in banner copy and add horizontal overflow scrolling * slightly reduce banner height * Bring back fixed header height, fix its position being off * DRY * Fix left stop of banner mask-image * Refactor main navigation and a bunch of related things * add a couple of constants that should make the header CSS easier to follow * tidy up here and there, add „SocialNavItem“ component * bring back the header search’s icon which got lost somewhere along the way * refine search styles * properly align all header nav items and search input text so that their text sits on the same baseline as the logo wordmark * even out horizontal navItem margins * slightly update navItem hover style * remove all occurences where we substract 1px (e. g.`calc(100vh - ${presets.headerHeight} - 1px`) but really never needed to * fix superfluous whitespace above the header on the homepage
This PR implements active state for the top navigation of the www site. Currently it just sets the font weight of the active item bold, but any styles can be added to the
activeNavItemStylesobject insrc/components/navigation.js.I figured @fk would have some input based off the convo in #7425.
Closes #7425