Update Nav design

[julieg18]

• Updated nav design based off Figma design in Setup Universal Header/Footers #2440
• I also edited the mobile menu since the tabbing wasn't working correctly.
• There is some crowding in between screen size changes. I lowered the margins in some places to keep the crowding as small as possible but if you have any suggestions to improve it, please let me know!
• Since there were no focus/active styles on Figma, I just went with I thought matched the site styles originally but let me know if any the styles should be changed!
  Fixes Setup Universal Header/Footers #2440

[julieg18]

Looks like I'll need to do some refactoring with the nav and the header popup JSX to correct the code climate errors. I'll get on it as soon as I can!

[julieg18]

I used CSS to take off the nav items, but we could also use JS to check for screen overflow and take off the items with JS.

[julieg18]

Should we close the popups if a user clicks on one of the popup links? 🤔

[arcticbear]

Should we close the popups if a user clicks on one of the popup links? 🤔

Good question. For example, in the case when a user opened a popup and with Cmd/Ctrl + clicking on links to open them in the separate tabs it would be useful to keep the popup opened after every click. But in the case of single clicks, we should close the popup, especially when we open a new page in the current tab.

[rogermparent]

But in the case of single clicks, we should close the popup, especially when we open a new page in the current tab.

On top of that, the Community menu is all links to different headers within the same page. I think we'll want to dismiss the menu on click there as well, since I don't see users wanting to go through multiple headers in one opening of the menu.

[shcheklein]

Is it only me, or it looks too heavy with this font size/weight and so many items? (it take almost of all my screen and fonts size is close to some headers on the page?)

[rogermparent]

Is it only me, or it looks too heavy with this font size/weight and so many items? (it take almost of all my screen and fonts size is close to some headers on the page?)

Agreed, this is particularly noticeable at >1000px width, but even the breakpoint below seems a tad heavy.

[julieg18]

Is it only me, or it looks too heavy with this font size/weight and so many items? (it take almost of all my screen and fonts size is close to some headers on the page?)

Also agreed! What if we made another drop-down that held some of the other nav links on smaller screen sizes?🤔

[arcticbear]

Also, the links Community and Meet the community are similar I guess, they lead to the sections which very close to each other on the top of the same page. What do you think if we hide the second one and rename the first to Meet the community?

[julieg18]

Ok, I completed all of @arcticbear's comments and update the nav popups to close on link click!

[rogermparent]

I'd say the font sizes could be a little smaller as well, and I'm not too big a fan of having different sets of items available at different breakpoints- the current dvc.org displays either all items on the header or all items in the burger menu, which I think is a better way to handle display sizes. Now that I look at it, we'll also need to add "Other Tools" to the burger menu.

Alternatively, we could have a burger menu that handles all items not displayed on the header, likely by always having all items and only displaying the menu when any item is hidden.

If we decrease the font size, we can and should keep the tap targets 48px with padding or some other method of sizing, even if we must reduce the padding/margin of parent containers such that more of the total header area is tappable.

[shcheklein]

@arcticbear could you please find some time to review this? :)

[julieg18]

Just noticed that some of the footer svgs disappear when the popups disappear:

UPDATE
I turned the popup inline svgs to background images for now.

[rogermparent]

Looks good enough to me as a first iteration!