@eeacms/volto-eea-website-theme 4.3.1 → 4.3.3

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [4.3.3](https://github.com/eea/volto-eea-website-theme/compare/4.3.2...4.3.3) - 26 May 2026
+
+### [4.3.2](https://github.com/eea/volto-eea-website-theme/compare/4.3.1...4.3.2) - 15 May 2026
+
+#### :bug: Bug Fixes
+
+- fix(Header): use navroot language to fetch navigation, fix subsite case - refs #303244 [Miu Razvan - [`c25711e`](https://github.com/eea/volto-eea-website-theme/commit/c25711ec3f8492d442c9a130e5e4cb9feb1e80ad)]
+
 ### [4.3.1](https://github.com/eea/volto-eea-website-theme/compare/4.3.0...4.3.1) - 14 May 2026
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "4.3.1",
+  "version": "4.3.3",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/volto/components/manage/Form/BlocksToolbar.jsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
+import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers/Blocks/Blocks';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Plug } from '@plone/volto/components/manage/Pluggable';
+import { v4 as uuid } from 'uuid';
+import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
+import without from 'lodash/without';
+
+import {
+  setBlocksClipboard,
+  resetBlocksClipboard,
+} from '@plone/volto/actions/blocksClipboard/blocksClipboard';
+import config from '@plone/volto/registry';
+
+import copySVG from '@plone/volto/icons/copy.svg';
+import cutSVG from '@plone/volto/icons/cut.svg';
+import pasteSVG from '@plone/volto/icons/paste.svg';
+import trashSVG from '@plone/volto/icons/delete.svg';
+import {
+  cloneBlocks,
+  loadBlocksClipboardFromStorage,
+} from './blocksClipboardUtils';
+
+export class BlocksToolbarComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.copyBlocksToClipboard = this.copyBlocksToClipboard.bind(this);
+    this.cutBlocksToClipboard = this.cutBlocksToClipboard.bind(this);
+    this.deleteBlocks = this.deleteBlocks.bind(this);
+    this.loadFromStorage = this.loadFromStorage.bind(this);
+    this.pasteBlocks = this.pasteBlocks.bind(this);
+    this.setBlocksClipboard = this.setBlocksClipboard.bind(this);
+  }
+
+  loadFromStorage(event) {
+    if (event?.key && !event.key.includes('blocksClipboard')) {
+      return;
+    }
+
+    const clipboard = loadBlocksClipboardFromStorage();
+    const currentClipboard = this.props.blocksClipboard || {};
+    const currentClipboardHasBlocks =
+      currentClipboard?.cut || currentClipboard?.copy;
+
+    if (!event && !clipboard && currentClipboardHasBlocks) {
+      return;
+    }
+
+    if (!isEqual(clipboard || {}, currentClipboard)) {
+      this.props.setBlocksClipboard(clipboard || {});
+    }
+  }
+
+  componentDidMount() {
+    this.loadFromStorage();
+    window.addEventListener('storage', this.loadFromStorage, true);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('storage', this.loadFromStorage);
+  }
+
+  deleteBlocks() {
+    const blockIds = this.props.selectedBlocks;
+
+    const { formData } = this.props;
+    const blocksFieldname = getBlocksFieldname(formData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+
+    // Might need ReactDOM.unstable_batchedUpdates()
+    this.props.onSelectBlock(null);
+    const newBlockData = {
+      [blocksFieldname]: omit(formData[blocksFieldname], blockIds),
+      [blocksLayoutFieldname]: {
+        ...formData[blocksLayoutFieldname],
+        items: without(formData[blocksLayoutFieldname].items, ...blockIds),
+      },
+    };
+    this.props.onChangeBlocks(newBlockData);
+  }
+
+  copyBlocksToClipboard() {
+    this.setBlocksClipboard('copy');
+  }
+
+  cutBlocksToClipboard() {
+    this.setBlocksClipboard('cut');
+    this.deleteBlocks();
+  }
+
+  setBlocksClipboard(actionType) {
+    const { formData } = this.props;
+    const blocksFieldname = getBlocksFieldname(formData);
+    const blocks = formData[blocksFieldname];
+    const blocksData = this.props.selectedBlocks
+      .map((blockId) => [blockId, blocks[blockId]])
+      .filter(([blockId]) => !!blockId); // Removes null blocks
+    this.props.setBlocksClipboard({ [actionType]: blocksData });
+    this.props.onSetSelectedBlocks([]);
+  }
+
+  pasteBlocks(e) {
+    const { formData, blocksClipboard = {}, selectedBlock } = this.props;
+    const mode = Object.keys(blocksClipboard).includes('cut') ? 'cut' : 'copy';
+    const blocksData = blocksClipboard[mode] || [];
+    const cloneWithIds = blocksData
+      .filter(([blockId, blockData]) => blockId && !!blockData['@type']) // Removes null blocks
+      .map(([blockId, blockData]) => {
+        const blockConfig = config.blocks.blocksConfig[blockData['@type']];
+        return mode === 'copy'
+          ? blockConfig.cloneData
+            ? blockConfig.cloneData(blockData)
+            : [uuid(), cloneBlocks(blockData)]
+          : [blockId, blockData]; // if cut/pasting blocks, we don't clone
+      })
+      .filter((info) => !!info); // some blocks may refuse to be copied
+    const blocksFieldname = getBlocksFieldname(formData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+    const selectedIndex =
+      formData[blocksLayoutFieldname].items.indexOf(selectedBlock) + 1;
+
+    const newBlockData = {
+      [blocksFieldname]: {
+        ...formData[blocksFieldname],
+        ...Object.assign(
+          {},
+          ...cloneWithIds.map(([id, data]) => ({ [id]: data })),
+        ),
+      },
+      [blocksLayoutFieldname]: {
+        ...formData[blocksLayoutFieldname],
+        items: [
+          ...formData[blocksLayoutFieldname].items.slice(0, selectedIndex),
+          ...cloneWithIds.map(([id]) => id),
+          ...formData[blocksLayoutFieldname].items.slice(selectedIndex),
+        ],
+      },
+    };
+
+    if (!(e.ctrlKey || e.metaKey)) this.props.resetBlocksClipboard();
+    this.props.onChangeBlocks(newBlockData);
+  }
+
+  render() {
+    const {
+      blocksClipboard = {},
+      selectedBlock,
+      selectedBlocks,
+      intl,
+    } = this.props;
+    return (
+      <>
+        {selectedBlocks.length > 0 ? (
+          <>
+            <Plug pluggable="main.toolbar.bottom" id="blocks-delete-btn">
+              <button
+                aria-label={intl.formatMessage(messages.deleteBlocks)}
+                onClick={this.deleteBlocks}
+                tabIndex={0}
+                className="deleteBlocks"
+                id="toolbar-delete-blocks"
+              >
+                <Icon name={trashSVG} size="30px" />
+              </button>
+            </Plug>
+            <Plug pluggable="main.toolbar.bottom" id="blocks-cut-btn">
+              <button
+                aria-label={intl.formatMessage(messages.cutBlocks)}
+                onClick={this.cutBlocksToClipboard}
+                tabIndex={0}
+                className="cutBlocks"
+                id="toolbar-cut-blocks"
+              >
+                <Icon name={cutSVG} size="30px" />
+              </button>
+            </Plug>
+            <Plug pluggable="main.toolbar.bottom" id="blocks-copy-btn">
+              <button
+                aria-label={intl.formatMessage(messages.copyBlocks)}
+                onClick={this.copyBlocksToClipboard}
+                tabIndex={0}
+                className="copyBlocks"
+                id="toolbar-copy-blocks"
+              >
+                <Icon name={copySVG} size="30px" />
+              </button>
+            </Plug>
+          </>
+        ) : (
+          ''
+        )}
+        {selectedBlock && (blocksClipboard?.cut || blocksClipboard?.copy) && (
+          <Plug
+            pluggable="main.toolbar.bottom"
+            id="block-paste-btn"
+            dependencies={[selectedBlock]}
+          >
+            <button
+              aria-label={intl.formatMessage(messages.pasteBlocks)}
+              onClick={this.pasteBlocks}
+              tabIndex={0}
+              className="pasteBlocks"
+              id="toolbar-paste-blocks"
+            >
+              <span className="blockCount">
+                {(blocksClipboard.cut || blocksClipboard.copy).length}
+              </span>
+              <Icon name={pasteSVG} size="30px" />
+            </button>
+          </Plug>
+        )}
+      </>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state) => {
+      return {
+        blocksClipboard: state?.blocksClipboard || {},
+      };
+    },
+    { setBlocksClipboard, resetBlocksClipboard },
+  ),
+)(BlocksToolbarComponent);

package/src/customizations/volto/components/manage/Form/BlocksToolbar.jsx.diff

@@ -0,0 +1,33 @@
+13d12
+< import { load } from 'redux-localstorage-simple';
+28c27,30
+< import { cloneBlocks } from '@plone/volto/helpers/Blocks/cloneBlocks';
+---
+> import {
+>   cloneBlocks,
+>   loadBlocksClipboardFromStorage,
+> } from './blocksClipboardUtils';
+42,44c44,58
+<   loadFromStorage() {
+<     const clipboard = load({ states: ['blocksClipboard'] })?.blocksClipboard;
+<     if (!isEqual(clipboard, this.props.blocksClipboard))
+---
+>   loadFromStorage(event) {
+>     if (event?.key && !event.key.includes('blocksClipboard')) {
+>       return;
+>     }
+>
+>     const clipboard = loadBlocksClipboardFromStorage();
+>     const currentClipboard = this.props.blocksClipboard || {};
+>     const currentClipboardHasBlocks =
+>       currentClipboard?.cut || currentClipboard?.copy;
+>
+>     if (!event && !clipboard && currentClipboardHasBlocks) {
+>       return;
+>     }
+>
+>     if (!isEqual(clipboard || {}, currentClipboard)) {
+45a60
+>     }
+48a64
+>     this.loadFromStorage();

package/src/customizations/volto/components/manage/Form/BlocksToolbar.jsx.md

@@ -0,0 +1,92 @@
+# BlocksToolbar.jsx — Customization Explanation
+
+**Upstream:** [`@plone/volto` 18.34.0 — `BlocksToolbar.jsx`](https://github.com/plone/volto/blob/18.x.x/packages/volto/src/components/manage/Form/BlocksToolbar.jsx)
+**Local override:** `src/customizations/volto/components/manage/Form/BlocksToolbar.jsx`
+
+---
+
+## Why this override exists
+
+Volto 18 changed how `redux-localstorage-simple` persists the `blocksClipboard` Redux slice. Instead of storing it as a single monolithic `blocksClipboard` key in `localStorage`, Volto 18's `persistentReducers` config now stores it as separate keys: `blocksClipboard.cut` and `blocksClipboard.copy`.
+
+The upstream `loadFromStorage()` only queries for `states: ['blocksClipboard']` (the monolithic key), so after the Volto 18 migration, clipboard data stored under the new split keys is never found. On component remount or navigation, the clipboard gets wiped to `{}`, causing the paste button to disappear even though the data is still in localStorage.
+
+## What changed
+
+### 1. Import changes
+
+| Upstream                                                                | Override                                                                               |
+| ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `import { load } from 'redux-localstorage-simple'`                      | _Removed_                                                                              |
+| `import { cloneBlocks } from '@plone/volto/helpers/Blocks/cloneBlocks'` | _Removed_                                                                              |
+| —                                                                       | `import { cloneBlocks, loadBlocksClipboardFromStorage } from './blocksClipboardUtils'` |
+
+Both `load` and `cloneBlocks` are now provided by the local `blocksClipboardUtils.js` module instead of being imported directly from Volto.
+
+### 2. `loadFromStorage(event)` — the core bug fix
+
+**Upstream:**
+
+```js
+loadFromStorage() {
+  const clipboard = load({ states: ['blocksClipboard'] })?.blocksClipboard;
+  if (!isEqual(clipboard, this.props.blocksClipboard))
+    this.props.setBlocksClipboard(clipboard || {});
+}
+```
+
+**Override:**
+
+```js
+loadFromStorage(event) {
+  if (event?.key && !event.key.includes('blocksClipboard')) {
+    return;
+  }
+
+  const clipboard = loadBlocksClipboardFromStorage();
+  const currentClipboard = this.props.blocksClipboard || {};
+  const currentClipboardHasBlocks =
+    currentClipboard?.cut || currentClipboard?.copy;
+
+  if (!event && !clipboard && currentClipboardHasBlocks) {
+    return;
+  }
+
+  if (!isEqual(clipboard || {}, currentClipboard)) {
+    this.props.setBlocksClipboard(clipboard || {});
+  }
+}
+```
+
+Three improvements:
+
+1. **Event guard** — If called from a `storage` event, returns early when the changed key is unrelated to `blocksClipboard`. Avoids unnecessary work on unrelated localStorage mutations.
+
+2. **Volto 18 key resolution** — Delegates to `loadBlocksClipboardFromStorage()`, which tries the split-key format (`blocksClipboard.cut`/`blocksClipboard.copy`) first, then falls back to the monolithic key.
+
+3. **Mount guard** — When called on mount (`!event`), if localStorage is empty but Redux still has clipboard data in memory, the old code would wipe Redux to `{}`. The new guard prevents losing an in-memory clipboard on remount.
+
+### 3. `componentDidMount()` — eager rehydration
+
+**Upstream:**
+
+```js
+componentDidMount() {
+  window.addEventListener('storage', this.loadFromStorage, true);
+}
+```
+
+**Override:**
+
+```js
+componentDidMount() {
+  this.loadFromStorage();
+  window.addEventListener('storage', this.loadFromStorage, true);
+}
+```
+
+The upstream code only loads clipboard data when a `storage` event fires (typically from another browser tab). It never loads on initial mount, so the paste button is invisible until some other tab triggers a storage event. The override calls `loadFromStorage()` immediately on mount.
+
+## What did NOT change
+
+All other methods — `deleteBlocks`, `copyBlocksToClipboard`, `cutBlocksToClipboard`, `setBlocksClipboard`, `pasteBlocks`, `render()`, and the `connect`/`compose` wrapper — are **identical** to the Volto 18 upstream.

package/src/customizations/volto/components/manage/Form/blocksClipboardUtils.js

@@ -0,0 +1,68 @@
+import { v4 as uuid } from 'uuid';
+import { load } from 'redux-localstorage-simple';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+} from '@plone/volto/helpers/Blocks/Blocks';
+import config from '@plone/volto/registry';
+
+const fallbackBlocksClipboardStates = [
+  'blocksClipboard.cut',
+  'blocksClipboard.copy',
+];
+
+export function cloneBlocks(blocksData) {
+  if (hasBlocksData(blocksData)) {
+    const blocksFieldname = getBlocksFieldname(blocksData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(blocksData);
+
+    const cloneWithIds = Object.keys(blocksData.blocks)
+      .map((key) => {
+        const block = blocksData.blocks[key];
+        const blockConfig = config.blocks.blocksConfig[blocksData['@type']];
+        return blockConfig?.cloneData
+          ? blockConfig.cloneData(block)
+          : [uuid(), cloneBlocks(block)];
+      })
+      .filter((info) => !!info); // some blocks may refuse to be copied
+
+    return {
+      ...blocksData,
+      [blocksFieldname]: {
+        ...Object.assign(
+          {},
+          ...cloneWithIds.map(([id, data]) => ({ [id]: data })),
+        ),
+      },
+      [blocksLayoutFieldname]: {
+        ...blocksData[blocksLayoutFieldname],
+        items: [...cloneWithIds.map(([id]) => id)],
+      },
+    };
+  }
+
+  return blocksData;
+}
+
+const getBlocksClipboardStates = () => {
+  const persistentReducers = config.settings?.persistentReducers || [];
+  const blocksClipboardStates = persistentReducers.filter(
+    (state) =>
+      state === 'blocksClipboard' || state.startsWith('blocksClipboard.'),
+  );
+
+  return blocksClipboardStates.length
+    ? blocksClipboardStates
+    : fallbackBlocksClipboardStates;
+};
+
+export const loadBlocksClipboardFromStorage = () =>
+  load({
+    states: getBlocksClipboardStates(),
+    disableWarnings: true,
+  })?.blocksClipboard ||
+  load({
+    states: ['blocksClipboard'],
+    disableWarnings: true,
+  })?.blocksClipboard;

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -3,26 +3,24 @@
  * @module components/theme/Header/Header
  */
 
-import React from 'react';
-import { Dropdown, Image } from 'semantic-ui-react';
+import loadable from '@loadable/component';
+import cx from 'classnames';
+import { useEffect, useMemo, useRef } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
-
 import { withRouter } from 'react-router-dom';
+import { compose } from 'redux';
+import { Dropdown, Image } from 'semantic-ui-react';
+
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
-import { getNavigation } from '@plone/volto/actions/navigation/navigation';
-import { getNavigationSettings } from '@eeacms/volto-eea-website-theme/actions';
-import Header from '@eeacms/volto-eea-design-system/ui/Header/Header';
-import EEALogo from '@eeacms/volto-eea-website-theme/components/theme/Logo';
-import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
-import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
-
 import config from '@plone/volto/registry';
-import { compose } from 'redux';
 
-import cx from 'classnames';
-import loadable from '@loadable/component';
+import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
+import Header from '@eeacms/volto-eea-design-system/ui/Header/Header';
+import { getNavigationSettings } from '@eeacms/volto-eea-website-theme/actions';
+import EEALogo from '@eeacms/volto-eea-website-theme/components/theme/Logo';
 
 const LazyLanguageSwitcher = loadable(() => import('./LanguageSwitcher'));
 const EMPTY_NAVIGATION_SETTINGS = {};
@@ -32,15 +30,79 @@ function removeTrailingSlash(path) {
 }
 
 /**
- * EEA Specific Header component.
+ * Merge backend navigation settings into the config-level menu layouts.
  */
-const EEAHeader = ({ pathname, token, items, history, subsite }) => {
-  const router_pathname = useSelector((state) => {
-    return removeTrailingSlash(state.router?.location?.pathname) || '';
+function buildEnhancedLayouts(items, navigationSettings) {
+  const configLayouts = config.settings?.menuItemsLayouts || {};
+  const enhancedLayouts = { ...configLayouts };
+
+  if (!items) return enhancedLayouts;
+
+  items.forEach(() => {
+    Object.keys(navigationSettings).forEach((routeId) => {
+      const route = navigationSettings[routeId];
+      const backendSettings = {};
+
+      if (route.hideChildrenFromNavigation !== undefined) {
+        backendSettings.hideChildrenFromNavigation =
+          route.hideChildrenFromNavigation;
+      }
+
+      if (route.menuItemChildrenListColumns !== undefined) {
+        backendSettings.menuItemChildrenListColumns = Array.isArray(
+          route.menuItemChildrenListColumns,
+        )
+          ? route.menuItemChildrenListColumns
+              .map((val) => (typeof val === 'string' ? parseInt(val, 10) : val))
+              .filter((val) => !isNaN(val))
+          : route.menuItemChildrenListColumns;
+      }
+
+      if (route.menuItemColumns !== undefined) {
+        backendSettings.menuItemColumns = route.menuItemColumns;
+      }
+
+      if (Object.keys(backendSettings).length > 0) {
+        enhancedLayouts[routeId] = {
+          ...enhancedLayouts[routeId],
+          ...backendSettings,
+        };
+      }
+    });
   });
 
+  return enhancedLayouts;
+}
+
+/**
+ * EEA Specific Header component.
+ */
+const EEAHeader = ({ pathname, token, items, history, navroot, subsite }) => {
+  // Config / static derived values
+  const { eea } = config.settings;
+  const headerOpts = eea.headerOpts || {};
+  const { logo, logoWhite } = headerOpts;
+
   const isSubsite = subsite?.['@type'] === 'Subsite';
 
+  // Redux state
+  const dispatch = useDispatch();
+  const width = useSelector((state) => state.screen?.width);
+
+  const router_pathname = useSelector(
+    (state) => removeTrailingSlash(state.router?.location?.pathname) || '',
+  );
+
+  const headerSettings = useSelector(
+    (state) => state.reduxAsyncConnect?.headerSettings,
+  );
+
+  const navigationSettings =
+    useSelector((state) => state.navigationSettings?.settings) ||
+    EMPTY_NAVIGATION_SETTINGS;
+
+  const updateRequest = useSelector((state) => state.content.update);
+
   const isHomePageInverse = useSelector((state) => {
     const layout = state.content?.data?.layout;
     const has_home_layout =
@@ -55,85 +117,69 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
     );
   });
 
-  const { eea } = config.settings;
-  const headerOpts = eea.headerOpts || {};
-  const { logo, logoWhite } = headerOpts;
-  const width = useSelector((state) => state.screen?.width);
-  const dispatch = useDispatch();
-
-  const headerSettings = useSelector(
-    (state) => state.reduxAsyncConnect?.headerSettings,
-  );
+  const prevTokenRef = useRef(undefined);
 
+  // Derived / memoized values
   const headerSearchBox =
     headerSettings?.searchBox || eea.headerSearchBox || [];
-  const previousToken = usePrevious(token);
-  const navigationSettings =
-    useSelector((state) => state.navigationSettings?.settings) ||
-    EMPTY_NAVIGATION_SETTINGS;
-  const updateRequest = useSelector((state) => state.content.update);
-
-  // Combine navigation settings from backend with config fallback
-  const configLayouts = config.settings?.menuItemsLayouts || {};
-  const enhancedLayouts = { ...configLayouts };
 
-  // Map navigation settings to menu item URLs
-  if (items) {
-    items.forEach((menuItem) => {
-      // Check if we have navigation settings for any route that might match this menu item
-      Object.keys(navigationSettings).forEach((routeId) => {
-        const route = navigationSettings[routeId];
-        const backendSettings = {};
-
-        if (route.hideChildrenFromNavigation !== undefined) {
-          backendSettings.hideChildrenFromNavigation =
-            route.hideChildrenFromNavigation;
-        }
+  const enhancedLayouts = buildEnhancedLayouts(items, navigationSettings);
+
+  // Prefer navroot.language; fall back to extracting language from pathname
+  // (validated against supportedLanguages) when navroot is not yet loaded.
+  const navrootLang = useMemo(() => {
+    const { supportedLanguages, navigationLanguage } = config.settings;
+    if (navroot?.language?.token) return navroot.language.token;
+    const supported = supportedLanguages || [];
+    const first = pathname.split('/').filter(Boolean)[0];
+    if (first === undefined) return navigationLanguage || null;
+    return supported.includes(first) ? first : null;
+  }, [navroot, pathname]);
+
+  // Normalize pathname for menu active-item matching when using
+  // navigationLanguage. Menu items come from the configured language; rewrite
+  // the current language prefix to match. E.g. navLang='en' on /fr/topics ->
+  // /en/topics. Uses navroot.language as source of truth instead of parsing
+  // the first path segment.
+  const normalizedPathname = useMemo(() => {
+    const navLang = config.settings.navigationLanguage;
+    if (!navLang || !navrootLang || navrootLang === navLang) return pathname;
 
-        if (route.menuItemChildrenListColumns !== undefined) {
-          // Convert strings back to integers for header usage
-          backendSettings.menuItemChildrenListColumns = Array.isArray(
-            route.menuItemChildrenListColumns,
-          )
-            ? route.menuItemChildrenListColumns
-                .map((val) =>
-                  typeof val === 'string' ? parseInt(val, 10) : val,
-                )
-                .filter((val) => !isNaN(val))
-            : route.menuItemChildrenListColumns;
-        }
+    const prefix = `/${navrootLang}`;
+    if (pathname === prefix) return `/${navLang}`;
+    if (pathname.startsWith(`${prefix}/`)) {
+      return `/${navLang}${pathname.slice(prefix.length)}`;
+    }
+    return pathname;
+  }, [pathname, navrootLang]);
 
-        if (route.menuItemColumns !== undefined) {
-          // Use menuItemColumns directly as they're already in semantic UI format
-          backendSettings.menuItemColumns = route.menuItemColumns;
-        }
+  const baseUrl = useMemo(() => {
+    const { settings } = config;
+    const navLang = settings.navigationLanguage;
+    let url = getBaseUrl(pathname);
 
-        if (Object.keys(backendSettings).length > 0) {
-          // Override the config setting with backend data
-          enhancedLayouts[routeId] = {
-            ...enhancedLayouts[routeId],
-            ...backendSettings,
-          };
-        }
-      });
-    });
-  }
+    if (isSubsite || !navLang || !navrootLang) {
+      return url;
+    }
 
-  // Memoize navigationBaseUrl so it doesn't change on every pathname change
-  // when navigationLanguage is set to a fixed language
-  const navigationBaseUrl = React.useMemo(() => {
-    const { settings } = config;
-    return settings.navigationLanguage
-      ? `/${settings.navigationLanguage}`
-      : getBaseUrl(pathname);
-  }, [pathname]);
+    // When the current navroot's language differs from the configured
+    // navigationLanguage, override the base url so navigation is fetched from
+    // the configured language root instead of the current navroot.
+    if (navLang !== navrootLang) {
+      url = `/${settings.navigationLanguage}`;
+    } else if (!url && navLang === navrootLang) {
+      url = `/${navLang}`;
+    }
+    return url;
+  }, [pathname, navrootLang, isSubsite]);
 
-  React.useEffect(() => {
+  // Fetch navigation settings on pathname change.
+  useEffect(() => {
     dispatch(getNavigationSettings(pathname));
   }, [dispatch, pathname]);
 
-  // Separate effect for update request to avoid duplicate calls
-  React.useEffect(() => {
+  // Re-fetch navigation settings after a content update for the current page.
+  useEffect(() => {
     if (
       updateRequest?.loaded &&
       removeTrailingSlash(updateRequest?.content?.['@id'] || '') ===
@@ -143,46 +189,36 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
     }
   }, [updateRequest, dispatch, pathname]);
 
-  React.useEffect(() => {
+  // Fetch the main navigation tree.
+  // Cases that force a fetch:
+  //   1. Language mismatch — the current navroot's language differs from the
+  //      configured navigationLanguage, so the API expander's navigation (if
+  //      any) is in the wrong language and must be replaced.
+  //   2. Token change — auth state affects which nav items are visible, so
+  //      expander data loaded under the previous token may be stale.
+  //   3. No expander available — backend did not pre-supply navigation for
+  //      this base url, so we fetch it explicitly.
+  // Otherwise the expander already supplied correct navigation; no fetch.
+  useEffect(() => {
     const { settings } = config;
+    const navLang = settings.navigationLanguage;
+    const langMismatch = navLang && navrootLang && navrootLang !== navLang;
+    const tokenChanged = prevTokenRef.current !== token;
 
-    // When navigationLanguage is configured, always fetch navigation from that language
-    // We MUST call getNavigation directly because API expanders fetch navigation for the current page
-    if (settings.navigationLanguage) {
-      // Always fetch navigation for the configured language
-      dispatch(getNavigation(navigationBaseUrl, settings.navDepth));
-    } else {
-      // When navigationLanguage is not configured, fetch navigation for current page language
-      // Check if navigation data needs to be fetched based on the API expander availability
-      if (!hasApiExpander('navigation', navigationBaseUrl)) {
-        dispatch(getNavigation(navigationBaseUrl, settings.navDepth));
-      }
-
-      // Additional check for token changes
-      if (token !== previousToken) {
-        dispatch(getNavigation(navigationBaseUrl, settings.navDepth));
-      }
-    }
-  }, [navigationBaseUrl, token, dispatch, previousToken]);
-
-  // Normalize pathname for menu matching when using navigationLanguage
-  // This ensures menu items from the configured language match correctly even when on other language pages
-  const normalizedPathname = React.useMemo(() => {
-    const navLang = config.settings.navigationLanguage;
-    if (!navLang) {
-      return pathname;
+    if (
+      langMismatch ||
+      tokenChanged ||
+      !hasApiExpander('navigation', baseUrl)
+    ) {
+      dispatch(getNavigation(baseUrl, settings.navDepth));
     }
+  }, [dispatch, baseUrl, navrootLang, token]);
 
-    // Replace the language prefix with the configured navigation language for menu matching
-    // e.g., if navLang='en': /fr/topics -> /en/topics
-    const pathParts = pathname.split('/').filter(Boolean);
-    if (pathParts.length > 0 && pathParts[0].length === 2) {
-      // First segment is a language code, replace it with the navigation language
-      const rest = pathParts.slice(1).join('/');
-      return rest ? `/${navLang}/${rest}` : `/${navLang}`;
-    }
-    return pathname;
-  }, [pathname]);
+  // Track the previous token value. Runs after the fetch effect so the
+  // comparison above sees the value from the prior render.
+  useEffect(() => {
+    prevTokenRef.current = token;
+  }, [token]);
 
   return (
     <Header menuItems={items}>
@@ -327,6 +363,7 @@ export default compose(
     (state) => ({
       token: state.userSession.token,
       items: state.navigation.items,
+      navroot: state.content.data?.['@components']?.navroot?.navroot,
       subsite: state.content.data?.['@components']?.subsite,
     }),
     { getNavigation },