Issue #170 - Sub-nav for About/Jobs side menu (#217)

* Added sub-nav (no recursion)

* Added submenu open/close logic

* Cleaned up comments

* removed discarded code experiments

* Override default font size for sub-list so it matches the rest of side-nav

.eleventy.js

@@ -1,7 +1,7 @@
 const { DateTime } = require('luxon');
 const fs = require('fs');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
-const pluginNavigation = require('@11ty/eleventy-navigation');
+const pluginNavigation = require('@11ty/eleventy-navigation'); // Allows nested side nav items.
 const markdownIt = require('markdown-it');
 const markdownItAttrs = require('markdown-it-attrs');
 const markdownItAnchor = require('markdown-it-anchor');
@@ -13,6 +13,7 @@ const { imageShortcode, imageWithClassShortcode } = require('./config');
 const dotenv = require('dotenv');
 dotenv.config();
 
+
 module.exports = function (config) {
   // Set pathPrefix for site
   let pathPrefix = '/';

_data/assetPaths.json

@@ -4,6 +4,6 @@
   "app.js": "/assets/js/app-XWR645AF.js",
   "app.map": "/assets/js/app-XWR645AF.js.map",
   "uswds.js": "/assets/js/uswds-init.js",
-  "styles.css": "/assets/styles/styles-T277GZX4.css",
-  "styles.map": "/assets/styles/styles-T277GZX4.css.map"
+  "styles.css": "/assets/styles/styles-I32PKXXT.css",
+  "styles.map": "/assets/styles/styles-I32PKXXT.css.map"
 }

_includes/sidenav.html

@@ -6,7 +6,7 @@
 <aside class="usa-layout-docs-sidenav desktop:grid-col-3 padding-bottom-4">
   <nav>
     <ul class="usa-sidenav">
-      {% assign links = collections[eleventyNavigation.key] | eleventyNavigation %}
+      {% assign links = collections[tags] | eleventyNavigation %}
       {% for link in links %}
         {% assign _current = false %}
         {% if link.url == page.url %}
@@ -18,6 +18,30 @@
           >
            {{ link.title }}
           </a>
+          <!--
+            The following code allows us to nest to a depth of one, which for now is good.
+            we should look into adding recursion (using macros) if we want any deeper nesting
+          -->
+          {% assign splitLink = page.url | split:link.url %} <!--Check to see if submenu should be open-->
+          {% if splitLink[0] == blank %} <!--If the first entry in the array is blank, then the page url starts with the link url.  Load the submenu-->
+            {% if link.children.length %}
+              <ul class="usa-sidenav__sublist">
+                {%- for child in link.children %}
+                  {% assign _current = false %}
+                  {% if child.url == page.url %}
+                    {% assign _current = true %}
+                  {% endif %}
+                  <li class="usa-sidenav__item">
+                    <a href="{{ child.url | url }}"
+                      {% if _current %} class="usa-current" {% endif %}
+                    >
+                    {{ child.title }}
+                    </a>
+                  </li>
+                {% endfor -%}
+              </ul>
+            {% endif %}
+          {% endif %}
         </li>
     {% endfor %}
     </ul>

package.json

@@ -29,7 +29,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-img": "^1.1.0",
-    "@11ty/eleventy-navigation": "^0.3.2",
+    "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^1.1.2",
     "autoprefixer": "^10.4.2",
     "chokidar-cli": "^3.0.0",

pages/about/jobs.md

@@ -6,7 +6,7 @@ sidenav: true
 excerpt: Work with the .gov team
 tags: about
 eleventyNavigation:
-  key: about
+  key: jobs
   order: 3
   title: .Gov jobs
 ---

pages/about/senior-software-engineer.md

@@ -6,9 +6,10 @@ sidenav: true
 excerpt: Work with the .gov team as a senior software engineer
 tags: about
 eleventyNavigation:
-  key: about
-  order: 4
+  key: senior-engineer
   title: Senior software engineer
+  parent: jobs
+  order: 0
 ---
 
 Senior software engineers are accountable for creating products that meet user needs within the technical constraints of the agency. They oversee complex technology implementations with a focus on constant re-engineering and refactoring to ensure the simplest system possible that accomplishes the user’s needs. Senior software engineers work on cross-functional teams to deliver human-centered products using modern software development practices.

pages/about/software-engineer.md

@@ -6,9 +6,10 @@ sidenav: true
 excerpt: Work with the .gov team as a software engineer
 tags: about
 eleventyNavigation:
-  key: about
-  order: 5
+  key: software-engineer
   title: Software engineer
+  parent: jobs
+  order: 1
 ---
 
 Software engineers are accountable for working on a team to create applications that meet user needs within the technical constraints of the project. They create technology implementations with a focus on producing the simplest system possible that accomplishes the user’s needs. Software engineers work on cross-functional teams to deliver human-centered products using modern software development practices.

styles/_uswds-theme-custom-styles.scss

@@ -97,6 +97,11 @@ h3, h2.utility-header {
   font-weight: font-weight('semibold');
 }
 
+// Overrides default font size for sidenav sublist to match rest of sidenav
+.usa-sidenav__sublist {
+  font-size: 1.06rem;
+}
+
 // Overrides for the default usa-prose styles
 .usa-prose {
   h1 {