Simplified Sidebar

[juanbiltes]

Description

I just saw the new docs and loved them, docs are so much easier to read ❤️. I noticed there are many first level categorizations which makes it a little bit harder to read them as a continuos flow. "The basics" was a total blast to read continuosly but after it I felt I had to start jumping around a bit to continue the lecture, this aims to solve that.

The sidebar would end up looking like this:

Collapsed	Expanded

Changes

• Moved "Network" into "The Basics"
• Moved "Troubleshooting" from "The Basics" to "Environment Setup"
• Added titles to "Using List Views" readme (easier to classify the contents it has)
• Removed "Design", "Interaction", "Accessibility" and "Performance" from first level and moved it instead into "Guides"
• Moved "Hermes" into "Performance" due to its content
• Moved timers out of "Javascript Environment" and placed it instead as a "Guide" since before it obfuscated finding it and it's a common feature at least from a userland perspective
• Added styles for subgroups to ease classification

TBD

• I'm not entirely sure of the first level title "Guides". Let me know what you think, I also thought of "Advanced" or "Excel" (which is used by next here)

Hope it helps :)

[nearestnabors]

I really love that you put so much care and thought into this! But I gotta say, the decision to move everything into its current setup was based on feedback from user interviews where folks were struggling to find content we already had that was hidden under "guides." We want to try the new, topical sidebar out for a bit and see if that increases the discoverability of the pages once lumped under "guides."

All the same, I would love if you could tell me more about how you started jumping around. Perhaps you could share a screen recording with me where you explain what your flow was like and where you started hopping off? That would be incredibly useful and valuable to our ever-continuing efforts on the docs!

[juanbiltes]

@rachelnabors thanks!
That feedback makes a lot of sense, the docs had almost no classification before:

For someone who's not entirely sure what they're looking for, it's really hard to find something, you either get caught up reading the titles and get lost, or you get frustrated after reading a few docs that don't contain what you're trying to find.

Whether this PR get's merged or not, this has already changed and it's so much better now since we have the classification per topics and devs can now know which docs might contain the contents they want 🙌
This PR is really a small change, the big work has been done on this.

---

What I wanted to tweak a bit was the flow of the docs.

• There were some docs that while not being "basics" they were as important and interesting for me to read (those are the ones that I've placed under the so wrongly title "Guides"). I'll try to explain this better:
  In "The Basics" I learn about the elements I'll use in an app (the html elements let's say), the intuitive part for me as a webdev is to continue reading about styling but in the middle there were these docs:
  • Troubleshooting (which I'll look for if I encounter an issue, it's not a doc about learning to debug or tutorial as the rest of "the basics", which broke the flow and I tried to skip it)
  • Platform Specific Code (could be basic, it definitely is important, but really as a new dev I'd much rather follow understanding how to style an app and then get into this)
  • Environment setup section. I'll use it just a few times when starting a project, then I'll just skip it always, I wanted to get it out of my way. I thought about getting it before "The Basics" or further below (take this one with a grain of salt, it wasn't such an issue)
  • Workflow section. There were one or two which were interesting such as "Debugging" and "Running on device" but again, I wanted to read about other things first. It also has some contents which I'm totally not interested in such as "Using TypeScript with React Native" or "Upgrading to new React Native versions" and these are before more simple contents.
    And then I got to the Design section 😄

Styling, interaction, accessibility and performance are all as "must read" as "the basics" for understanding what react native is about, but the mentioned docs were sort of "in the middle". All these docs conform an extension of the basics and a category as "Guides" or "Advanced" groups them as such. Try it as newcomer, I really think it helps to continue that flow that the basics have and devs won't get lost since everything is grouped per topic

---

tl;dr: some docs are an extension of the basics but their order gets mixed with ones that are more case specific (like troubleshooting or setting up), this PR tries to group the general concepts together and move the more case specific ones into other categories