ministryofjustice · chrispymm · Nov 13, 2024 · Aug 5, 2024 · Aug 7, 2024 · Aug 7, 2024
@@ -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";
   });

@@ -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 %}
@@ -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>
+
@@ -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 %}
@@ -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 %}
+
@@ -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 %}
@@ -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 %}