From 2b962543ca66b63da8ef0745143b1f532f6825d4 Mon Sep 17 00:00:00 2001
From: roshaanbajwa <roshaan.bajwa1@nhs.net>
Date: Fri, 24 May 2024 16:18:20 +0100
Subject: [PATCH 1/5] add conditional extra css for fewer nav links

---
 packages/components/header/_header.scss | 3 +++
 packages/components/header/template.njk | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
index 1f4fe36af..98d0f3581 100644
--- a/packages/components/header/_header.scss
+++ b/packages/components/header/_header.scss
@@ -468,6 +468,9 @@
   @include mq($from: desktop) {
     display: flex;
     justify-content: space-between;
+    &.nhsuk-header__navigation-list-fewer-links {
+      justify-content: initial;
+    }
   }
 
   .js-enabled & {
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index 0e5ae9a20..7de36deab 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -78,7 +78,7 @@
     </div>{# close nhsuk-header__container #}
     <div class="nhsuk-navigation-container">
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-        <ul class="nhsuk-header__navigation-list">
+        <ul class="{{ "nhsuk-header__navigation-list nhsuk-header__navigation-list-fewer-links" if params.primaryLinks.length < 4 else "nhsuk-header__navigation-list" }}">
           {%- for item in params.primaryLinks %}
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">

From cf772914170db5cd71f9a3ac894703fbc2af8b6c Mon Sep 17 00:00:00 2001
From: roshaanbajwa <roshaan.bajwa1@nhs.net>
Date: Fri, 24 May 2024 16:56:59 +0100
Subject: [PATCH 2/5] change class name

---
 packages/components/header/_header.scss | 2 +-
 packages/components/header/template.njk | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
index 98d0f3581..529232ad0 100644
--- a/packages/components/header/_header.scss
+++ b/packages/components/header/_header.scss
@@ -468,7 +468,7 @@
   @include mq($from: desktop) {
     display: flex;
     justify-content: space-between;
-    &.nhsuk-header__navigation-list-fewer-links {
+    &.nhsuk-header__navigation-list--left-aligned {
       justify-content: initial;
     }
   }
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index 7de36deab..4c06b0400 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -78,7 +78,7 @@
     </div>{# close nhsuk-header__container #}
     <div class="nhsuk-navigation-container">
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-        <ul class="{{ "nhsuk-header__navigation-list nhsuk-header__navigation-list-fewer-links" if params.primaryLinks.length < 4 else "nhsuk-header__navigation-list" }}">
+        <ul class="{{ "nhsuk-header__navigation-list nhsuk-header__navigation-list--left-aligned" if params.primaryLinks.length < 4 else "nhsuk-header__navigation-list" }}">
           {%- for item in params.primaryLinks %}
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">

From d82a25d0d5f687cdbcda9e46f3e16ec7120201d5 Mon Sep 17 00:00:00 2001
From: roshaanbajwa <roshaan.bajwa1@nhs.net>
Date: Wed, 29 May 2024 12:57:58 +0100
Subject: [PATCH 3/5] add left alignment to header variations

---
 packages/components/header/template.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index 4c06b0400..13a280661 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -136,7 +136,7 @@
     
     <div class="nhsuk-navigation-container">
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-        <ul class="nhsuk-header__navigation-list">
+        <ul class="{{ "nhsuk-header__navigation-list nhsuk-header__navigation-list--left-aligned" if params.primaryLinks.length < 4 else "nhsuk-header__navigation-list" }}">
           {%- for item in params.primaryLinks %}
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">

From f714c669d9adedcd672429ee23074a6ab059c8d6 Mon Sep 17 00:00:00 2001
From: roshaanbajwa <roshaan.bajwa1@nhs.net>
Date: Thu, 30 May 2024 09:51:39 +0100
Subject: [PATCH 4/5] make links condition more concise

---
 packages/components/header/template.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index 13a280661..9ab96a3f4 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -136,7 +136,7 @@
     
     <div class="nhsuk-navigation-container">
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-        <ul class="{{ "nhsuk-header__navigation-list nhsuk-header__navigation-list--left-aligned" if params.primaryLinks.length < 4 else "nhsuk-header__navigation-list" }}">
+        <ul class="nhsuk-header__navigation-list{{ ' nhsuk-header__navigation-list--left-aligned' if params.primaryLinks.length < 4 }}">
           {%- for item in params.primaryLinks %}
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">

From 03e910ea5e5dd4d12db740c38e522c2c6bd19282 Mon Sep 17 00:00:00 2001
From: roshaanbajwa <roshaan.bajwa1@nhs.net>
Date: Thu, 6 Jun 2024 13:20:59 +0100
Subject: [PATCH 5/5] decouple css class

---
 packages/components/header/_header.scss | 9 ++++++---
 packages/components/header/template.njk | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
index 529232ad0..a224d03cc 100644
--- a/packages/components/header/_header.scss
+++ b/packages/components/header/_header.scss
@@ -468,9 +468,6 @@
   @include mq($from: desktop) {
     display: flex;
     justify-content: space-between;
-    &.nhsuk-header__navigation-list--left-aligned {
-      justify-content: initial;
-    }
   }
 
   .js-enabled & {
@@ -533,3 +530,9 @@
     display: none;
   }
 }
+
+.nhsuk-header__navigation-list--left-aligned {
+  @include mq($from: desktop) {
+    justify-content: initial;
+  }
+}
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index 9ab96a3f4..68cfc941a 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -78,7 +78,7 @@
     </div>{# close nhsuk-header__container #}
     <div class="nhsuk-navigation-container">
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-        <ul class="{{ "nhsuk-header__navigation-list nhsuk-header__navigation-list--left-aligned" if params.primaryLinks.length < 4 else "nhsuk-header__navigation-list" }}">
+        <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
           {%- for item in params.primaryLinks %}
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
@@ -136,7 +136,7 @@
     
     <div class="nhsuk-navigation-container">
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-        <ul class="nhsuk-header__navigation-list{{ ' nhsuk-header__navigation-list--left-aligned' if params.primaryLinks.length < 4 }}">
+        <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
           {%- for item in params.primaryLinks %}
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">