Work in progress on new navigation menu

_sass/_docsite.scss

@@ -29,9 +29,6 @@
 }
 
 .docsite-side-nav {
-  float: right;
-  width: auto;
-
   margin-left: 2rem;
   margin-top: 2rem;
   margin-right: 1rem;
@@ -54,6 +51,10 @@
   }
 }
 
+.docsite-side-nav-ul {
+  margin-left: 1rem;
+}
+
 .docsite-side-nav-selection {
   font-weight: bold;
 
@@ -71,18 +72,58 @@
   top: var(--docsite-header-size);
   --scripted-sidebar-nudge: 300px;
   height: calc(100vh - var(--docsite-header-size) - var(--scripted-sidebar-nudge));
-  overflow-x: hidden;
-  overflow-y: auto; /* show a scrollbar when needed */
+  overflow-x: auto;
+  overflow-y: auto;
 
   padding: 0;
   margin: 0;
 }
 
-.docsite-sidebar-placeholder {
+#docsite-sidebar-placeholder {
   // Ensure this is rendered behind the docsite-sidebar
   z-index: -1000;
 }
 
+.navtree-li {
+  white-space: nowrap;
+}
+
+.navtree-li-expanded {
+  cursor: pointer;
+}
+
+.navtree-li-collapsed {
+  cursor: pointer;
+}
+
+.navtree-ul-expanded {
+  margin-left: 1rem;
+}
+
+.navtree-ul-collapsed {
+  display: none;
+}
+
+.navtree-expander {
+  fill: $gray-600;
+  width: 8px;
+  height: 8px;
+  margin-right: 3px;
+
+  top:50%;
+  margin-top: -5px;
+}
+
+.navtree-li-expanded > .navtree-expander {
+  transition: transform .15s ease-in-out;
+  transform: rotate(90deg);
+}
+
+.navtree-li-collapsed > .navtree-expander {
+  transition: transform .15s ease-in-out;
+  transform: rotate(0deg);
+}
+
 // When clicking a "jump link" to an anchor within the page, shift the target downwards to account for the
 // docsite header (which is floating above the page)
 :target::before {

scripts/docsite.ts

@@ -0,0 +1,105 @@
+
+
+console.log('Starting docsite.js');
+
+interface IJsonNode {
+  title: string;
+  url?: string;
+  subitems: IJsonNode[];
+}
+
+interface INode {
+  liElement: HTMLElement;
+  childNodes: INode[];
+
+  // defined if childNodes.length > 0
+  ulElement: HTMLElement | undefined;
+
+  // defined if the group is expanded
+  expanded: boolean;
+}
+
+const rootNodes: INode[] = [];
+
+function updateNavNode(node: INode): void {
+  if (node.ulElement) {
+    if (node.expanded) {
+      node.liElement.className = 'navtree-li navtree-li-expanded';
+      node.ulElement.className = 'navtree-ul-expanded';
+    } else {
+      node.liElement.className = 'navtree-li navtree-li-collapsed';
+      node.ulElement.className = 'navtree-ul-collapsed';
+    }
+  } else {
+    node.liElement.className = 'navtree-li';
+  }
+}
+
+function renderNavNodes(nodes: INode[], jsonNodes: IJsonNode[], parentUlElement: HTMLElement): void {
+
+  for (const jsonNode of jsonNodes) {
+    const expandable: boolean = jsonNode.subitems && jsonNode.subitems.length > 0;
+
+    const liElement: HTMLElement = document.createElement('li');
+
+    if (expandable) {
+      liElement.innerHTML = '<svg class="navtree-expander"><use xlink:href="#icon-expander"></use></svg>';
+    } else {
+      liElement.innerHTML = '<svg class="navtree-expander"></svg>';
+    }
+
+    liElement.append(jsonNode.title);
+
+    parentUlElement.appendChild(liElement);
+
+    const node: INode = {
+      liElement: liElement,
+      childNodes: [],
+      ulElement: undefined,
+      expanded: false
+    };
+    nodes.push(node);
+
+    if (expandable) {
+      const ulElement: HTMLElement = document.createElement('ul');
+      node.ulElement = ulElement;
+      parentUlElement.appendChild(ulElement);
+
+      renderNavNodes(node.childNodes, jsonNode.subitems, ulElement);
+    }
+
+    updateNavNode(node);
+
+    if (expandable) {
+      liElement.onclick = () => {
+        node.expanded = !node.expanded;
+        updateNavNode(node);
+      };
+    }
+
+  }
+}
+
+function renderNavTree(): void {
+  console.log('Starting renderNavTree()');
+
+  fetch('/assets/nav_api.json')
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(jsonNodes: IJsonNode[]) {
+      console.log(JSON.stringify(jsonNodes));
+
+      let navRootUl = document.getElementById('nav-root-ul');
+
+      renderNavNodes(rootNodes, jsonNodes, navRootUl);
+
+      console.log('End renderNavTree()');
+    })
+    .catch(function(e) {
+      console.log('ERROR: Failed to fetch navigation: '+ e.toString());
+    });
+}
+
+window.addEventListener("load", renderNavTree);
+console.log('End docsite.js');