feat: condensed sidebar list (microsoft#16)

* feat: styles

* feat(navigation): update sidebar

Author: arjunattam

src/main.js

@@ -210,6 +210,8 @@ window.addEventListener('DOMContentLoaded', async() => {
     }
     documentationView.focus();
     await glossaryItem.highlight();
+
+    // const selectedNav = glossaryItem
   });
 }, false);
 
@@ -221,10 +223,14 @@ function renderDocumentationSidebar(guidesFile) {
 
   function renderGuideItems(guideItem, header) {
     const name = guideItem.name().split(' > ').pop();
+    const className = header ? 'header' : '';
+    const headerElement = guideItem.url() ?
+      html`<a class="${className}" href="${guideItem.url()}">${name}</a>` :
+      html`<span class="header">${name}</span>`;
     if (!guideItem.childItems())
-      return html`<a class="${header ? 'header' : ''}" href="${guideItem.url()}">${name}</a>`;
+      return headerElement;
     return html`
-      <a class="${header ? 'header' : ''}" href="${guideItem.url()}">${name}</a>
+      ${headerElement}
       ${guideItem.childItems().map(item => renderGuideItems(item, false))}
     `;
   }

src/markdownFile.js

@@ -52,31 +52,36 @@ export class MarkdownFile {
   static parseDocumentationList({version, path, doc}) {
     const glossaryItems = [];
     const articleElement = html`<markdown-content>${doc}</markdown-content>`;
-    dfs(doc, null);
+    dfs(toc(doc), null);
     return new MarkdownFile(version, path, MarkdownFile.Type.DOCUMENTATION_LIST, glossaryItems);
 
+    function toc(element) {
+      // Table of contents is an `ol` on the page
+      return html`<markdown-content>${element.querySelector(':scope > ol')}</markdown-content>`;
+    }
+
     function dfs(element, parentItem) {
-      const lists = element.querySelectorAll(':scope > ul, :scope > ol');
+      const lists = element.querySelectorAll(':scope > ol, :scope > ul');
       for (const list of lists) {
         for (const li of list.querySelectorAll(':scope > li')) {
-          const a = li.querySelector(':scope > a');
-          if (!a || !a.href)
-            continue;
+          let el = li.querySelector(':scope > a') ? li.querySelector(':scope > a') : li;
           const parentText = parentItem ? parentItem.name() + ' > ' : '';
-          const nameElement = html`${parentText}<strong>${a.textContent}</strong>`;
+          // If el is li, title needs to exclude textContent from child links
+          const title = el.childNodes[0].textContent.trim();
+          const nameElement = html`${parentText}<strong>${title}</strong>`;
           const item = new GlossaryItem({
-            githubLink: a.href,
+            githubLink: el.href,
             parentItem,
             highlightable: false,
             articleElement,
             element: null,
             scrollAnchor: null,
-            url: a.hash,
+            url: el.hash,
             name: nameElement.textContent,
             needleIndexes: computeNeedleIndexes(nameElement),
             nameElement,
             description: null,
-            title: a.textContent,
+            title,
             type: GlossaryItem.Type.Other,
           });
           glossaryItems.push(item);

src/style.css

@@ -163,7 +163,7 @@ external-link-icon {
   color: var(--link-color);
 }
 
-.sidebar-body > a.header {
+.sidebar-body > .header {
   color: black;
   font-size: 18px;
   margin: 15px 0 5px 0;