feat(docs): Docs nav menu can be expanded

docs/assets/scripts/main.ts

@@ -1,6 +1,7 @@
 // import '@webcomponents/custom-elements';
 
 import { initGraphQlPlaygroundWidgets } from './graphql-playground-widget';
+import { initNavMenu } from './nav-menu';
 import { SearchWidget } from './search-widget';
 import { initTabs } from './tabs';
 import { TocHighlighter } from './toc-highlighter';
@@ -34,6 +35,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     initTabs();
+    initNavMenu();
     initGraphQlPlaygroundWidgets();
 
 }, false);

docs/assets/scripts/nav-menu.ts

@@ -0,0 +1,16 @@
+export function initNavMenu() {
+    const sections = document.querySelectorAll('nav li.section');
+    sections.forEach(makeExpandable);
+}
+
+function makeExpandable(section: Element) {
+    const icon = section.querySelector('.section-icon');
+    const sublist = section.querySelector('ul');
+
+    if (icon && sublist) {
+        icon.addEventListener('click', () => {
+            icon.classList.toggle('expanded');
+            sublist.classList.toggle('expanded');
+        });
+    }
+}

docs/assets/styles/_menu.scss

@@ -13,6 +13,12 @@
                 opacity: 0.5;
                 margin-left: -15px;
                 margin-right: 3px;
+                cursor: pointer;
+                transition: opacity 0.2s;
+
+                &:hover {
+                    opacity: 0.9;
+                }
 
                 &.expanded {
                     transform: rotateZ(180deg);

docs/assets/styles/main.scss

@@ -126,6 +126,12 @@ ul.contents-list {
     min-height: 80vh;
     flex: 1;
     padding: $padding-16 * 1.6;
+
+    figure {
+        img {
+            max-width: 100%;
+        }
+    }
 }
 
 .book-header {

docs/layouts/partials/docs/menu-filetree.html

@@ -10,7 +10,7 @@
     {{ $list := .Section.Sections }}
     {{ $list = $list | append .Section.Pages }}
     {{ range ($list.ByParam "Title").ByParam "Weight" }}
-        {{ if eq .Kind "section" }}
+        {{ if and (eq .Kind "section") (or (gt (len .Pages) 0) (gt (len .Sections) 0) ) }}
             <li class="section">
                 {{ $expanded := in $.CurrentPage .Permalink }}
                 <div class="section-link">