show navigation list titles

- show title (level 0) of navigation list
- add toggle button next to title of navigation list
- hide first level of list by default
- indent first level of list
- if navigation list has no title
  * don't output toggle button and text in HTML
  * automatically expand first level
  * align first level of list with other navigation list titles
- add title of component above navigation menu
- tighten spacing in navigation menu

diff --git a/src/css/navigation-menu.css b/src/css/navigation-menu.css
index 6dc2374..ddcd2bb 100644 (file)
--- a/src/css/navigation-menu.css
+++ b/src/css/navigation-menu.css
@@ -17,10 +17,27 @@ html.is-clipped--nav {
   flex-grow: 1;
   min-height: 0;
   /* QUESTION move padding to .navigation-menu? */
+  padding: 0.5rem 0.25rem;
+}
+
+.nav-menu h3.title {
+  margin: 0;
+  font-weight: 500;
+  color: #424242;
+  font-size: 1em;
   /*
-  padding: 0.5rem;
+  padding: 0.125em 0.75em 0.25em;
   */
-  padding: 0.4rem 0.5rem;
+  padding: 0.25em 0.75em;
+}
+
+.nav-menu a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.nav-menu a:hover {
+  text-decoration: underline;
 }
 
 .nav-list {
@@ -38,19 +55,21 @@ html.is-clipped--nav {
   align-items: flex-start;
   flex-wrap: wrap;
   list-style: none;
-}
-
-.nav-item .nav-item {
   padding-top: 0.25em;
 }
 
-.nav-item > .nav-list {
+.nav-item:not(.is-active) > .nav-list {
   display: none;
 }
 
-.nav-item[data-depth="0"] > .nav-list,
-.nav-item.is-active > .nav-list {
+/* matches list without a title */
+.nav-item[data-depth="0"] > .nav-list:first-child {
   display: block;
+  margin-left: 0;
+}
+
+.nav-item[data-depth="0"] > .nav-list:first-child > .nav-item:first-child {
+  padding-top: 0;
 }
 
 .nav-toggle {
@@ -58,11 +77,12 @@ html.is-clipped--nav {
   background-size: 85%;
   border: none;
   cursor: pointer;
-  font-size: inherit;
   height: 1.85em;
   outline: none;
   padding: 0;
-  width: 1em;
+  /* nudge font size and width to fix calculation error in Chrome */
+  font-size: 0.95em;
+  width: 1.0526em;
 }
 
 @media (min-width: 769px) {
@@ -81,11 +101,9 @@ html.is-clipped--nav {
 
 .nav-link,
 .nav-text {
-  color: inherit;
   display: inline-block;
   line-height: 1.85;
   margin-left: 1em;
-  text-decoration: none;
   padding-left: 0.25em;
 }
 
@@ -101,23 +119,7 @@ html.is-clipped--nav {
   font-weight: 500;
 }
 
-.nav-item[data-depth="0"] > .nav-link,
-.nav-item[data-depth="0"] > .nav-text,
-.nav-item[data-depth="0"] > .nav-list {
-  margin-left: 0;
-}
-
 .nav-toggle + .nav-link,
 .nav-toggle + .nav-text {
   margin-left: 0;
 }
-
-.nav-link:hover {
-  text-decoration: underline;
-}
-
-.nav-item[data-depth="0"] > .nav-link,
-.nav-item[data-depth="0"] > .nav-text {
-  padding-left: 0;
-  display: none; /* FIXME temporary */
-}

diff --git a/src/partials/navigation-menu.hbs b/src/partials/navigation-menu.hbs
index bee4fa1..02119fb 100644 (file)
--- a/src/partials/navigation-menu.hbs
+++ b/src/partials/navigation-menu.hbs
@@ -1,5 +1,6 @@
 <div class="navigation-menu is-active" data-panel="menu">
   <nav class="nav-menu">
+    <h3 class="title"><a href="{{relativize page.url page.component.url}}">{{page.component.title}}</a></h3>
 {{> navigation-tree navigation=page.navigation}}
   </nav>
 </div>

diff --git a/src/partials/navigation-tree.hbs b/src/partials/navigation-tree.hbs
index 95c31fc..2c73751 100644 (file)
--- a/src/partials/navigation-tree.hbs
+++ b/src/partials/navigation-tree.hbs
@@ -2,7 +2,8 @@
 <ul class="nav-list">
   {{#each navigation}}
   <li class="nav-item{{#if (eq @root.page.url ./url)}} is-current-page{{/if}}" data-depth="{{or ../level 0}}">
-    {{#if (and ../level ./items.length)}}
+    {{#if ./content}}
+    {{#if ./items.length}}
     <button class="nav-toggle"></button>
     {{/if}}
     {{#if ./url}}
@@ -12,6 +13,7 @@
     {{else}}
     <span class="nav-text">{{{./content}}}</span>
     {{/if}}
+    {{/if}}
 {{> navigation-tree navigation=./items level=(inc ../level)}}
   </li>
   {{/each}}