docs: find a better place for "Extending LoopBack 4" in the sidebar [SPIKE]

[bajtos]

This is a follow-up to #5718, see also #5549.

Quoting from #5718 (comment)

As I see it, the first sections (up to "Reference guides") are for application developers.

The section "Extending LoopBack 4" is for people building extensions, that's why I prefer to keep it a kind of "outside" for docs for app developers. I think we should find new place for this documentation in the future, I'll open a follow-up issue to discuss this further.

Let's find a better way how to structure our documentation for application developers vs. extension developers.

Acceptance criteria

Propose a new organization of the sidebar and/or the doc website (we can e.g. move docs for extension authors to its own area/sidebar, as we have for LB2, LB3, contrib docs, etc.) Discuss the proposal with the team, reach consensus about the direction we want to take.

If the proposed version requires little effort, then open a pull request to make it happen. If it's more involved, then create well-defined follow-up stories.

[jannyHou]

• Most of the docs under "Tutorials", "How to guide" and "Concepts" belong to app developers, which simplifies this task a lot.
• Tutorials/Build large scale Node.js projects with LoopBack 4 should be a series of tutorials shared by both app and extension developers. So I would suggest either refer to it at the beginning of "Extending LoopBack 4", or duplicate it under "Extending LoopBack 4".
• The current layout doesn't distinguish the app development and extension development clearly. So I propose moving "How to guide", "Concepts", "Tutorials", "Best Practice" under a new section "Building Application"

The new sidebar would be:

And unfold it:

[raymondfeng]

I would prefer to minimize the number of clicks to access important pages. To my experience, more levels of nesting makes it even more difficult to see sub-titles as the site cannot automatically unfold sidebar items.

On the technical side, there are some pages that need to be read for both application and extension developers.

[jannyHou]

@raymondfeng

I would prefer to minimize the number of clicks to access important pages. To my experience, more levels of nesting makes it even more difficult to see sub-titles as the site cannot automatically unfold sidebar items.

I understand your concern. I figure out a way to show the drop-down items for "Building LoopBack 4 Application" and "Extending LoopBack 4" by default. When page loads, it looks like this:

And no matter how you click the subitems, that two ul always stay expanded. Would you accept this nested way? It won't hide the sub-items, they always display.

The trick is setting those two items as active(therefore expanded) all the time

Change it to

if pageurl.last == item.url or item.title == 'Building LoopBack 4 Application' or item.title == 'Extending LoopBack 4

in this line

On the technical side, there are some pages that need to be read for both application and extension developers.

Yes I agree, and the 2nd point in my proposal covers it I think. Or do you have more suggestions regarding the shared content?

[dhmlau]

I would prefer to minimize the number of clicks to access important pages. To my experience, more levels of nesting makes it even more difficult to see sub-titles as the site cannot automatically unfold sidebar items.

+1. Prefer not to have extra level to wrap the "building LoopBack application", regardless we find a way to expand certain sidebar items by default.

For "extending LoopBack 4", i assume the original sidebar items are kept unchanged and we're just adding tutorials in it?