Modify the top navbar to be less full

[kelset]

This is a follow-up to a conversation that happened in the RN Discord; I saw the Flutter website having a clean and organised navbar and I wondered if that could have been replicated for the RN website.

Luckily, as pointed out by @slorber, Docusaurus supports this dropdown behaviour directly: https://docusaurus.io/docs/next/api/themes/configuration#navbar-dropdown

so the changes are fairly minimal, from a code perspective.

What I ended up doing for this first iteration is to group under "development" the 4 elements (in alphabetical order) "Architecture", "API", "Components", "Guides" and then re-add to the navbar the "Showcase" element.

Here are a few screenshots to show the result:

(but also ofc verify via the deployed preview)

---

A potential "second iteration" of this idea might make a second "dropdown" that could be something like "Community" -> "Get Help", "Events", "Contributing" or something along those lines... but first the get-help page needs a big update (it really needs one) and the confs stuff would have to be split out from that. Again, I'm just thinking out loud atm.

[netlify[bot]]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	c65eece54092fb3027e45187aab1e65f4d1ecc17
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/6324463ccd66520008bcfeb8
😎 Deploy Preview	https://deploy-preview-3177--react-native.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 settings.

[slorber]

Looks nice, just wondering if you don't want to keep the blue bottom border for consistency?

If you want to keep that, I'm not sure we provide something for it atm.

[kelset]

Looks nice, just wondering if you don't want to keep the blue bottom border for consistency?

I don't have a strong opinion about that; also, it doesn't appear to be there when on the main page?

So I don't think there's a consistency problem

[kelset]

or did you mean the bottom blue border for when you are in any of the "developer" areas? I just realized that border seems to be there only when you are on that area/page

[slorber]

I mean the blue bottom border now doesn't exist anymore.

Maybe it's not a big deal, just wanted to mention that fact.

I'm not sure it's expected that a dropdown has such a bottom border anyway 🤷‍♂️

[kelset]

update: I've updated the PR to re-order the elements in the Development section has @Simek suggested, and updated a few CSS lines so that the menu in both small and big navbar look consistent.

From my perspective I think this can go in as is - and I'd like to then follow up on the idea that was tossed around a bit about doing a second one for Community section based on a few conversations we've been having (also, I just realized that the RN Directory is not linked anywhere? So it'd be good to have it in the Community section). But that would be a follow up PR so that it'd benefit from the CSS changes.

[kelset]

(quick reference here - this PR is frozen and we'll get back to this after https://github.com/facebook/react-native-website/pull/3235 is merged)

[lunaleaps]

Couple of feedback items

1. Right now there is a mismatch of the title under "Development" and the title on the left-hand bar. Mismatch of "Guides" and "The Basics", APIs vs API. True, this is unrelated to this change, but I think now that we're not displaying what "doc" you're actively under (since it's in the dropdown) we should have some consistency for the titles. I prefer keeping the titles:
   • Guides
   • Components
   • APIs
   • Architecture (unchanged)
2. In hamburger menu, when you're on one of the "Development" sub-pages, we don't auto un-collapse "Development" to show that you're under there. See in video how I had to click on "Development" title to see that I was under "Basics"? I think we should auto un-collapse that section if you're under one its sub-pages

https://user-images.githubusercontent.com/1309636/187266357-d941cca3-91dc-4bf6-8a38-66a82002feea.mp4

[kelset]

@lunaleaps about your point #1: I've tweaked API -> APIs, but for the Guides one (and the others) - there's a small misunderstanding. Guides is the "general area", and "The Basics" is one of the subcategories: see this screenshot:

[kelset]

about #2, I tried looking into the docusaurus config but couldn't find an option to manage the uncollapse. @slorber, @Simek do you have any ideas of how we could handle this? 🤔 I fear that it might be a limitation of Docusaurus in handling 2 level deeps navigation (development->guides->the basics)

That said, since it seems to me that it'd be a minor optimization for small screens I wouldn't consider it a blocker to get this PR merged.

[kelset]

(btw, I'd like to get https://github.com/facebook/react-native-website/pull/3328 merged first)

[kelset]

now that #3328 is merged I think this one is ready to do - @lunaleaps @Simek what do you think? (see my comments above about the requested changes)

[lunaleaps]

Looks good, I'll merge