docs(side navigation): Update site layout to use side navigation (#610)

* docs(side navigation): initial build of the side navigation * docs(side navigation): update layouts to add side nav to all pages * docs(side navigation): add basic styles * docs(side navigation): main site layout and basic responsiveness * docs(side navigation): ensure all side nav links work * docs(side navigation): implement responsive menu toggling behaviour * docs(side navigation): non-JS menu collapse/hiding functionality * docs(side navigation): add indicators to side nav and enable view transitions(experiment) * docs(side navigation): update header menu toggle styles * docs(index pages): styling for index listing pages * docs(side navigation): adjust site layout to left aligned * docs(side navigation): adjust footer to be left aligned too * docs(side navigation): extract macros and other small tweaks * docs(side navigation): fixes after visual/functional review * docs(side navigation): wIP - adding accordion behaviour to side nav * docs(side nav): style navigation toggles * docs(side navigation): resolve issues after rebasing * docs(side navigation): make both menus js toggle navs * docs(side navigation): fix chevron indicators and adjust hover colours * docs: adding side nav category Standards and principles added as a side nav category, including Ethics as a set of pages. * docs: side navigation updates Restructuring parent and child pages to follow new sitemap. * docs: updates to url structure * docs: removing redundant pages * docs: changing typo * docs(side navigation): fix error froim * docs: side nav and content style guide updates * docs: resolving side nav error with duplicate ethics section * docs: resolving style sheet issue with incorrect layout file being referenced * docs: resolving margin spacing on style guide * docs: updating links and removing redundant content and pages * docs: excerpt content added for components * docs: updated excerpts as temporary holding text * docs(side navigation): fix content errors * docs(side navigation): add new content style guide entries * docs(side navigation): fix section breaks * docs: adding in excerpts for no-js pages * docs(redirects): add redirect from old prototyping page * docs: fix link to help page updated in template partial Link to /community/help-and-feedback changed to /help in get-help-and-contribute.njk to reflect restructure. * docs: updates to docs site for url changes and fixing errors * docs: adding redirects * docs: adding redirects for removed pages * docs: adding redirect for IE8 page * docs: adding in Figma links for messages and timeline component This is to mirror a merge from PR917 (#917). * docs(side navigation): tweaks to chevrons * docs(side navigation): fix collapsible nav js to work better * docs(side navigation): further tweaks to chevron svg * docs(accessibility): fix duplicate id on standards and ethics nav * docs(style guide): remove content style guide from output and navigation --------- Co-authored-by: Rob McCarthy <robertjmccarthy08@gmail.com> Co-authored-by: helennickols <helen.nickols@digital.justice.gov.uk> Co-authored-by: Murray Lippiatt <“murray.lippiatt1@digital.justice.gov.uk”>
ministryofjustice · Nov 13, 2024 · dc28727 · dc28727
1 parent 1684952
commit dc28727
Show file tree

Hide file tree

Showing 109 changed files with 1,722 additions and 949 deletions.
diff --git a/.eleventy.js b/.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";
   });

diff --git a/docs/_includes/layouts/archive.njk b/docs/_includes/layouts/archive.njk
@@ -0,0 +1,12 @@
+{% extends "./base.njk" %}
+
+{% block content %}
+    <div class="app-layout__content">
+        <h1 class="govuk-heading-xl">
+          {% if not isIndex %}<span class="govuk-caption-xl">Archive</span>{% endif %}
+          {{ title }}
+        </h1>
+        {{ content | safe }}
+    </div>
+
+{% endblock %}
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -37,17 +37,28 @@
     <body class="govuk-template__body">
         <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
         {% block body %}
-            <div>
-                {% include "./partials/header.njk" %}
-                {% include "./partials/navigation.njk" %}
-                {% block content %}
-                    <main class="app-prose-scope" role="main">
+           <div>
+        {% include "./partials/header.njk" %}
+
+        <div class="app-layout">
+            <div id="sidebar" class="app-layout__sidebar">
+                {% include "./partials/side-navigation.njk" %}
+            </div>
+
+
+            <div class="app-layout__page app-page">
+                <main id="main-content" class="app-prose-scope">
+                    {% block content %}
                         {{ content | safe }}
-                    </main>
-                {% endblock %}
-                {% include "./partials/footer.njk" %}
+                    {% endblock %}
+                </main>
             </div>
+        </div>
+
+        {% include "./partials/footer.njk" %}
+      </div> 
         {% endblock %}
         {% block pageScripts %}{% endblock %}
     </body>
 </html>
+
diff --git a/docs/_includes/layouts/community.njk b/docs/_includes/layouts/community.njk
@@ -1,66 +1,13 @@
 {% 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 %}
-
 {% 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: "Contributing"
-            },
-            items: [
-            {
-              text: 'Propose a component or pattern',
-              href: ('/community/contribute' | url)
-            },
-            {
-              text: 'Contribution criteria',
-              href: ('/community/criteria' | url)
-            },
-            {
-              text: 'Suggest a change',
-              href: ('/community/suggest-a-change' | url)
-            }
-            ]
-          },
-          {
-            heading: {
-              text: "Support"
-            },
-            items: [
-            {
-              text: 'Help and feedback',
-              href: ('/community/help-and-feedback' | url)
-            }
-            ]
-          }
-        ]
-      }) }}
-
-      {% include "./partials/back-to-top.njk" %}
-    </div>
-
-    <div class="govuk-grid-column-two-thirds">
-      <main id="main-content" class="govuk-main-wrapper app-prose-scope" role="main">
+    <div class="app-layout__content">
         <h1 class="govuk-heading-xl">
           {% if subsection %}<span class="govuk-caption-xl">{{ subsection }}</span>{% endif %}
           {{ title }}
         </h1>
         {{ content | safe }}
-      </main>
-
-      {% include "./partials/get-help.njk" %}
 
+    {% include "./partials/get-help.njk" %}
     </div>
-  </div>
 {% endblock %}
diff --git a/docs/_includes/layouts/component-no-feedback.njk b/docs/_includes/layouts/component-no-feedback.njk
@@ -0,0 +1,13 @@
+{% extends "./base.njk" %}
+
+{% block content %}
+    <div class="app-layout__content">
+        <h1 class="govuk-heading-xl">
+          {% if not isIndex %}<span class="govuk-caption-xl">Components</span>{% endif %}
+          {{ title }}
+        </h1>
+        {{ content | safe }}
+    </div>
+
+{% endblock %}
+
diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk
@@ -1,155 +1,18 @@
 {% 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 %}
-
 {% 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)
-            }
-            ]
-          }
-      ]
-
-        }) }}
-
-      <hr class="govuk-section-break govuk-section-break--s govuk-section-break--visible">
-
-      {{ appSideNavigation({
-        items: [
-          {
-            text: 'Archived components',
-            href: ('/components/archived-components' | url)
-          }
-        ]
-      }) }}
-
-      {% include "./partials/back-to-top.njk" %}
-    </div>
-
-    <div class="govuk-grid-column-two-thirds">
-      <main id="main-content" class="govuk-main-wrapper app-prose-scope" role="main">
+    <div class="app-layout__content">
         <h1 class="govuk-heading-xl">
           {% if not isIndex %}<span class="govuk-caption-xl">Components</span>{% endif %}
           {{ title }}
         </h1>
+
         {{ content | safe }}
-      </main>
-
-      {% if isIndex or isArchive %}
-      {% else %}
-        {% include "./partials/get-help-and-contribute.njk" %}
-      {% endif %}
 
+        {% if isIndex or isArchive %}
+        {% else %}
+          {% include "./partials/get-help-and-contribute.njk" %}
+        {% endif %}
 
     </div>
-  </div>
 {% endblock %}
diff --git a/docs/_includes/layouts/content.njk b/docs/_includes/layouts/content.njk
@@ -0,0 +1,11 @@
+{% extends "./base.njk" %}
+
+{% block content %}
+    <div class="app-layout__content">
+        <h1 class="govuk-heading-xl">
+          {% if subsection %}<span class="govuk-caption-xl">{{ subsection }}</span>{% endif %}
+          {{ title }}
+        </h1>
+        {{ content | safe }}
+    </div>
+{% endblock %}