Dynamically render the navigation bar

[josephlewis42]

Currently, the navigation bar is generated for each document using a template. This leads to the following issues:

• The DevDocs CSS doesn't work quite right because we're using native HTML tags to collapse/expand content rather than JS. Ideally, we'd be able to use DevDocs CSS out of the box.
• Pages like the index and licenses are treated as special cases because that matches how they're done in DevDocs.
• The highlighted page doesn't change as you navigate through the structure on the same page because there's no JS to react to navigation changes.
• Each page in the ZIM has the full navigation tree embedded which causes significant size increases for navigation heavy documents.

Instead, we should dynamically generate the navbar using JS and some kind of optimized navigation intermediate representation in JSON that encodes all the special sorting and special case links that DevDocs does.

[benoit74]

Agreed, thank you for detailing the issue and plan!

[josephlewis42]

I'm working on this now. It's my first time using Vue2, WebComponents, and TypeScript together so there are a lot of learning opportunities!

[benoit74]

I hope you misspelled Vue2 and meant Vue3 ^^

If you did not already found it, you might be interested to have a look into https://github.com/openzim/youtube/tree/main/zimui or the soon-to-be-merged https://github.com/openzim/libretexts/tree/minimal_structure/zimui

Not that we are Vue3 experts at all, but this is our "state of the art" with our limited experience so far.