From 3ea0658b91ac4314d0096d6c03075ae9344987b2 Mon Sep 17 00:00:00 2001
From: Rowell Heria <rowell+dev@heria.uk>
Date: Fri, 11 Oct 2024 10:16:22 +0100
Subject: [PATCH] fix(nhsuk-frontend-react): clean up mobile menu and fix
 variant

---
 .changeset/quick-zebras-add.md                |  5 +++++
 .../components/navigation/header/Header.tsx   | 21 +++++++++++++------
 .../header/__snapshots__/Header.spec.tsx.snap | 12 +++++------
 3 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/quick-zebras-add.md

diff --git a/.changeset/quick-zebras-add.md b/.changeset/quick-zebras-add.md
new file mode 100644
index 00000000..147744fa
--- /dev/null
+++ b/.changeset/quick-zebras-add.md
@@ -0,0 +1,5 @@
+---
+"nhsuk-frontend-react": patch
+---
+
+fix(nhsuk-frontend-react): clean up mobile menu and fix variant
diff --git a/packages/nhsuk-frontend-react/src/components/navigation/header/Header.tsx b/packages/nhsuk-frontend-react/src/components/navigation/header/Header.tsx
index c7f90770..41919c61 100644
--- a/packages/nhsuk-frontend-react/src/components/navigation/header/Header.tsx
+++ b/packages/nhsuk-frontend-react/src/components/navigation/header/Header.tsx
@@ -311,6 +311,15 @@ const HeaderNavList = factory<HeaderNavListFactory>(
         return;
       }
 
+      // this is a hack to remove the existing mobile menu list
+      const list = internalRef.current.querySelector(
+        'li.nhsuk-mobile-menu-container > ul.nhsuk-header__drop-down',
+      );
+
+      if (list) {
+        list.remove();
+      }
+
       initHeader();
     }, [internalRef, children]);
 
@@ -356,14 +365,14 @@ const HeaderNavItem = polymorphicFactory<HeaderNavItemFactory>(
     ref,
   ) => {
     return (
-      <li className="nhsuk-header__navigation-item">
+      <li
+        className={clsx('nhsuk-header__navigation-item', {
+          'nhsuk-header__navigation-item--home': variant === 'home-link',
+        })}
+      >
         <Base
           as={component}
-          className={clsx(
-            'nhsuk-header__navigation-link',
-            { 'nhsuk-header__navigation-item--home': variant === 'home-link' },
-            className,
-          )}
+          className={clsx('nhsuk-header__navigation-link', className)}
           {...props}
           ref={ref}
         />
diff --git a/packages/nhsuk-frontend-react/src/components/navigation/header/__snapshots__/Header.spec.tsx.snap b/packages/nhsuk-frontend-react/src/components/navigation/header/__snapshots__/Header.spec.tsx.snap
index 0f1443b3..9bc1bc43 100644
--- a/packages/nhsuk-frontend-react/src/components/navigation/header/__snapshots__/Header.spec.tsx.snap
+++ b/packages/nhsuk-frontend-react/src/components/navigation/header/__snapshots__/Header.spec.tsx.snap
@@ -164,10 +164,10 @@ exports[`should render the Header component 1`] = `
             </a>
           </li>
           <li
-            class="nhsuk-header__navigation-item"
+            class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home"
           >
             <a
-              class="nhsuk-header__navigation-link nhsuk-header__navigation-item--home"
+              class="nhsuk-header__navigation-link"
               href="#"
             >
               Home
@@ -433,10 +433,10 @@ exports[`should render the Header component with a service name 1`] = `
             </a>
           </li>
           <li
-            class="nhsuk-header__navigation-item"
+            class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home"
           >
             <a
-              class="nhsuk-header__navigation-link nhsuk-header__navigation-item--home"
+              class="nhsuk-header__navigation-link"
               href="#"
             >
               Home
@@ -838,10 +838,10 @@ exports[`should render the Header component with an organisation 1`] = `
             </a>
           </li>
           <li
-            class="nhsuk-header__navigation-item"
+            class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home"
           >
             <a
-              class="nhsuk-header__navigation-link nhsuk-header__navigation-item--home"
+              class="nhsuk-header__navigation-link"
               href="#"
             >
               Home