fix(nhsuk-frontend-react): clean up mobile menu and fix variant

rowellx68 · Oct 11, 2024 · f435857 · f435857
1 parent 0647e49
commit f435857
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/.changeset/quick-zebras-add.md 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
@@ -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/.../nhsuk-frontend-react/src/components/navigation/header/__snapshots__/Header.spec.tsx.snap b/.../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