Add navigation option

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)

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 }}

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,

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'))

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

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
+  })
+}