Sidebar navigation tweaks

[Mark-H]

The sidebar navigation is looking sharp, but a bit cluttered as we have so much content.

I'm thinking that to improve it, we should:

• Hide child pages by default, unless the parent is active, or when the child pages are toggled by an arrow/toggler indicator on the left of the parent.
• Not make parent items bold. The toggler for child pages serves as indication that there are subpages
• On page render, scroll/focus the sidebar on the active page (if any); especially necessary for really long menus like extras and system settings
• Double check the active state. Right now it seems that the active blue color is on all parent/child links. Perhaps when we remove bold from the parent items, we can instead use bold for the active hierarchy? [This may need fixes in the application code to apply the right classes]

Could also style it more like accordions, but I don't think that fits the current style all that well.

[Ibochkarev]

@Mark-H https://tailwindcss.com/docs/what-is-tailwind/ - example

[LucyI]

A lot of this could be handled by tocbot I think. All you need are IDs on the headings and it takes care of the rest. And once the sidebar is following you as you scroll, it might be ok to have all levels open/displayed. Also might be able to flatten it all somewhat - it seems a bit arbitrary why some content is a child page and some isn't. Limiting the number of levels would be good... https://tscanlin.github.io/tocbot/

Agree about the bold parent elements -- makes them seem more important than equal but childless headings, and so the hierarchy doesn't scan well.

I'm happy to look at the SCSS file, or take a deep dive into the overall content structure -- not sure if someone else is already on top of those things.

[Mark-H]

We already have an autogenerated TOC in the right sidebar that works similar to tocbot - I meant this topic to be about the navigation in the left sidebar :)

Any content that should or should not be broken up into separate pages, we can definitely do that and issues/PRs about the specific pages you think should (not) be combined would be more than welcome. The content is in modxorg/Docs, in markdown.

The sass is in this repository, in public/template. See the readme there for the compilation scripts.

[LucyI]

I was talking about the left nav too. Had not really noticed the right one! What is the thinking behind having two? Is it possible to combine all functions to the left? Seems confusing to have two TOCS, and on different sides of the content. Just thinking out loud...

[Mark-H]

Left is navigation (e.g. sitemap), right is table of contents for current page.

[JoshuaLuckers]

On page render, scroll/focus the sidebar on the active page (if any); especially necessary for really long menus like extras and system settings

Having this would be very much appreciated!