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

package-lock.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "accessible-autocomplete": "^3.0.1",
     "clipboard": "^2.0.11",
-    "govuk-frontend": "^5.10.2",
+    "govuk-frontend": "github:alphagov/govuk-frontend#718bbb72f",
     "iframe-resizer": "^4.4.5",
     "lunr": "^2.3.9"
   },

package.json

@@ -86,6 +86,21 @@ $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 {
+  // Override mobile menu toggles colour
+  .app-mobile-navigation-section__toggle {
+    color: govuk-colour("white");
+    border-top-color: $_govuk-rebrand-border-colour-on-blue-tint-95;
+  }
+
+  // Override link styles in sub menus
+  .app-mobile-navigation-section__item .govuk-service-navigation__link {
+    @include govuk-link-style-no-visited-state;
+    @include govuk-link-style-no-underline;
+  }
+}
+
 .app-main-wrapper {
   padding-top: govuk-spacing(3);
   padding-bottom: govuk-spacing(4);

src/stylesheets/main.scss

@@ -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/layouts/layout.njk

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