Add inverse styles to the navigation on homepage

Author: querkmachine

lib/nunjucks/globals.js

@@ -167,3 +167,20 @@ exports.getMacroOptions = getMacroOptions
  * @property {string} href - The URL of the ancestor page
  * @property {string} text - The title of the ancestor page
  */
+
+/**
+ * Helper function that returns true if the current page is the homepage, useful
+ * for outputting things conditionally.
+ *
+ * @returns {boolean} If this is the homepage or not
+ */
+
+exports.isHomepage = function () {
+  const permalink = this.lookup('permalink')
+
+  // The homepage always has an empty string as a permalink
+  if (typeof permalink === 'string' && permalink === '') {
+    return true
+  }
+  return false
+}

src/stylesheets/main.scss

@@ -86,6 +86,30 @@ $app-code-color: #d13118;
   @include govuk-width-container(1100px);
 }
 
+// Invert the colours of the navigation on the homepage
+.govuk-template--rebranded .govuk-service-navigation--inverse {
+  border-bottom-color: govuk-colour("white");
+  background-color: $govuk-brand-colour;
+
+  // Override the 'active' border colour
+  .govuk-service-navigation__item,
+  .govuk-service-navigation__service-name {
+    border-color: govuk-colour("white");
+  }
+
+  // Override mobile menu toggles colour
+  .govuk-service-navigation__toggle,
+  .app-mobile-navigation-section__toggle {
+    color: govuk-colour("white");
+  }
+
+  // Override link styles, but only the ones on the top level,
+  // not those in sub menus
+  .govuk-service-navigation__item > .govuk-service-navigation__link {
+    @include govuk-link-style-inverse;
+  }
+}
+
 .app-main-wrapper {
   padding-top: govuk-spacing(3);
   padding-bottom: govuk-spacing(4);

views/layouts/layout.njk

@@ -1,9 +1,8 @@
 {% extends "_generic.njk" %}
 
 {% block body %}
-  {# Only render breadcrumbs on pages that aren't the homepage. This is a bit
-  hacky, but works as the homepage has an empty string for a permalink. #}
-  {% if permalink %}
+  {# Only render breadcrumbs on pages that aren't the homepage. #}
+  {% if not isHomepage() %}
     {{ govukBreadcrumbs({
       classes: "app-width-container",
       items: getAncestorPages(permalink)

views/partials/_navigation.njk

@@ -33,6 +33,7 @@ service navigation component. #}
 {%- endfor %}
 
 {{ govukServiceNavigation({
+  classes: 'govuk-service-navigation--inverse' if isHomepage(),
   navigation: navLinks,
   navigationClasses: 'app-service-navigation__wrapper'
 }) }}