MarkBind · ang-zeyu · Jun 13, 2020 · Jun 11, 2020
diff --git a/asset/css/markbind.css b/asset/css/markbind.css
@@ -166,6 +166,8 @@ footer {
        spacing between itself and the boundaries of the menus
      */
     overflow-y: auto;
+    padding-left: 12px;
+    padding-right: 12px;
     padding-top: 1rem;
     top: 0;
 }

diff --git a/asset/css/page-nav.css b/asset/css/page-nav.css
@@ -12,7 +12,6 @@
 
 #page-nav .nav-inner {
     max-height: 90vh;
-    padding: 0 20px;
 }
 
 #page-nav a:link,

diff --git a/asset/css/site-nav.css b/asset/css/site-nav.css
@@ -23,15 +23,19 @@
 
 .site-nav-list {
     list-style-type: none;
-    cursor: pointer;
     padding-left: 0;
 }
 
+.site-nav-list-root {
+    margin: 0 -12px;
+}
+
 .site-nav-list-item-content {
     display: flex;
     padding: 0.5rem 0 0 2.8rem;
     transition: background-color 0.08s;
     color: #454545;
+    cursor: pointer;
 }
 
 .site-nav-list-item-content-0 {

diff --git a/docs/_markbind/layouts/devGuide/navigation.md b/docs/_markbind/layouts/devGuide/navigation.md
@@ -1,6 +1,6 @@
 <navigation>
 
-<span style="padding-left: 0.8rem; font-weight: bolder; font-size: 1.25em;">Developer Guide</span>
+<span style="font-weight: bolder; font-size: 1.25em;">Developer Guide</span>
 
 * [Developer Guide]({{baseUrl}}/devGuide/devGuide.html)
 * [Maintainer Guide]({{baseUrl}}/devGuide/maintainerGuide.html)

diff --git a/docs/_markbind/layouts/userGuide/navigation.md b/docs/_markbind/layouts/userGuide/navigation.md
@@ -1,6 +1,6 @@
 <navigation>
 
-<span style="padding-left: 0.8rem; font-weight: bolder; font-size: 1.25em;">User Guide</span>
+<span style="font-weight: bolder; font-size: 1.25em;">User Guide</span>
 
 * [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)
 * **Authoring Contents** :expanded:

diff --git a/docs/_markbind/navigation/devGuideSections.md b/docs/_markbind/navigation/devGuideSections.md
@@ -1,6 +1,6 @@
 <navigation>
 
-<span style="padding-left: 0.8rem; font-weight: bolder; font-size: 1.25em;">Developer Guide</span>
+<span style="font-weight: bolder; font-size: 1.25em;">Developer Guide</span>
 
 * [Developer Guide]({{baseUrl}}/devGuide/devGuide.html)
 * [Maintainer Guide]({{baseUrl}}/devGuide/maintainerGuide.html)

diff --git a/docs/_markbind/navigation/userGuideSections.md b/docs/_markbind/navigation/userGuideSections.md
@@ -1,6 +1,6 @@
 <navigation>
 
-<span style="padding-left: 0.8rem; font-weight: bolder; font-size: 1.25em;">User Guide</span>
+<span style="font-weight: bolder; font-size: 1.25em;">User Guide</span>
 
 * [Getting Started]({{baseUrl}}/userGuide/gettingStarted.html)
 * [Authoring Contents]({{baseUrl}}/userGuide/authoringContents.html) :expanded:

diff --git a/docs/userGuide/syntax/siteNavigationMenus.mbdf b/docs/userGuide/syntax/siteNavigationMenus.mbdf
@@ -3,7 +3,7 @@
 **A _Site Navigation Menu_ (==_siteNav_ for short==) is a fixed menu on the ==left edge== of a page**, that can be used to show a road map of the main pages of your site.
 
 Steps to add a siteNav:
-1. Format your siteNav as an unordered Markdown list and save it inside the `_markbind/navigation` directory. You may include dividers in the siteNav via <a href="{{ baseUrl }}/userGuide/readerfacingfeatures.html#horizontal-rules">horizontal rules</a>.
+1. Format your siteNav as an unordered Markdown list and save it inside the `_markbind/navigation` directory.
 2. Specify the file as the value of the `siteNav` attribute in the `<frontmatter>` of the page.
 
 <div class="indented">
@@ -12,15 +12,13 @@ Steps to add a siteNav:
 
 ```{.no-line-numbers}
 * [:house: Home]({{ baseUrl }}/index.html)
----
+* ---
 * Docs
   * [User Guide]({{ baseUrl }}/ug.html)
   * [Dev Guide]({{ baseUrl }}/dg.html)
----
 * [Search]({{ baseUrl }}/search.html)
   * [Google Search](https://www.google.com/)
   * [YouTube Search](https://www.youtube.com/)
----
 * [Contact]({{ baseUrl }}/contact.html)
 ```
 
@@ -33,66 +31,100 @@ Here's how another page can make use of the above siteNav:
 ...
 ```
 
-Here's how the above siteNav will appear:
-
-<ul style="list-style-type: none; margin-left:-1em">
-  <li style="margin-top: 10px"><a class="site-nav__a" href="/index.html">🏠 Home</a></li>
-  <hr>
-  <li style="margin-top: 10px">
-    <button class="dropdown-btn">Docs <i class="dropdown-btn-icon">
-      <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-    <div class="dropdown-container">
-      <ul style="list-style-type: none; margin-left:-1em">
-        <li style="margin-top: 10px"><a class="site-nav__a" href="">User Guide</a></li>
-        <li style="margin-top: 10px"><a class="site-nav__a" href="">Dev Guide</a></li>
+And here's how the above siteNav would appear:
+
+<div style="width:300px;" class="mb-3">
+<ul class="site-nav-list site-nav-list-root">
+   <li>
+      <div onclick="handleSiteNavClick(this)" class="site-nav-list-item-content site-nav-list-item-content-0"><a href="/index.html">🏠 Home</a></div>
+   </li>
+   <li>
+      <hr>
+   </li>
+   <li>
+      <div onclick="handleSiteNavClick(this)" class="site-nav-list-item-content site-nav-list-item-content-0">Docs
+         <i onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();" class="site-nav-dropdown-btn-icon"><span aria-hidden="true" class="glyphicon glyphicon-menu-down"></span></i>
+      </div>
+      <ul class="site-nav-dropdown-container site-nav-list">
+         <li>
+            <div onclick="handleSiteNavClick(this)" class="site-nav-list-item-content site-nav-list-item-content-1"><a href="/ug.html">User Guide</a></div>
+         </li>
+         <li>
+            <div onclick="handleSiteNavClick(this)" class="site-nav-list-item-content site-nav-list-item-content-1"><a href="/dg.html">Dev Guide</a></div>
+         </li>
       </ul>
-    </div>
-  </li>
-  <hr>
-  <li style="margin-top:10px"><a class="site-nav__a" href="">Search</a>
-    <ul style="list-style-type: none; margin-left:-1em">
-      <li style="margin-top: 10px"><a class="site-nav__a" href="http://www.google.com">Google Search</a></li>
-      <li style="margin-top: 10px"><a class="site-nav__a" href="http://www.youtube.com">YouTube Search</a></li>
-    </ul>
-  </li>
-  <hr>
-  <li style="margin-top:10px"><a class="site-nav__a" href="">Contact</a></li>
+   </li>
+   <li>
+      <div onclick="handleSiteNavClick(this)" class="site-nav-list-item-content site-nav-list-item-content-0"><a href="/search.html">Search</a> <i onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();" class="site-nav-dropdown-btn-icon"><span aria-hidden="true" class="glyphicon glyphicon-menu-down"></span></i></div>
+      <ul class="site-nav-dropdown-container site-nav-list">
+         <li>
+            <div onclick="handleSiteNavClick(this)" class="site-nav-list-item-content site-nav-list-item-content-1"><a href="https://www.google.com/">Google Search</a></div>
+         </li>
+         <li>
+            <div onclick="handleSiteNavClick(this)" class="site-nav-list-item-content site-nav-list-item-content-1"><a href="https://www.youtube.com/">YouTube Search</a></div>
+         </li>
+      </ul>
+   </li>
+   <li>
+      <div onclick="handleSiteNavClick(this)" class="site-nav-list-item-content site-nav-list-item-content-0"><a href="/contact.html">Contact</a></div>
+   </li>
 </ul>
 
 </div>
 
 
+MarkBind has styles nested lists with additional padding and smaller text sizes up to **4** nesting levels.
+Beyond that, you'd have to include your own styles!
+
+More than one siteNav file can be in `_markbind/navigation/` directory but a page may not have more than one siteNav.
+
+A siteNav has a fixed width of `300` pixels for its contents. A siteNav is [_responsive_](https://www.w3schools.com/html/html_responsive.asp) in that it will collapse to a menu button when the screen width is smaller than `992` pixels. It will then be completely hidden when the screen size is smaller than `576` pixels.
+
+If you wish to use a Layout but exclude its navigation file, specify `siteNav: none` in the `<frontmatter>` of the page.
+
+
+#### Expanding menu items by default
+
 You can **append the `:expanded:` to a <tooltip content="a menu item with sub menu-items">parent menu item</tooltip> to make it expand by default.** In the example above, `* Docs :expanded:` will make the menu item `Docs` expand by default.
 
 A parent menu item that is also linked will not be collapsible %%e.g., the `Search` menu item in the above example%%.
 
+#### Additional content in site navs
+
 You may have additional HTML and Markdown content in a <tooltip content="the file containing the code for a site navigation menu, e.g., `mySiteNav.md` in the example above">siteNav file</tooltip>, in which case the code for the siteNav should be enclosed in a `<navigation>` tag. There should only be one `<navigation>` tag in the file.
 
 <div class="indented">
 
-{{ icon_example }} A siteNav code using a `<navigation>` tag.
+{{ icon_example }} To include a heading for the site nav,
 
 ```{.no-line-numbers}
 # Site Map
+
 <navigation>
-* [:house: Home]({{ baseUr }}/index.html)
+* [:house: Home]({{ baseUrl }}/index.html)
+* ---
 * Docs
-  * [User Guide]({{ baseUrl }}/ug.html)
-  * [Dev Guide]({{ baseUrl }}/dg.html)
-* [Search]({{ baseUrl }}/search.html)
+...
 </navigation>
 ```
 
 </div>
 
-More than one siteNav file can be in `_markbind/navigation/` directory but a page may not have more than one siteNav.
+You can also include additional content between navigation items, such as [horizontal dividers.]({{ baseUrl }}/userGuide/readerfacingfeatures.html#horizontal-rules)
+Just be sure to include it as a list item as well!
 
-A siteNav has a fixed width of 300 pixels for its contents. A siteNav is [_responsive_](https://www.w3schools.com/html/html_responsive.asp) in that it will collapse to a menu button when the screen width is smaller than 992 pixels. It will then be completely hidden when the screen size is smaller than 576 pixels.
+<div class="indented">
 
-There is no limit to the number of nesting levels or the number of items in the menu, but note that any content exceeding a height of 1000 pixels will be cut off.
+{{ icon_example }} Inserting a horizontal divider:
 
-If you wish to use a Layout but exclude its navigation file, specify `siteNav: none` in the `<frontmatter>` of the page.
+```
+* [:house: Home]({{ baseUrl }}/index.html)
+* ---
+* Docs
+...
+```
 
+</div>
 
 <span id="short" class="d-none">
 

diff --git a/src/Page.js b/src/Page.js
@@ -45,6 +45,7 @@ const {
   SITE_NAV_EMPTY_LINE_REGEX,
   SITE_NAV_LIST_ITEM_CONTENT_CLASS,
   SITE_NAV_LIST_CLASS,
+  SITE_NAV_LIST_CLASS_ROOT,
   SITE_NAV_DROPDOWN_EXPAND_KEYWORD_REGEX,
   SITE_NAV_DROPDOWN_ICON_HTML,
   SITE_NAV_DROPDOWN_ICON_ROTATED_HTML,
@@ -718,11 +719,18 @@ class Page {
     $nav('ul').each((i1, ulElem) => {
       const nestingLevel = $nav(ulElem).parents('ul').length;
       $nav(ulElem).addClass(SITE_NAV_LIST_CLASS);
+      if (nestingLevel === 0) {
+        $nav(ulElem).addClass(SITE_NAV_LIST_CLASS_ROOT);
+      }
       const listItemContentClasses = `${SITE_NAV_LIST_ITEM_CONTENT_CLASS} ${
         SITE_NAV_LIST_ITEM_CONTENT_CLASS}-${nestingLevel}`;
 
       $nav(ulElem).children('li').each((i2, liElem) => {
         const nestedLists = $nav(liElem).children('ul');
+        const nestedAnchors = $nav(liElem).children('a');
+        if (nestedLists.length === 0 && nestedAnchors.length === 0) {
+          return;
+        }
 
         const listItemContent = $nav(liElem).contents().not('ul');
         const listItemContentHtml = $nav.html(listItemContent);

diff --git a/src/constants.js b/src/constants.js
@@ -26,6 +26,7 @@ module.exports = {
   SITE_NAV_ID: 'site-nav',
   SITE_NAV_EMPTY_LINE_REGEX: new RegExp('\\r?\\n\\s*\\r?\\n', 'g'),
   SITE_NAV_LIST_CLASS: 'site-nav-list',
+  SITE_NAV_LIST_CLASS_ROOT: 'site-nav-list-root',
   SITE_NAV_LIST_ITEM_CONTENT_CLASS: 'site-nav-list-item-content',
   SITE_NAV_DROPDOWN_EXPAND_KEYWORD_REGEX: new RegExp(':expanded:', 'g'),
   SITE_NAV_DROPDOWN_ICON_HTML: '<i class="site-nav-dropdown-btn-icon" '

diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
@@ -48,11 +48,9 @@
     <div id="flex-body">
       <nav id="site-nav" class="navbar navbar-light bg-transparent">
         <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="site-nav-list">
+          <ul class="site-nav-list site-nav-list-root">
             <li>
-              <div class="site-nav-list-item-content site-nav-list-item-content-0" onclick="handleSiteNavClick(this)">
-                <h2 id="navigation">Navigation<a class="fa fa-anchor" href="#navigation" onclick="event.stopPropagation()"></a></h2>
-              </div>
+              <h2 id="navigation">Navigation<a class="fa fa-anchor" href="#navigation" onclick="event.stopPropagation()"></a></h2>
             </li>
             <li>
               <div class="site-nav-list-item-content site-nav-list-item-content-0" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html" class="current">Home 🏠</a></div>
@@ -61,9 +59,7 @@ <h2 id="navigation">Navigation<a class="fa fa-anchor" href="#navigation" onclick
               <div class="site-nav-list-item-content site-nav-list-item-content-0" onclick="handleSiteNavClick(this)"><a href="/test_site/bugs/index.html">Open Bugs 🐛</a></div>
             </li>
             <li>
-              <div class="site-nav-list-item-content site-nav-list-item-content-0" onclick="handleSiteNavClick(this)">
-                <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing-site-nav" onclick="event.stopPropagation()"></a></h3>
-              </div>
+              <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing-site-nav" onclick="event.stopPropagation()"></a></h3>
             </li>
             <li>
               <div class="site-nav-list-item-content site-nav-list-item-content-0" onclick="handleSiteNavClick(this)"><strong>Dropdown </strong> <span aria-hidden="true" class="glyphicon glyphicon-search"></span> title ✏️
@@ -119,23 +115,17 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
                 <i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
                   <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></div>
               <ul class="site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list">
-                <li>
-                  <div class="site-nav-list-item-content site-nav-list-item-content-1" onclick="handleSiteNavClick(this)">Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text</div>
-                </li>
+                <li>Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text</li>
                 <li>
                   <div class="site-nav-list-item-content site-nav-list-item-content-1" onclick="handleSiteNavClick(this)">Nested Dropdown Title
                     <i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
                       <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></div>
                   <ul class="site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list">
-                    <li>
-                      <div class="site-nav-list-item-content site-nav-list-item-content-2" onclick="handleSiteNavClick(this)">Hello Doge Hello Doge 🐶</div>
-                    </li>
+                    <li>Hello Doge Hello Doge 🐶</li>
                     <li>
                       <div class="site-nav-list-item-content site-nav-list-item-content-2" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html" class="current"><strong>NESTED LINK</strong> Home 🏠</a></div>
                     </li>
-                    <li>
-                      <div class="site-nav-list-item-content site-nav-list-item-content-2" onclick="handleSiteNavClick(this)">Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit</div>
-                    </li>
+                    <li>Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit</li>
                   </ul>
                 </li>
               </ul>
@@ -145,27 +135,21 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
                 <i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
                   <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></div>
               <ul class="site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list">
-                <li>
-                  <div class="site-nav-list-item-content site-nav-list-item-content-1" onclick="handleSiteNavClick(this)">Nested line break text ✂️</div>
-                </li>
+                <li>Nested line break text ✂️</li>
                 <li>
                   <div class="site-nav-list-item-content site-nav-list-item-content-1" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html" class="current">Nested line break href</a>
                     <i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
                       <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></div>
                   <ul class="site-nav-dropdown-container site-nav-list">
-                    <li>
-                      <div class="site-nav-list-item-content site-nav-list-item-content-2" onclick="handleSiteNavClick(this)">Nested Nested line break text ✂️</div>
-                    </li>
+                    <li>Nested Nested line break text ✂️</li>
                   </ul>
                 </li>
                 <li>
                   <div class="site-nav-list-item-content site-nav-list-item-content-1" onclick="handleSiteNavClick(this)">Nested line break dropdown menu
                     <i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
                       <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></div>
                   <ul class="site-nav-dropdown-container site-nav-list">
-                    <li>
-                      <div class="site-nav-list-item-content site-nav-list-item-content-2" onclick="handleSiteNavClick(this)">Line break item 2 📘</div>
-                    </li>
+                    <li>Line break item 2 📘</li>
                   </ul>
                 </li>
               </ul>