docs(side navigation): initial build of the side navigation

.eleventy.js

@@ -10,9 +10,12 @@ const path = require("path");
 const { execSync } = require("child_process");
 const releasePackage = require("./package/package.json");
 const sass = require("sass");
-const esbuild = require("esbuild");
+const esbuild = require('esbuild');
+const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 
 module.exports = function (eleventyConfig) {
+
+  eleventyConfig.addPlugin(eleventyNavigationPlugin);
   /*
    * If the node env is 'dev' then we include the src dir allowing components
    * under development to be watched and loaded
@@ -42,6 +45,8 @@ module.exports = function (eleventyConfig) {
     nunjucksEnv.addFilter(name, callback);
   });
 
+  nunjucksEnv.addFilter("eleventyNavigation", eleventyNavigationPlugin.navigation.find);
+
   eleventyConfig.setLibrary("njk", nunjucksEnv);
 
   eleventyConfig.setLibrary(
@@ -166,6 +171,7 @@ module.exports = function (eleventyConfig) {
     },
   );
 
+
   eleventyConfig.addFilter("getScriptPath", function (inputPath) {
     return inputPath.split("/").slice(1, -1).join("/") + "/script.js";
   });

docs/_includes/layouts/base.njk

@@ -50,4 +50,4 @@
         {% endblock %}
         {% block pageScripts %}{% endblock %}
     </body>
-</html>
+</html>

docs/_includes/layouts/component.njk

@@ -1,136 +1,40 @@
 {% extends "./base.njk" %}
 
-{%- from "node_modules/@ministryofjustice/frontend/moj/components/side-navigation/macro.njk" import mojSideNavigation %}
-
-{% macro appSideNavigation(config) %}
-  {% set config = config|addActiveAttribute(page.filePathStem | url) %}
-
-  {{ mojSideNavigation(config) }}
-{% endmacro %}
+{% macro renderNavListItem(entry, sortChildrenBy="order") -%}
+<li{% if entry.url == page.url %} class="my-active-class"{% endif %}>
+  <a href="{{ entry.url }}">{{ entry.title }}</a>
+{%- if entry.children.length -%}
+  <ul>
+    {%- for child in entry.children | sort(false, false, sortChildrenBy) %}
+      {{ renderNavListItem(child) }}
+    {% endfor -%}
+  </ul>
+{%- endif -%}
+</li>
+{%- endmacro %}
 
 {% block content %}
   <div class="govuk-width-container govuk-grid-row app-flex-container">
     <div class="govuk-grid-column-one-third">
-      {{ appSideNavigation({
-        classes: 'govuk-!-padding-top-6',
-        sections: [
-          {
-            heading: {
-              text: "Components"
-            },
-            items: [
-            {
-              text: 'Add another',
-              href: ('/components/add-another' | url)
-            },
-            {
-              text: 'Badge',
-              href: ('/components/badge' | url)
-            },
-            {
-              text: 'Banner',
-              href: ('/components/banner' | url)
-            },
-            {
-              text: 'Button menu',
-              href: ('/components/button-menu' | url)
-            },
-            {
-              text: 'Date picker',
-              href: ('/components/date-picker' | url)
-            },
-            {
-              text: 'Filter',
-              href: ('/components/filter' | url)
-            },
-            {
-              text: 'Header',
-              href: ('/components/header' | url)
-            },
-            {
-              text: 'Identity bar',
-              href: ('/components/identity-bar' | url)
-            },
-            {
-              text: 'Messages',
-              href: ('/components/messages' | url)
-            },
-            {
-              text: 'Multi file upload',
-              href: ('/components/multi-file-upload' | url)
-            },
-            {
-              text: 'Multi select',
-              href: ('/components/multi-select' | url)
-            },
-            {
-              text: 'Notification badge',
-              href: ('/components/notification-badge' | url)
-            },
-            {
-              text: 'Organisation switcher',
-              href: ('/components/organisation-switcher' | url)
-            },
-            {
-              text: 'Page header actions',
-              href: ('/components/page-header-actions' | url)
-            },
-            {
-              text: 'Pagination',
-              href: ('/components/pagination' | url)
-            },
-            {
-              text: 'Password reveal',
-              href: ('/components/password-reveal' | url)
-            },
-            {
-              text: 'Primary navigation',
-              href: ('/components/primary-navigation' | url)
-            },
-            {
-              text: 'Scrollable pane',
-              href: ('/components/scrollable-pane' | url)
-            },
-            {
-              text: 'Search',
-              href: ('/components/search' | url)
-            },
-            {
-              text: 'Side navigation',
-              href: ('/components/side-navigation' | url)
-            },
-            {
-              text: 'Sortable table',
-              href: ('/components/sortable-table' | url)
-            },
-            {
-              text: 'Sub navigation',
-              href: ('/components/sub-navigation' | url)
-            },
-            {
-              text: 'Ticket panel',
-              href: ('/components/ticket-panel' | url)
-            },
-            {
-              text: 'Timeline',
-              href: ('/components/timeline' | url)
-            }
-            ]
-          }
-      ]
 
-        }) }}
+      {% set buildingPages = collections.all | eleventyNavigation("Building blocks") %}
+
+      <nav aria-labelledby="building-nav-title">
+        <h2 id="building-nav-title">Building Blocks</h2>
+        <ul>
+          {%- for entry in buildingPages  %}{{ renderNavListItem(entry, "key") }}{%- endfor -%}
+        </ul>
+      </nav>
 
       <hr class="govuk-section-break govuk-section-break--s govuk-section-break--visible">
 
-      {{ appSideNavigation({
-        items: [
-          {
-            text: 'Archived components',
-            href: ('/components/archived-components' | url)
-          }
-        ]
-      }) }}
+      {% set usingPages = collections.all | eleventyNavigation("Using the design system") %}
+      <nav aria-labelledby="using-nav-title">
+        <h2 id="using-nav-title">Building Blocks</h2>
+        <ul>
+          {%- for entry in usingPages  %}{{ renderNavListItem(entry) }}{%- endfor -%}
+        </ul>
+      </nav>
 
       {% include "./partials/back-to-top.njk" %}
     </div>

docs/archive/index.md

@@ -0,0 +1,7 @@
+---
+title: Archive
+eleventyNavigation:
+  key: Archive
+  parent: Building blocks 
+  order: 15
+---

docs/building-blocks.md

@@ -0,0 +1,6 @@
+---
+eleventyNavigation:
+  key: Building blocks
+  url: '#'
+  permalink: false
+---

docs/community/contribute.md

@@ -1,6 +1,9 @@
 ---
 layout: layouts/community.njk
 title: Propose a component or pattern
+eleventyNavigation:
+  key: Propose a component or pattern
+  parent: Contribute
 ---
 
 Our contribution process supports teams to add components and patterns based on their users needs and service requirements, whilst guaranteeing the quality and usefulness of the MoJ Design System.

docs/community/criteria.md

@@ -1,6 +1,9 @@
 ---
 layout: layouts/community.njk
 title: Contribution criteria
+eleventyNavigation:
+  key: Contribution criteria
+  parent: Contribute
 ---
 
 The MoJ Design System supports the design, build, and delivery of accessible and consistent services. To guarantee the quality of the design system, all styles, components and patterns need to meet certain criteria.

docs/community/help-and-feedback.md

@@ -1,6 +1,10 @@
 ---
 layout: layouts/community.njk
 title: Get help with the MoJ Design System
+eleventyNavigation:
+  key: Help and feedback
+  parent: Using the design system
+  order: 20
 ---
 
 <span class="govuk-caption-xl">The MoJ Design System team supports users of the MoJ Design System. Contact us to ask for help.</span>

docs/community/index.md

@@ -1,6 +1,10 @@
 ---
 layout: layouts/community.njk
 title: Community
+eleventyNavigation:
+  key: Contribute
+  parent: Using the design system
+  order: 10
 ---
 
 The MoJ Design System supports the design, build, and delivery of accessible and consistent services. It does this by helping people, teams, professions, and communities across the Ministry of Justice to learn from the experiences of each other, contribute and share knowledge, and reuse as much as possible.

docs/community/suggest-a-change.md

@@ -1,6 +1,9 @@
 ---
 title: Suggest a Change
 layout: layouts/community.njk
+eleventyNavigation:
+  key: Suggest a change
+  parent: Contribute
 ---
 
 To help improve the MoJ Design System, you can suggest changes to components and patterns.

docs/components/add-another.md

@@ -3,6 +3,9 @@ layout: layouts/component.njk
 title: Add another
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/686
+eleventyNavigation:
+  key: Add another
+  parent: Components
 ---
 
 {% lastUpdated "add-another" %}

docs/components/badge.md

@@ -3,6 +3,9 @@ layout: layouts/component.njk
 title: Badge
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/687
+eleventyNavigation:
+  key: Badge 
+  parent: Components
 ---
 
 {% banner "The GOV.UK Design System has a similar component" %}

docs/components/banner.md

@@ -3,6 +3,9 @@ layout: layouts/component.njk
 title: Banner
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/835
+eleventyNavigation:
+  key: Banner
+  parent: Components
 ---
 
 {% banner "The GOV.UK Design System has a similar component" %}

docs/components/button-menu.md

@@ -4,6 +4,9 @@ title: Button menu
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/685
 contributors: Stephen Robertson, Rich Cooley, Al Laing, Jo Dimbleby, Dave Evans, Jim Bailey, Thomas Geraghty and Andy Keen
+eleventyNavigation:
+  key: Button menu
+  parent: Components
 ---
 
 <span class="govuk-caption-xl">The button menu is a versatile component that allows users to view tasks as buttons in a collapsible menu.</span>

docs/components/currency-input.md

@@ -3,6 +3,9 @@ layout: layouts/component.njk
 isArchive: true
 title: Currency input
 type: component
+eleventyNavigation:
+  key: Currency input
+  parent: Archive
 ---
 
 {% banner "This component is archived" %}

docs/components/date-picker.md

@@ -6,6 +6,9 @@ githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/703
 contributors: Dom Billington, Eddie Shannon, David Middleton, and the DPS Connect team
 basedon: Scottish Government Design System date picker
 basedonurl: https://designsystem.gov.scot/components/date-picker
+eleventyNavigation:
+  key: Date picker
+  parent: Components
 ---
 
 <span class="govuk-caption-xl">The date picker component enables users to select a date from a calendar.  </span>

docs/components/filter.md

@@ -3,6 +3,9 @@ layout: layouts/component.njk
 title: Filter
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/197
+eleventyNavigation:
+  key: Filter
+  parent: Components
 ---
 
 {% banner "A similar component exists" %}

docs/components/form-validator.md

@@ -2,6 +2,9 @@
 layout: layouts/component.njk
 isArchive: true
 title: Form validator
+eleventyNavigation:
+  key: Form validator
+  parent: Archive
 ---
 
 {% banner "This component is archived" %}

docs/components/header.md

@@ -3,6 +3,9 @@ layout: layouts/component.njk
 title: Header
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/246
+eleventyNavigation:
+  key: Header
+  parent: Components
 ---
 
 {% lastUpdated "header" %}

docs/components/identity-bar.md

@@ -3,6 +3,9 @@ layout: layouts/component.njk
 title: Identity bar
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/704
+eleventyNavigation:
+  key: Identity bar
+  parent: Components
 ---
 
 {% lastUpdated "identity-bar" %}

docs/components/index.md

@@ -2,6 +2,10 @@
 layout: layouts/component.njk
 isIndex: true
 title: Components
+eleventyNavigation:
+  key: Components
+  parent: Building blocks
+  order: 0
 ---
 
 <span class="govuk-caption-xl">Save time with reusable, accessible components for forms, navigation, panels, tables and more.</span>

docs/components/messages.md

@@ -3,6 +3,9 @@ layout: layouts/component.njk
 title: Messages
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/705
+eleventyNavigation:
+  key: Messages
+  parent: Components
 ---
 
 {% lastUpdated "messages" %}

docs/components/multi-file-upload.md

@@ -3,6 +3,9 @@ layout: layouts/component.njk
 title: Multi file upload
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/264
+eleventyNavigation:
+  key: Multi file upload
+  parent: Components
 ---
 
 {% lastUpdated "multi-file-upload" %}