Add Developers and About menus to site nav

[reefdog]

This PR reworks the Dropdown component to be useable with the site nav, and adds a Developers menu and an About menu:

menus.mov

Note: The PR appears large because of the refactor of Dropdown, and because of some seemingly-unrelated (but actually prerequisite) changes from the changes to the <code> element styling.

Also: Please do suggest any edits to the wording of the menu items! The About menu items — which are just the links from the landing page, made available globally — largely use the already-approved wording from the landing page. But suggestions still welcome there, and the Developers menu is totally new.

Testing:

• On main/production, note the lack of dropdown menus and the presence of the "Feedback" element in the navbar.
• In the deploy preview, note the presence of the Developers and About menus; the presence of the Storybook link in the Developers menu; the presence of the "Need an account?" item in the About menu; and that the Feedback item has been moved into the About menu.
• Locally, note the absence of the Storybook item in the Developers menu. (It's only present in environments where REACT_APP_SHOW_STORYBOOK=true, which is intended only to be the deploy preview environments.)
• After logging in locally, note the absence of the "Need an account?" item in the About menu.
• Verify that drop-downs still work, by going to any proposal page and opening the "Data providers" menu. (You don't need to actually load the data providers panel; just seeing the menu is sufficient.)

Closes #557
Closes #558
Closes #559

[netlify]

✅ Deploy Preview for philanthropy-data-commons-viewer ready!

Name	Link
🔨 Latest commit	4bfce8e
🔍 Latest deploy log	https://app.netlify.com/sites/philanthropy-data-commons-viewer/deploys/65d7d9eafd15740008ccba60
😎 Deploy Preview	https://deploy-preview-585--philanthropy-data-commons-viewer.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[slifty]

Neat! Looks great.

I'm approving, but there are some small UX things that don't directly relate to lines of code and please take or leave:

1. What would you think of removing closing punctuation from the link descriptions/ It seems a little odd but maybe that's just me
2. It'd be cool to have a bolder visual hierarchy between the link titles and descritpions (making the descriptions slightly lighter, smaller, or making the titles slightly larger) right now it's hard for me to know the actual links at a glance / the descriptions make it harder to satisfice.
3. When I have a drop down open would it be possible to allow me to swap to opening the other dropdown without having to click twice? e.g. right now:

(A) Click "About" (opens about dropdown)
(B) Click "Developers" (closes about dropdown)
(C) Click "Developers" again (opens developers dropdown)

Would be nice to have:

(A) Click "About" (opens about dropdown)
(B) Click "Developers" (closes about dropdown and opens develoeprs dropdown)

[reefdog]

Neat! Looks great.

🎉

1. What would you think of removing closing punctuation from the link descriptions/

My rule about closing punctuation on repeated elements is to (1) be consistent across all items in the set and (2) omit them if possible, but (3) don't awkwardly contort language.

I'd be happy to omit them from the descriptions, but some worked better with multiple sentences, so rule ① meant they all got them.

I welcome edits to improve the language in a way that lets us omit them, but sounds like this is a light request anyway and not worthwhile!

2. It'd be cool to have a bolder visual hierarchy between the link titles and descritpions (making the descriptions slightly lighter, smaller, or making the titles slightly larger) right now it's hard for me to know the actual links at a glance / the descriptions make it harder to satisfice.

Fair point! I intentionally mimicked the navbar link style for the titles, and I've lately been trying to minimize a visual hierarchy that ended up with inaccessible text sizes or contrasts. In this case my first pass actually did have the hierarchy you mentioned, but when I saw how relatively small the descriptions were, I reevaluated my biases to see if full-size/contrast text worked.

I thought it actually ended up surprisingly fine… but I acknowledge that's visually subjective. Does the accessibility argument help?

3. When I have a drop down open would it be possible to allow me to swap to opening the other dropdown without having to click twice? e.g. right now:

I grok and agree with this desire. Initially I thought the implementation of this would be too difficult, but… I think I just realized how to do it fairly easily! Will implement…

[reefdog]

@slifty Actually… the item 3 is indeed gonna be more difficult than I'd hoped. I'm going to lean on your approval and just put this off for another day!

Quick reason: our Dropdown component uses the neat trick of <details>/<summary> elements, which is actually what GitHub uses for some of its dropdowns (but — notably, I just discovered! — not those in its navbar). When the dropdown is open, the <summary> element (which is the trigger for opening/closing the dropdown) stretches an invisible overlay across the entire viewport, below the dropdown, so that clicking anywhere else on the page closes the dropdown. All sans JavaScript! (Yes, we are literally a JS-requiring React app, but I still believe in using native controls whenever possible, for further reasons I'm happy to discuss elsewhere.)

While there are all sorts of neat advantages to this implementation, one downside is you have to close the dropdown before using anything else.

I was hoping to change the behavior specifically for navbar dropdowns, and nearly got there, but started to domino issues and hit my timebox. Thus, will need to save it for complaints.