From 8ec30a804b16714669b39dc9fbe8003ba78b9f20 Mon Sep 17 00:00:00 2001
From: Paul Robert Lloyd <me+git@paulrobertlloyd.com>
Date: Tue, 12 Dec 2023 00:11:35 +0000
Subject: [PATCH] Add navigation option

---
 components/header/_header.scss |  4 ++++
 components/header/template.njk |  7 ++++++-
 eleventy.config.js             | 13 +++++++++++++
 index.js                       |  1 +
 layouts/base.njk               |  2 +-
 lib/filters/current-page.js    | 13 +++++++++++++
 6 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 lib/filters/current-page.js

diff --git a/components/header/_header.scss b/components/header/_header.scss
index 124c566a..3f61564b 100644
--- a/components/header/_header.scss
+++ b/components/header/_header.scss
@@ -2,6 +2,10 @@
 // See: https://github.com/alphagov/govuk-design-system/blob/master/src/stylesheets/components/_header.scss
 
 @include govuk-exports("app-header") {
+  .app-header--with-navigation {
+    border-bottom: $govuk-border-width-wide solid $govuk-brand-colour;
+  }
+
   // Override the default 33% width on the logo in GOV.UK Frontend (prevents
   // unnecessary wrapping of product name on smaller tablet / desktop
   // viewports)
diff --git a/components/header/template.njk b/components/header/template.njk
index ab605d2b..f3b0744e 100644
--- a/components/header/template.njk
+++ b/components/header/template.njk
@@ -1,5 +1,6 @@
+{% from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation %}
 {%- from "../site-search/macro.njk" import appSiteSearch -%}
-<header class="govuk-header app-header" role="banner" data-module="govuk-header">
+<header class="govuk-header app-header{% if params.navigation %} app-header--with-navigation{% endif %}" role="banner" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container app-header__container">
     <div class="govuk-header__logo app-header__logo">
       <a href="{{ params.homepageUrl | default("/") | url }}" class="govuk-header__link govuk-header__link--homepage">
@@ -22,3 +23,7 @@
     {{ appSiteSearch(params.search) if params.search.indexPath | indent(4) }}
   </div>
 </header>
+{{ xGovukPrimaryNavigation({
+  visuallyHiddenTitle: params.navigation.visuallyHiddenTitle,
+  items: params.navigation.items | currentPage(page.url)
+}) if params.navigation }}
diff --git a/eleventy.config.js b/eleventy.config.js
index f70f39da..a97a9170 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -23,6 +23,19 @@ module.exports = function (eleventyConfig) {
       search: {
         indexPath: '/search.json',
         sitemapPath: '/sitemap'
+      },
+      // FOR PR REVIEW ONLY
+      navigation: {
+        items: [{
+          text: 'Layouts',
+          href: '/layouts',
+        }, {
+          text: 'Options',
+          href: '/options',
+        }, {
+          text: 'Hosting',
+          href: '/hosting',
+        }]
       }
     },
     headingPermalinks: true,
diff --git a/index.js b/index.js
index 65bb41b6..8b39ac4a 100644
--- a/index.js
+++ b/index.js
@@ -19,6 +19,7 @@ module.exports = function (eleventyConfig, pluginOptions = {}) {
 
   // Filters
   eleventyConfig.addFilter('date', require('./lib/filters/date.js'))
+  eleventyConfig.addFilter('currentPage', require('./lib/filters/current-page.js'))
   eleventyConfig.addFilter('includes', require('./lib/filters/includes.js'))
   eleventyConfig.addFilter('itemsFromCollection', require('./lib/filters/items-from-collection.js'))
   eleventyConfig.addFilter('itemsFromPagination', require('./lib/filters/items-from-pagination.js'))
diff --git a/layouts/base.njk b/layouts/base.njk
index 7d744e7f..e08a82ea 100644
--- a/layouts/base.njk
+++ b/layouts/base.njk
@@ -30,7 +30,7 @@
 {% from "components/document-header/macro.njk" import appDocumentHeader %}
 {% from "components/document-list/macro.njk" import appDocumentList %}
 {% from "components/footer/macro.njk" import appFooter %}
-{% from "components/header/macro.njk" import appHeader %}
+{% from "components/header/macro.njk" import appHeader with context %}
 {% from "components/prose-scope/macro.njk" import appProseScope %}
 
 {% block headIcons %}
diff --git a/lib/filters/current-page.js b/lib/filters/current-page.js
new file mode 100644
index 00000000..bf52ee14
--- /dev/null
+++ b/lib/filters/current-page.js
@@ -0,0 +1,13 @@
+/**
+ * Indicate which is the current item in navigation items
+ * @param {Array} array - Navigation items
+ * @param {string} pageUrl - URL of current page
+ * @returns {Array} Navigation items
+ */
+module.exports = (array, pageUrl) => {
+  return array.map(item => {
+    item.current = pageUrl.startsWith(item.href)
+
+    return item
+  })
+}