I am working on enabling navigation bar for the new documentation site. It will be available for the landing page as well as for all HTML guides. I figured out how to configure Asciidoctor to add HTML. Here is the prototype:
Now, because guides can get old and we would need to regenerate them on every release to have new menu items, I want to build the menu dynamically. Bit of JS will download a JSON file from our site that will hold all the menuitems and links and builds the menu.
This is where are need help from someone more skilled than me. In the example snippet, note the menu variable which contains an example JSON. I would like to build a code that will dynamically create the whole menu from the JSON data. Everything in the HTML page can be deleted leaving just the “Home” link available for those who have turn off JavaScript completely.
It works on mobile platofms too nicely, it creates a hamburger menu when the screen is too narrow. I would appreciate overall review of the code, this was taken from a YouTube video (link is in the description):
Please share your snippet with the solution and I will integrate it into the site
I will be more than happy for just providing an example how to do it and I can do the heavy lifting. I want the new look by end of this week
The only idea I have is to write to document DOM element by element, I was thinking maybe there is some plugin we could use or something. But if possible, let’s not introduce 200 npm modules to do this
I copied the files into the static folder,
added the script manually to index-foreman-el.html as document.write('<nav> <img class="logo" src................... </nav>) and right after that all of the click events just as a POC.
I didn’t handled yet with the json, but I believe that if you manage to add it to the static folder and load it before the nav script, than the whole json will be available to you, so it’s possible to iterate over it and build the navigation menu properly.
