From 2f8ad7287f4cd5a9b1232d1cc2ba3191fb8209f1 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 16 Jul 2026 11:19:02 +1000
Subject: [PATCH 01/15] =?UTF-8?q?=E2=9C=A8=20Add=20light/dark=20theming=20?=
 =?UTF-8?q?support=20to=20the=20mega=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drive the menu's colours from CSS-variable design tokens (foreground,
background, muted-foreground, hairline) that mirror SSW.Website's styles.css,
so the menu themes under a `.dark` scope with no `dark:` utilities. Swap the
logo to the white-with-red dark-mode asset, mute + gap the nav chevrons, and
tokenise the bar text/dividers. Adds a `prepare` build so the package can be
consumed as a git dependency.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../CountryDropdown/CountryDropdown.tsx        |  2 +-
 lib/components/DesktopMenu/DesktopMenu.tsx     |  4 ++--
 .../DesktopMenu/MenuItemWithSubmenu.tsx        |  7 +++++--
 lib/components/Logo/Logo.tsx                   | 14 +++++++++++++-
 .../MegaMenuLayout/MegaMenuLayout.tsx          |  3 +--
 lib/components/Search/Search.tsx               |  2 +-
 lib/components/ui/Divider.tsx                  |  2 +-
 lib/index.css                                  | 18 ++++++++++++++++++
 lib/index.ts                                   |  2 ++
 package.json                                   |  1 +
 src/index.css                                  | 18 ++++++++++++++++++
 tailwind.config.js                             |  5 +++++
 12 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/lib/components/CountryDropdown/CountryDropdown.tsx b/lib/components/CountryDropdown/CountryDropdown.tsx
index a16c686..ef0e308 100644
--- a/lib/components/CountryDropdown/CountryDropdown.tsx
+++ b/lib/components/CountryDropdown/CountryDropdown.tsx
@@ -51,7 +51,7 @@ const CountryDropdown = ({ url, className }: CountryDropdownProps) => {
     <Popover className={cx(className)}>
       <Popover.Button
         className={cx(
-          "flex items-center justify-center gap-x-1 rounded-md px-4 py-1 text-sm font-semibold text-ssw-black outline-none xl:pr-0",
+          "flex items-center justify-center gap-x-1 rounded-md px-4 py-1 text-sm font-semibold text-foreground outline-none xl:pr-0",
           "hover:scale-105",
         )}
         onClick={() => setIsOpened(!isOpened)}
diff --git a/lib/components/DesktopMenu/DesktopMenu.tsx b/lib/components/DesktopMenu/DesktopMenu.tsx
index d71e6e2..6f6715a 100644
--- a/lib/components/DesktopMenu/DesktopMenu.tsx
+++ b/lib/components/DesktopMenu/DesktopMenu.tsx
@@ -31,7 +31,7 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
   return (
     <>
       <div className="hidden flex-1 xl:block">
-        <Popover.Group className="flex items-center justify-center gap-1 text-sm font-semibold text-ssw-black outline-none">
+        <Popover.Group className="flex items-center justify-center gap-1 text-sm font-semibold text-foreground outline-none">
           {menuGroups.map((group, index) => {
             if (
               !!group.menuColumns &&
@@ -116,7 +116,7 @@ const DefaultSideActions = ({
 };
 
 const Divider: React.FC = () => {
-  return <div className="hidden h-5 w-px bg-gray-700/30 sm:block"></div>;
+  return <div className="hidden h-5 w-px bg-hairline sm:block"></div>;
 };
 
 export default DesktopMenu;
diff --git a/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx b/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
index b84cbe8..204071e 100644
--- a/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
+++ b/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
@@ -25,12 +25,15 @@ export const MenuItemWithSubmenu: React.FC<MenuItemWithSubmenuProps> = ({
     <>
       <Popover.Button
         className={cx(
-          "flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-2 py-1 text-ssw-black focus:outline-none focus-visible:ring-opacity-0",
+          "flex cursor-pointer items-center justify-center gap-1 whitespace-nowrap rounded-md px-2 py-1 text-foreground focus:outline-none focus-visible:ring-opacity-0",
           isOpened ? "text-ssw-red" : "hover:text-ssw-red",
         )}
       >
         {name}
-        <MegaIcon icon="chevronDown" className="h-5 w-5 flex-none" />
+        <MegaIcon
+          icon="chevronDown"
+          className="h-4 w-4 flex-none text-muted-foreground"
+        />
       </Popover.Button>
 
       <Transition
diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index db652ef..9013970 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -3,6 +3,10 @@ import { CustomImage } from "../CustomImage";
 
 export type LogoSize = "small" | "medium" | "large";
 
+// White-with-red logo for dark backgrounds (matches the SSW footer). Swapped in
+// via the `dark:` scope rather than inverting, so the red ring is preserved.
+const DARK_LOGO = "https://www.ssw.com.au/images/ssw-logo-darkmode.svg";
+
 const Logo: React.FC = () => {
   // show the xmas logo for 1-25 December
   const date = new Date();
@@ -18,7 +22,15 @@ const Logo: React.FC = () => {
         alt="SSW - Enterprise Software Development"
         height={60}
         width={100}
-        className="h-full"
+        className="h-full dark:hidden"
+      />
+      <CustomImage
+        src={DARK_LOGO}
+        alt=""
+        aria-hidden="true"
+        height={60}
+        width={100}
+        className="hidden h-full dark:block"
       />
       <span className="sr-only">SSW</span>
     </>
diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index fec4bea..0790fd2 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -92,9 +92,8 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             <CustomLink href={url || "/"} className="gap-1 whitespace-nowrap">
               <div className="flex min-w-[4rem] max-w-[14rem] items-center">
                 <Logo />
-
                 {tagline && (
-                  <div className="w-fit whitespace-break-spaces text-xs font-semibold uppercase leading-3 text-gray-700">
+                  <div className="w-fit whitespace-break-spaces text-xs font-semibold uppercase leading-3 text-muted-foreground">
                     <span className="ml-3 hidden xl:block">{tagline}</span>
                   </div>
                 )}
diff --git a/lib/components/Search/Search.tsx b/lib/components/Search/Search.tsx
index 52b01f3..8acf82d 100644
--- a/lib/components/Search/Search.tsx
+++ b/lib/components/Search/Search.tsx
@@ -43,7 +43,7 @@ export const Search: React.FC<SearchTermProps> = ({
   return (
     <>
       <button
-        className="rounded p-3 text-ssw-black hover:text-ssw-red"
+        className="rounded p-3 text-foreground hover:text-ssw-red"
         onClick={() => setIsOpen(true)}
       >
         <MegaIcon icon="magnifyingGlass" className="h-5 w-5" />
diff --git a/lib/components/ui/Divider.tsx b/lib/components/ui/Divider.tsx
index bce2e87..3c1dd00 100644
--- a/lib/components/ui/Divider.tsx
+++ b/lib/components/ui/Divider.tsx
@@ -2,5 +2,5 @@ import type { ClassValue } from "clsx";
 import { cx } from "../../util/cx";
 
 export const Divider = ({ className }: { className?: ClassValue }) => (
-  <div className={cx("h-4 w-px bg-gray-700/30", className)}></div>
+  <div className={cx("h-4 w-px bg-hairline", className)}></div>
 );
diff --git a/lib/index.css b/lib/index.css
index b5c61c9..b0edae8 100644
--- a/lib/index.css
+++ b/lib/index.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* SSW design tokens — mirror SSW.Website's styles.css so the menu themes via CSS
+   variables under a `.dark` scope. Consumers already define these globally; this
+   keeps the standalone preview themeable. */
+:root {
+  --text-strong: rgba(0, 0, 0, 0.9);
+  --text-weak: rgba(0, 0, 0, 0.6);
+  --background-base: #ffffff;
+  --hairline: #e5e7eb;
+  --logo-filter: none;
+}
+.dark {
+  --text-strong: #ffffff;
+  --text-weak: rgba(255, 255, 255, 0.78);
+  --background-base: #171717;
+  --hairline: #212121;
+  --logo-filter: brightness(0) invert(1);
+}
diff --git a/lib/index.ts b/lib/index.ts
index f1b3b4f..1cae37b 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -1,6 +1,8 @@
 import "./index.css";
 
 export * from "./components/MegaMenuLayout";
+export { Search } from "./components/Search";
+export { CountryDropdown } from "./components/CountryDropdown";
 export type { LinkComponentType } from "./hooks/useLinkComponent";
 
 export * from "./types/country";
diff --git a/package.json b/package.json
index 3f86ae4..dfac68a 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "prepare": "pnpm build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:scripts": "eslint --ignore-path .gitignore --max-warnings=0 ./lib --ext ts --ext tsx --ext js --ext jsx",
     "lint:styles": "stylelint ./lib/**/*.css",
diff --git a/src/index.css b/src/index.css
index b5c61c9..b0edae8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* SSW design tokens — mirror SSW.Website's styles.css so the menu themes via CSS
+   variables under a `.dark` scope. Consumers already define these globally; this
+   keeps the standalone preview themeable. */
+:root {
+  --text-strong: rgba(0, 0, 0, 0.9);
+  --text-weak: rgba(0, 0, 0, 0.6);
+  --background-base: #ffffff;
+  --hairline: #e5e7eb;
+  --logo-filter: none;
+}
+.dark {
+  --text-strong: #ffffff;
+  --text-weak: rgba(255, 255, 255, 0.78);
+  --background-base: #171717;
+  --hairline: #212121;
+  --logo-filter: brightness(0) invert(1);
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 08fdc8a..2b2a912 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 import defaultTheme from "tailwindcss/defaultTheme";
 export default {
+  darkMode: "selector",
   content: ["./index.html", "./lib/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
   theme: {
     screens: {
@@ -9,6 +10,10 @@ export default {
     },
     extend: {
       colors: {
+        foreground: "var(--text-strong)",
+        background: "var(--background-base)",
+        "muted-foreground": "var(--text-weak)",
+        hairline: "var(--hairline)",
         ssw: {
           red: "#cc4141",
           light: {

From 5579df766621140566a5557994e696b6b930db19 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 16 Jul 2026 12:30:46 +1000
Subject: [PATCH 02/15] =?UTF-8?q?=F0=9F=92=84=20Use=20local=20dark-mode=20?=
 =?UTF-8?q?logo=20asset=20and=20hide=20tagline=20below=202xl?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Point the dark logo at the consuming site's /images/ssw-logo-darkmode.svg
(matches the footer) instead of the CDN URL. Show the tagline only at 2xl so the
nav doesn't overflow at the xl breakpoint on the themed homepage.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/components/Logo/Logo.tsx                     | 7 ++++---
 lib/components/MegaMenuLayout/MegaMenuLayout.tsx | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index 9013970..ff23a35 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -3,9 +3,10 @@ import { CustomImage } from "../CustomImage";
 
 export type LogoSize = "small" | "medium" | "large";
 
-// White-with-red logo for dark backgrounds (matches the SSW footer). Swapped in
-// via the `dark:` scope rather than inverting, so the red ring is preserved.
-const DARK_LOGO = "https://www.ssw.com.au/images/ssw-logo-darkmode.svg";
+// White-with-red logo for dark backgrounds (matches the SSW footer). Served from
+// the consuming site's /images dir; swapped in via the `dark:` scope rather than
+// inverting, so the red ring is preserved.
+const DARK_LOGO = "/images/ssw-logo-darkmode.svg";
 
 const Logo: React.FC = () => {
   // show the xmas logo for 1-25 December
diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index 0790fd2..3582571 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -94,7 +94,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
                 <Logo />
                 {tagline && (
                   <div className="w-fit whitespace-break-spaces text-xs font-semibold uppercase leading-3 text-muted-foreground">
-                    <span className="ml-3 hidden xl:block">{tagline}</span>
+                    <span className="ml-3 hidden 2xl:block">{tagline}</span>
                   </div>
                 )}
                 {title && (

From 6ca9d8686814b28d6618e770ae274b3c1b3d3314 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 16 Jul 2026 12:43:07 +1000
Subject: [PATCH 03/15] =?UTF-8?q?=F0=9F=92=84=20Enlarge=20logo=20(natural?=
 =?UTF-8?q?=20aspect)=20and=20theme=20the=20mobile=20hamburger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Size both logos by their natural aspect (h-14 w-auto) instead of squeezing the
wide dark 332×98 mark into a 100×60 box, so it no longer renders tiny. Make the
mobile hamburger use the foreground token so it's visible (white) in dark mode.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/components/Logo/Logo.tsx                     | 8 ++------
 lib/components/MegaMenuLayout/MegaMenuLayout.tsx | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index ff23a35..1c1c2c3 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -21,17 +21,13 @@ const Logo: React.FC = () => {
       <CustomImage
         src={logoPath}
         alt="SSW - Enterprise Software Development"
-        height={60}
-        width={100}
-        className="h-full dark:hidden"
+        className="h-14 w-auto object-contain dark:hidden"
       />
       <CustomImage
         src={DARK_LOGO}
         alt=""
         aria-hidden="true"
-        height={60}
-        width={100}
-        className="hidden h-full dark:block"
+        className="hidden h-14 w-auto object-contain dark:block"
       />
       <span className="sr-only">SSW</span>
     </>
diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index 3582571..47d56e0 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -122,7 +122,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             {isFlagVisible && <Divider />}
             <button
               type="button"
-              className="inline-flex items-center justify-center rounded-md pl-2 text-gray-700"
+              className="inline-flex items-center justify-center rounded-md pl-2 text-foreground"
               onClick={() => setMobileMenuOpen(true)}
             >
               <span className="sr-only">Open main menu</span>

From ca26a18020ad753b2a24bfc6465fb68713f2aa55 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 16 Jul 2026 14:50:36 +1000
Subject: [PATCH 04/15] =?UTF-8?q?=F0=9F=92=84=20Ease=20dark=20lockup=20log?=
 =?UTF-8?q?o=20down=20between=201280-1400px=20so=20nav=20actions=20fit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 lib/components/Logo/Logo.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index 1c1c2c3..4fda575 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -27,7 +27,11 @@ const Logo: React.FC = () => {
         src={DARK_LOGO}
         alt=""
         aria-hidden="true"
-        className="hidden h-14 w-auto object-contain dark:block"
+        // The dark logo is the full "SSW Enterprise Software Development" lockup,
+        // ~2x wider than the light mark, and only fits the nav at full size from
+        // ~1400px up. Between xl (1280) and 1400 ease it down a notch so the nav
+        // actions stay on-screen; ≥1400 (incl. the 1440 Figma) keeps h-14.
+        className="hidden h-14 w-auto object-contain dark:block xl:h-11 min-[1400px]:h-14"
       />
       <span className="sr-only">SSW</span>
     </>

From 5904cfd528da53917c738248b1c2c05b96bc66f2 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 16 Jul 2026 15:36:01 +1000
Subject: [PATCH 05/15] =?UTF-8?q?=F0=9F=92=84=20Hide=20the=20tagline=20spa?=
 =?UTF-8?q?n=20in=20dark=20mode=20=E2=80=94=20the=20dark=20lockup=20logo?=
 =?UTF-8?q?=20bakes=20it=20in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 lib/components/MegaMenuLayout/MegaMenuLayout.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index 47d56e0..1af1f5e 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -94,7 +94,9 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
                 <Logo />
                 {tagline && (
                   <div className="w-fit whitespace-break-spaces text-xs font-semibold uppercase leading-3 text-muted-foreground">
-                    <span className="ml-3 hidden 2xl:block">{tagline}</span>
+                    <span className="ml-3 hidden 2xl:block 2xl:dark:hidden">
+                      {tagline}
+                    </span>
                   </div>
                 )}
                 {title && (

From fbcb910e0880f415522d89fc2e65388e2606286e Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 16 Jul 2026 15:45:38 +1000
Subject: [PATCH 06/15] =?UTF-8?q?=F0=9F=92=84=20Use=20a=20mark-only=20dark?=
 =?UTF-8?q?=20logo=20so=20both=20themes=20share=20the=20same=20logo=20trea?=
 =?UTF-8?q?tment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 lib/components/Logo/Logo.tsx                     | 14 +++++---------
 lib/components/MegaMenuLayout/MegaMenuLayout.tsx |  4 +---
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index 4fda575..93554fc 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -3,10 +3,10 @@ import { CustomImage } from "../CustomImage";
 
 export type LogoSize = "small" | "medium" | "large";
 
-// White-with-red logo for dark backgrounds (matches the SSW footer). Served from
-// the consuming site's /images dir; swapped in via the `dark:` scope rather than
-// inverting, so the red ring is preserved.
-const DARK_LOGO = "/images/ssw-logo-darkmode.svg";
+// White-with-red mark for dark backgrounds, served from the consuming site's
+// /images dir; swapped in via the `dark:` scope rather than inverting, so the
+// red ring is preserved. Mark-only so it mirrors the light logo exactly.
+const DARK_LOGO = "/images/ssw-logo-darkmode-mark.svg";
 
 const Logo: React.FC = () => {
   // show the xmas logo for 1-25 December
@@ -27,11 +27,7 @@ const Logo: React.FC = () => {
         src={DARK_LOGO}
         alt=""
         aria-hidden="true"
-        // The dark logo is the full "SSW Enterprise Software Development" lockup,
-        // ~2x wider than the light mark, and only fits the nav at full size from
-        // ~1400px up. Between xl (1280) and 1400 ease it down a notch so the nav
-        // actions stay on-screen; ≥1400 (incl. the 1440 Figma) keeps h-14.
-        className="hidden h-14 w-auto object-contain dark:block xl:h-11 min-[1400px]:h-14"
+        className="hidden h-14 w-auto object-contain dark:block"
       />
       <span className="sr-only">SSW</span>
     </>
diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index 1af1f5e..47d56e0 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -94,9 +94,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
                 <Logo />
                 {tagline && (
                   <div className="w-fit whitespace-break-spaces text-xs font-semibold uppercase leading-3 text-muted-foreground">
-                    <span className="ml-3 hidden 2xl:block 2xl:dark:hidden">
-                      {tagline}
-                    </span>
+                    <span className="ml-3 hidden 2xl:block">{tagline}</span>
                   </div>
                 )}
                 {title && (

From ca3995ef40dd91e5947c36988dc1e700e88daad5 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 16 Jul 2026 15:51:56 +1000
Subject: [PATCH 07/15] =?UTF-8?q?=F0=9F=92=84=20Logo=20is=20just=20the=20i?=
 =?UTF-8?q?mage:=20dark=20uses=20the=20lockup=20SVG,=20no=20tagline=20span?=
 =?UTF-8?q?=20on=20homepage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 lib/components/Logo/Logo.tsx                     | 7 ++-----
 lib/components/MegaMenuLayout/MegaMenuLayout.tsx | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index 93554fc..b4cfeba 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -3,10 +3,7 @@ import { CustomImage } from "../CustomImage";
 
 export type LogoSize = "small" | "medium" | "large";
 
-// White-with-red mark for dark backgrounds, served from the consuming site's
-// /images dir; swapped in via the `dark:` scope rather than inverting, so the
-// red ring is preserved. Mark-only so it mirrors the light logo exactly.
-const DARK_LOGO = "/images/ssw-logo-darkmode-mark.svg";
+const DARK_LOGO = "/images/ssw-logo-darkmode.svg";
 
 const Logo: React.FC = () => {
   // show the xmas logo for 1-25 December
@@ -27,7 +24,7 @@ const Logo: React.FC = () => {
         src={DARK_LOGO}
         alt=""
         aria-hidden="true"
-        className="hidden h-14 w-auto object-contain dark:block"
+        className="hidden h-14 w-auto object-contain dark:block xl:h-11 min-[1400px]:h-14"
       />
       <span className="sr-only">SSW</span>
     </>
diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index 47d56e0..ceee114 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -94,7 +94,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
                 <Logo />
                 {tagline && (
                   <div className="w-fit whitespace-break-spaces text-xs font-semibold uppercase leading-3 text-muted-foreground">
-                    <span className="ml-3 hidden 2xl:block">{tagline}</span>
+                    <span className="ml-3 hidden xl:block">{tagline}</span>
                   </div>
                 )}
                 {title && (

From f5713f3397c3f993397040e75b666f3da45eec94 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 16 Jul 2026 15:55:47 +1000
Subject: [PATCH 08/15] =?UTF-8?q?=F0=9F=94=A5=20Remove=20the=20tagline=20s?=
 =?UTF-8?q?pan=20entirely=20=E2=80=94=20the=20logo=20is=20only=20ever=20th?=
 =?UTF-8?q?e=20image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 lib/components/Logo/Logo.tsx                     | 1 -
 lib/components/MegaMenuLayout/MegaMenuLayout.tsx | 6 ------
 2 files changed, 7 deletions(-)

diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index b4cfeba..c56c879 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -26,7 +26,6 @@ const Logo: React.FC = () => {
         aria-hidden="true"
         className="hidden h-14 w-auto object-contain dark:block xl:h-11 min-[1400px]:h-14"
       />
-      <span className="sr-only">SSW</span>
     </>
   );
 };
diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index ceee114..51ff883 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -44,7 +44,6 @@ export type Title = {
 
 const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
   className = "",
-  tagline,
   title,
   url,
   subtitle,
@@ -92,11 +91,6 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             <CustomLink href={url || "/"} className="gap-1 whitespace-nowrap">
               <div className="flex min-w-[4rem] max-w-[14rem] items-center">
                 <Logo />
-                {tagline && (
-                  <div className="w-fit whitespace-break-spaces text-xs font-semibold uppercase leading-3 text-muted-foreground">
-                    <span className="ml-3 hidden xl:block">{tagline}</span>
-                  </div>
-                )}
                 {title && (
                   <div className="mb-3 ml-2 mt-2 text-4xl leading-5">
                     {title}

From bee69c822c4b428cc26922ccf1ad9d129b67bf37 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 16 Jul 2026 16:34:59 +1000
Subject: [PATCH 09/15] =?UTF-8?q?=F0=9F=92=84=20Theme=20the=20desktop=20dr?=
 =?UTF-8?q?opdown=20for=20dark=20mode=20and=20skin=20the=20light=20logo=20?=
 =?UTF-8?q?to=20match?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dropdown panel/sidebar/text get dark variants (only under .dark, so
  every non-home route stays byte-identical)
- Light logo uses the recolored twin of the dark lockup SVG so the two
  themes share identical geometry

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../DesktopMenu/MenuItemWithSubmenu.tsx         |  2 +-
 lib/components/Logo/Logo.tsx                    |  5 +++--
 lib/components/SubMenuGroup/SubMenuGroup.tsx    | 17 +++++++++++------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx b/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
index 204071e..6ce511d 100644
--- a/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
+++ b/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
@@ -45,7 +45,7 @@ export const MenuItemWithSubmenu: React.FC<MenuItemWithSubmenuProps> = ({
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 -translate-y-1"
       >
-        <Popover.Panel className="absolute inset-x-0 top-[120px] -z-10 bg-gray-50 shadow-md shadow-gray-400">
+        <Popover.Panel className="absolute inset-x-0 top-[120px] -z-10 bg-gray-50 shadow-md shadow-gray-400 dark:bg-[#151515] dark:shadow-black/50">
           <SubMenuGroup
             menuColumns={menuColumns}
             sidebarItems={sidebarItems}
diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index c56c879..6b22243 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -3,6 +3,7 @@ import { CustomImage } from "../CustomImage";
 
 export type LogoSize = "small" | "medium" | "large";
 
+const LIGHT_LOGO = "/images/ssw-logo-lightmode.svg";
 const DARK_LOGO = "/images/ssw-logo-darkmode.svg";
 
 const Logo: React.FC = () => {
@@ -11,14 +12,14 @@ const Logo: React.FC = () => {
   const isXmas = date.getMonth() === 11 && date.getDate() <= 25;
   const logoPath = isXmas
     ? "https://www.ssw.com.au/images/ssw-logo-xmas.svg"
-    : "https://www.ssw.com.au/images/ssw-logo.svg";
+    : LIGHT_LOGO;
 
   return (
     <>
       <CustomImage
         src={logoPath}
         alt="SSW - Enterprise Software Development"
-        className="h-14 w-auto object-contain dark:hidden"
+        className="h-14 w-auto object-contain dark:hidden xl:h-11 min-[1400px]:h-14"
       />
       <CustomImage
         src={DARK_LOGO}
diff --git a/lib/components/SubMenuGroup/SubMenuGroup.tsx b/lib/components/SubMenuGroup/SubMenuGroup.tsx
index bc3407e..50f9a7c 100644
--- a/lib/components/SubMenuGroup/SubMenuGroup.tsx
+++ b/lib/components/SubMenuGroup/SubMenuGroup.tsx
@@ -49,7 +49,7 @@ export const SubMenuGroup: React.FC<SubMenuGroupProps> = ({
           ))}
         </div>
 
-        <div className="shrink-0 overflow-x-hidden bg-gray-100 lg:relative lg:w-[350px] lg:before:absolute lg:before:inset-0 lg:before:-z-10 lg:before:w-[1000px] lg:before:bg-gray-50">
+        <div className="shrink-0 overflow-x-hidden bg-gray-100 dark:bg-[#1b1b1b] lg:relative lg:w-[350px] lg:before:absolute lg:before:inset-0 lg:before:-z-10 lg:before:w-[1000px] lg:before:bg-gray-50 lg:dark:before:bg-[#151515]">
           <div className="flex flex-col gap-y-2 px-6 pb-8 pt-4">
             {sidebarItems?.map((sideBarItem, i) => (
               <div key={i}>
@@ -89,7 +89,12 @@ const Heading: React.FC<{
   children: React.ReactNode;
 }> = ({ className, children }) => {
   return (
-    <h3 className={cx("pb-2 pl-2 text-lg font-bold text-ssw-black", className)}>
+    <h3
+      className={cx(
+        "pb-2 pl-2 text-lg font-bold text-ssw-black dark:text-white",
+        className,
+      )}
+    >
       {children}
     </h3>
   );
@@ -134,7 +139,7 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
       <CustomLink
         href={url || ""}
         className={cx(
-          "flex items-start gap-x-1 text-ssw-black hover:text-ssw-red focus:outline-none",
+          "flex items-start gap-x-1 text-ssw-black hover:text-ssw-red focus:outline-none dark:text-white",
           description ? "p-4" : "p-2",
         )}
         onClick={() => {
@@ -156,19 +161,19 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
             {name && description ? (
               <>
                 <p className="font-bold">{name}</p>
-                <p className="mt-1 text-sm font-normal text-ssw-gray">
+                <p className="mt-1 text-sm font-normal text-ssw-gray dark:text-white/60">
                   {description}
                 </p>
               </>
             ) : (
-              <p className="pl-2 text-sm font-normal text-ssw-black hover:text-ssw-red">
+              <p className="pl-2 text-sm font-normal text-ssw-black hover:text-ssw-red dark:text-white">
                 {name}
               </p>
             )}
           </span>
         </div>
       </CustomLink>
-      <div className="ml-10 flex flex-row gap-x-4 text-sm font-light text-ssw-gray">
+      <div className="ml-10 flex flex-row gap-x-4 text-sm font-light text-ssw-gray dark:text-white/60">
         {youtubeLink && (
           <CustomLink href={youtubeLink} className="hover:text-ssw-red">
             YouTube

From 2ddfcc2b3e1cbb49d986f7e3ccaa9af5e37d82f4 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Tue, 21 Jul 2026 15:12:50 +1000
Subject: [PATCH 10/15] =?UTF-8?q?=F0=9F=92=84=20Theme=20the=20dropdown=20s?=
 =?UTF-8?q?idebar=20widget=20items=20for=20dark=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The classicMenu/featured widget links kept text-ssw-black, so the right-hand
"Latest Videos"/"Support" lists rendered dark-on-dark in the homepage's dark
dropdown. Add dark:text-white (and dark:text-white/60 for descriptions).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 lib/components/SubMenuGroup/SubMenuWidget.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/components/SubMenuGroup/SubMenuWidget.tsx b/lib/components/SubMenuGroup/SubMenuWidget.tsx
index c21d441..e09731f 100644
--- a/lib/components/SubMenuGroup/SubMenuWidget.tsx
+++ b/lib/components/SubMenuGroup/SubMenuWidget.tsx
@@ -43,11 +43,13 @@ const SubMenuWidget: React.FC<SubMenuWidgetProps> = ({ item }) => {
         <CustomLink className="block" href={item.url}>
           {item.name && item.description ? (
             <>
-              <span className="font-bold">{item.name}</span>
-              <p className="mt-2 text-sm">{item.description}</p>
+              <span className="font-bold dark:text-white">{item.name}</span>
+              <p className="mt-2 text-sm dark:text-white/60">
+                {item.description}
+              </p>
             </>
           ) : (
-            <span className="pl-4 text-sm font-normal text-ssw-black">
+            <span className="pl-4 text-sm font-normal text-ssw-black dark:text-white">
               {item.name}
             </span>
           )}

From 4478ce90498ac7879482af18b334f90fda9beec9 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Wed, 22 Jul 2026 11:27:58 +1000
Subject: [PATCH 11/15] =?UTF-8?q?=F0=9F=A7=B9=20Fix=20Tailwind=20class=20o?=
 =?UTF-8?q?rder=20to=20satisfy=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reorder dark: variants after the responsive/size variants in Logo and the
dropdown sidebar (prettier-plugin-tailwindcss); no rendered change.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 lib/components/Logo/Logo.tsx                 | 4 ++--
 lib/components/SubMenuGroup/SubMenuGroup.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index 6b22243..6889e19 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -19,13 +19,13 @@ const Logo: React.FC = () => {
       <CustomImage
         src={logoPath}
         alt="SSW - Enterprise Software Development"
-        className="h-14 w-auto object-contain dark:hidden xl:h-11 min-[1400px]:h-14"
+        className="h-14 w-auto object-contain xl:h-11 min-[1400px]:h-14 dark:hidden"
       />
       <CustomImage
         src={DARK_LOGO}
         alt=""
         aria-hidden="true"
-        className="hidden h-14 w-auto object-contain dark:block xl:h-11 min-[1400px]:h-14"
+        className="hidden h-14 w-auto object-contain xl:h-11 min-[1400px]:h-14 dark:block"
       />
     </>
   );
diff --git a/lib/components/SubMenuGroup/SubMenuGroup.tsx b/lib/components/SubMenuGroup/SubMenuGroup.tsx
index 50f9a7c..8d69f3b 100644
--- a/lib/components/SubMenuGroup/SubMenuGroup.tsx
+++ b/lib/components/SubMenuGroup/SubMenuGroup.tsx
@@ -49,7 +49,7 @@ export const SubMenuGroup: React.FC<SubMenuGroupProps> = ({
           ))}
         </div>
 
-        <div className="shrink-0 overflow-x-hidden bg-gray-100 dark:bg-[#1b1b1b] lg:relative lg:w-[350px] lg:before:absolute lg:before:inset-0 lg:before:-z-10 lg:before:w-[1000px] lg:before:bg-gray-50 lg:dark:before:bg-[#151515]">
+        <div className="shrink-0 overflow-x-hidden bg-gray-100 lg:relative lg:w-[350px] lg:before:absolute lg:before:inset-0 lg:before:-z-10 lg:before:w-[1000px] lg:before:bg-gray-50 dark:bg-[#1b1b1b] lg:dark:before:bg-[#151515]">
           <div className="flex flex-col gap-y-2 px-6 pb-8 pt-4">
             {sidebarItems?.map((sideBarItem, i) => (
               <div key={i}>

From 2e84dd4334577b74ca3f7b2f0aa531044f807028 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Wed, 22 Jul 2026 14:45:05 +1000
Subject: [PATCH 12/15] =?UTF-8?q?=E2=9C=A8=20Add=20optional=20dark-mode=20?=
 =?UTF-8?q?icon=20for=20mega-menu=20products?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Products can supply a second icon shown only under the homepage's .dark
scope. MegaIcon renders both the default and dark icons and toggles them
with dark:hidden / hidden dark:block (CSS-only, no JS, no flash); products
with no dark variant render the single default icon exactly as before.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/components/MegaIcon/MegaIcon.tsx         | 23 ++++++++++++++++++--
 lib/components/SubMenuGroup/SubMenuGroup.tsx |  3 +++
 lib/types/megamenu.ts                        |  2 ++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/lib/components/MegaIcon/MegaIcon.tsx b/lib/components/MegaIcon/MegaIcon.tsx
index 73ccbf8..defba61 100644
--- a/lib/components/MegaIcon/MegaIcon.tsx
+++ b/lib/components/MegaIcon/MegaIcon.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { AvailableIcons, iconMap } from "../../types/icon";
 import { ICON_IMAGE_SIZES, IconSizes } from "../../util/constants";
+import { cx } from "../../util/cx";
 import { CustomImage } from "../CustomImage";
 
 const MegaIconMapper = ({
@@ -22,6 +23,7 @@ const MegaIconMapper = ({
 export interface MegaIconProps {
   // TODO: implement below intended solution extends React.ComponentPropsWithoutRef<"span"> {
   iconImg?: string;
+  iconImgDarkMode?: string;
   icon?: AvailableIcons;
   imgSize?: IconSizes;
   className?: string;
@@ -30,6 +32,7 @@ export interface MegaIconProps {
 export const MegaIcon: React.FC<MegaIconProps> = ({
   icon,
   iconImg,
+  iconImgDarkMode,
   imgSize = "small",
   className,
 }) => {
@@ -47,16 +50,32 @@ export const MegaIcon: React.FC<MegaIconProps> = ({
     );
   }
 
+  // When a dark-mode icon is supplied, render both and toggle with `dark:` so the
+  // swap resolves from the `.dark` scope in CSS (no JS, no flash); most products
+  // have no dark variant and just render the single default icon.
   return (
     <div>
       <CustomImage
-        className={ICON_IMAGE_SIZES[imgSize]}
+        className={cx(
+          ICON_IMAGE_SIZES[imgSize],
+          iconImgDarkMode && "dark:hidden",
+        )}
         src={iconImg}
-        alt={iconImg}
+        alt=""
         width={20}
         height={20}
         aria-hidden="true"
       />
+      {iconImgDarkMode && (
+        <CustomImage
+          className={cx(ICON_IMAGE_SIZES[imgSize], "hidden dark:block")}
+          src={iconImgDarkMode}
+          alt=""
+          width={20}
+          height={20}
+          aria-hidden="true"
+        />
+      )}
     </div>
   );
 };
diff --git a/lib/components/SubMenuGroup/SubMenuGroup.tsx b/lib/components/SubMenuGroup/SubMenuGroup.tsx
index 8d69f3b..58b80b0 100644
--- a/lib/components/SubMenuGroup/SubMenuGroup.tsx
+++ b/lib/components/SubMenuGroup/SubMenuGroup.tsx
@@ -65,6 +65,7 @@ export const SubMenuGroup: React.FC<SubMenuGroupProps> = ({
                     <MegaIcon
                       imgSize="medium"
                       iconImg={sideBarItem.iconImg}
+                      iconImgDarkMode={sideBarItem.iconImgDarkMode}
                       className={ICON_IMAGE_SIZES.medium}
                       icon={sideBarItem.icon as AvailableIcons}
                     />
@@ -127,6 +128,7 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
     description,
     icon,
     iconImg,
+    iconImgDarkMode,
     youtubeLink,
     documentationLink,
   },
@@ -152,6 +154,7 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
               className="h-6 w-6"
               icon={icon as AvailableIcons}
               iconImg={iconImg}
+              iconImgDarkMode={iconImgDarkMode}
             />
           </div>
         )}
diff --git a/lib/types/megamenu.ts b/lib/types/megamenu.ts
index 4a22d44..804e1ed 100644
--- a/lib/types/megamenu.ts
+++ b/lib/types/megamenu.ts
@@ -31,6 +31,7 @@ export interface NavMenuColumnGroupItem {
   description?: string;
   icon?: AvailableIcons | string;
   iconImg?: string;
+  iconImgDarkMode?: string;
   youtubeLink?: string;
   documentationLink?: string;
 }
@@ -39,6 +40,7 @@ export interface Sidebar {
   name: string;
   icon?: AvailableIcons | string;
   iconImg?: string;
+  iconImgDarkMode?: string;
   items?: SidebarItem[];
 }
 

From 99849a741299eb5631e7ee557bc16965e4358811 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Wed, 22 Jul 2026 14:54:35 +1000
Subject: [PATCH 13/15] =?UTF-8?q?=E2=9C=A8=20Read=20the=20mega-menu=20from?=
 =?UTF-8?q?=20the=20deploy's=20own=20origin=20on=20SSW=20hosts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useMenuItems fetched a hardcoded production endpoint, so preview slots (and
local dev) always rendered prod's menu and never their own content. Fetch
same-origin on ssw.com.au / *.azurewebsites.net / localhost, and keep the
canonical production URL as the fallback for any other consumer. Production
behaviour is unchanged — its own origin IS the canonical URL.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/hooks/useMenuItems.ts | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/lib/hooks/useMenuItems.ts b/lib/hooks/useMenuItems.ts
index 0cf0847..0635028 100644
--- a/lib/hooks/useMenuItems.ts
+++ b/lib/hooks/useMenuItems.ts
@@ -1,10 +1,27 @@
 import { useEffect, useState } from "react";
 import { NavMenuGroup } from "../types/megamenu";
 
-const API_URL = "https://www.ssw.com.au/api/get-megamenu";
+const CANONICAL_API_URL = "https://www.ssw.com.au/api/get-megamenu";
+
+// SSW's own deployments (production, PR preview slots, local dev) read the menu
+// from their OWN origin, so the nav reflects the content that shipped with that
+// build — this is what lets a preview slot show menu changes before they reach
+// production. Any other host falls back to SSW's canonical production endpoint,
+// preserving the previous cross-site behaviour.
+const SSW_HOST = /(^|\.)ssw\.com\.au$|\.azurewebsites\.net$|^localhost$/;
+
+const getApiUrl = () => {
+  if (
+    typeof window !== "undefined" &&
+    SSW_HOST.test(window.location.hostname)
+  ) {
+    return `${window.location.origin}/api/get-megamenu`;
+  }
+  return CANONICAL_API_URL;
+};
 
 const refreshData = async () => {
-  const res = await fetch(API_URL);
+  const res = await fetch(getApiUrl());
   const json = await res.json();
 
   const { menuGroups } = json;

From ec25bae486b91b2caa1d0d517f85e6fdc2b59d30 Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 23 Jul 2026 10:36:13 +1000
Subject: [PATCH 14/15] =?UTF-8?q?=E2=9C=A8=20Collapse=20nav=20to=20logo=20?=
 =?UTF-8?q?+=20hamburger=20below=20lg,=20move=20actions=20into=20the=20men?=
 =?UTF-8?q?u?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Below lg the bar shows only the logo and hamburger; the side actions (a
consumer override like the homepage's, or the default phone + region) move
into the hamburger panel, which also carries the search box. From lg up the
bar is unchanged. The panel takes a mobileMenuClassName so a themed consumer
can re-apply its scope to the portaled dialog (the homepage passes "dark" so
the panel gets the dark tokens), and small screens get some nav-bar y-padding.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../MegaMenuLayout/MegaMenuLayout.tsx         | 34 +++++-----
 lib/components/MobileMenu/MobileMenu.tsx      | 66 ++++++++++++++++---
 2 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index 51ff883..3c04705 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -29,6 +29,7 @@ export type MegaMenuWrapperProps = {
   callback?: (searchTerm: string) => void;
   linkComponent?: LinkComponentType;
   isFlagVisible?: boolean;
+  mobileMenuClassName?: string;
 } & React.PropsWithChildren &
   (Tagline | Title);
 
@@ -53,6 +54,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
   rightSideActionsOverride,
   callback,
   isFlagVisible = true,
+  mobileMenuClassName,
 }) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const performSearch = (e: React.FormEvent<HTMLFormElement>) => {
@@ -80,7 +82,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
       <div
         className={cx(
           className,
-          "relative z-10 flex w-full items-center justify-center px-4 sm:h-[120px]",
+          "relative z-10 flex w-full items-center justify-center px-4 max-sm:py-3 sm:h-[120px]",
         )}
       >
         <nav
@@ -105,15 +107,17 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             </CustomLink>
           </div>
           <div className="flex items-center xl:hidden">
-            {RightSideActions ? (
-              <div className="max-sm:hidden">
+            {/* From lg–xl these actions sit in the bar as before; below lg they
+                collapse into the hamburger, leaving just the logo + burger. */}
+            <div className="hidden items-center lg:flex">
+              {RightSideActions ? (
                 <RightSideActions />
-              </div>
-            ) : (
-              !hidePhone && <PhoneButton className="max-sm:hidden" />
-            )}
-            {isFlagVisible && <CountryDropdown />}
-            {isFlagVisible && <Divider />}
+              ) : (
+                !hidePhone && <PhoneButton />
+              )}
+              {isFlagVisible && <CountryDropdown />}
+              {isFlagVisible && <Divider />}
+            </div>
             <button
               type="button"
               className="inline-flex items-center justify-center rounded-md pl-2 text-foreground"
@@ -141,15 +145,13 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
           setSearchTerm={setSearchTerm}
           performSearch={performSearch}
           menuBarItems={menuItems}
+          sideActions={rightSideActionsOverride}
+          hidePhone={hidePhone}
+          isFlagVisible={isFlagVisible}
+          searchUrl={searchUrl}
+          mobileMenuClassName={mobileMenuClassName}
         />
       </div>
-      {RightSideActions ? (
-        <div className="sm:hidden">
-          <RightSideActions />
-        </div>
-      ) : (
-        !hidePhone && <PhoneButton className="flex-grow px-4 pb-4 sm:hidden" />
-      )}
     </>
   );
 };
diff --git a/lib/components/MobileMenu/MobileMenu.tsx b/lib/components/MobileMenu/MobileMenu.tsx
index 14875a8..3429c33 100644
--- a/lib/components/MobileMenu/MobileMenu.tsx
+++ b/lib/components/MobileMenu/MobileMenu.tsx
@@ -4,7 +4,10 @@ import React from "react";
 import { useLinkComponent } from "../../hooks/useLinkComponent";
 import { MenuContextProvider } from "../../hooks/useMenuState";
 import { NavMenuGroup } from "../../types/megamenu";
+import { cx } from "../../util/cx";
+import { CountryDropdown } from "../CountryDropdown";
 import { MegaIcon } from "../MegaIcon";
+import { PhoneButton } from "../PhoneButton";
 import { SearchInput, SearchTermProps } from "../Search";
 import SubMenuGroup from "../SubMenuGroup/SubMenuGroup";
 
@@ -12,6 +15,17 @@ export interface MobileMenuProps extends SearchTermProps {
   isMobileMenuOpen: boolean;
   menuBarItems: NavMenuGroup[];
   closeMobileMenu: () => void;
+  // Below lg the bar's actions collapse in here (see MegaMenuLayout). When the
+  // consumer overrides the side actions (e.g. the homepage) we render that;
+  // otherwise the default phone + region controls.
+  sideActions?: () => JSX.Element;
+  hidePhone?: boolean;
+  isFlagVisible?: boolean;
+  searchUrl?: string;
+  // Extra class for the (portaled) dialog root so a consumer can re-apply its
+  // theme scope: Headless UI portals this dialog to <body>, outside the page's
+  // scope, so e.g. the homepage passes "dark" to keep the dark tokens resolving.
+  mobileMenuClassName?: string;
 }
 
 const MobileMenu: React.FC<MobileMenuProps> = ({
@@ -21,6 +35,11 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
   setSearchTerm,
   searchTerm,
   performSearch,
+  sideActions,
+  hidePhone,
+  isFlagVisible,
+  searchUrl,
+  mobileMenuClassName,
 }) => {
   const [selectedMenuItem, setSelectedMenuItem] =
     React.useState<NavMenuGroup | null>(null);
@@ -29,13 +48,18 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
     closeMobileMenu();
   };
   return (
-    <Dialog as="div" open={isMobileMenuOpen} onClose={onCloseMobileMenu}>
+    <Dialog
+      as="div"
+      className={mobileMenuClassName}
+      open={isMobileMenuOpen}
+      onClose={onCloseMobileMenu}
+    >
       <div className="fixed inset-0 z-10" />
-      <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white sm:max-w-sm sm:ring-1 sm:ring-ssw-black/10 xl:hidden">
+      <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white sm:max-w-sm sm:ring-1 sm:ring-ssw-black/10 xl:hidden dark:bg-[#090909] dark:sm:ring-white/10">
         <div className="flex h-16 items-center justify-end p-4">
           <button
             type="button"
-            className="p-2 text-gray-700 xs:p-4"
+            className="p-2 text-gray-700 xs:p-4 dark:text-white"
             onClick={onCloseMobileMenu}
           >
             <span className="sr-only">Close menu</span>
@@ -44,7 +68,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
           {selectedMenuItem && (
             <div className="my-auto flex grow items-center pl-2">
               <button
-                className="text-sm font-semibold leading-4 text-ssw-black"
+                className="text-sm font-semibold leading-4 text-ssw-black dark:text-white"
                 onClick={() => setSelectedMenuItem(null)}
               >
                 <MegaIcon className="mb-1 inline h-5 w-5" icon="chevronLeft" />
@@ -70,6 +94,10 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
               performSearch={performSearch}
               menuBarItems={menuBarItems}
               setSelectedMenuItem={setSelectedMenuItem}
+              sideActions={sideActions}
+              hidePhone={hidePhone}
+              isFlagVisible={isFlagVisible}
+              searchUrl={searchUrl}
             />
           )}
         </div>
@@ -81,6 +109,10 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
 interface MenuBarItemProps extends SearchTermProps {
   menuBarItems: NavMenuGroup[];
   setSelectedMenuItem: (item: NavMenuGroup) => void;
+  sideActions?: () => JSX.Element;
+  hidePhone?: boolean;
+  isFlagVisible?: boolean;
+  searchUrl?: string;
 }
 
 const MenuBarItems: React.FC<MenuBarItemProps> = ({
@@ -89,8 +121,13 @@ const MenuBarItems: React.FC<MenuBarItemProps> = ({
   performSearch,
   setSearchTerm,
   searchTerm,
+  sideActions,
+  hidePhone,
+  isFlagVisible,
+  searchUrl,
 }) => {
   const CustomLink = useLinkComponent();
+  const SideActions = sideActions;
 
   return (
     <div className="-my-6 flex flex-col gap-4 pl-6">
@@ -100,19 +137,19 @@ const MenuBarItems: React.FC<MenuBarItemProps> = ({
             <CustomLink
               key={`link-${item.name}-${index}`}
               href={item.url}
-              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red"
+              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red dark:text-white"
             >
               {item.name}
             </CustomLink>
           ) : (
             <button
               key={`button-${item.name}-${index}`}
-              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red"
+              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red dark:text-white"
               onClick={() => setSelectedMenuItem(item)}
             >
               {item.name}
               <ChevronRightIcon
-                className="ml-2 inline h-4 w-4 text-ssw-black"
+                className="ml-2 inline h-4 w-4 text-ssw-black dark:text-white"
                 aria-hidden="true"
               />
             </button>
@@ -123,9 +160,22 @@ const MenuBarItems: React.FC<MenuBarItemProps> = ({
         performSearch={performSearch}
         setSearchTerm={setSearchTerm}
         searchTerm={searchTerm}
-        className="relative pr-6"
+        // When an override supplies its own search, only show this box at lg–xl
+        // (its own search covers below-lg, avoiding a duplicate).
+        className={cx("relative pr-6", SideActions && "hidden lg:block")}
         inputClassName="border-radius h-12 grow rounded-l-md border bg-transparent pl-11 text-ssw-black focus:ring-0 sm:text-sm"
       />
+      {/* The bar actions live here below lg; at lg+ they render in the bar. */}
+      <div className="pr-6 lg:hidden">
+        {SideActions ? (
+          <SideActions />
+        ) : (
+          <div className="flex flex-col items-start gap-4">
+            {!hidePhone && <PhoneButton />}
+            {isFlagVisible && <CountryDropdown url={searchUrl} />}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

From 1c4f6d891487a3adff448e9450bf1880e5c459be Mon Sep 17 00:00:00 2001
From: Josh Berman <joshberman@ssw.com.au>
Date: Thu, 23 Jul 2026 13:49:09 +1000
Subject: [PATCH 15/15] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Bump=20version=20to?=
 =?UTF-8?q?=204.14.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New nav behaviour (collapse to logo + hamburger below lg, actions in the
hamburger), an optional mobileMenuClassName for theming the portaled panel,
and optional dark-mode product icons — all backward compatible.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index dfac68a..6aa9ee2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ssw.megamenu",
-  "version": "4.13.10",
+  "version": "4.14.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/SSWConsulting/SSW.MegaMenu"
@@ -92,4 +92,4 @@
     ]
   },
   "packageManager": "pnpm@9.5.0"
-}
\ No newline at end of file
+}