feat: script to hide links on header edit page

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

@@ -3,7 +3,7 @@
  * @module components/theme/Header/Header
  */
 
-import React /*, { useEffect, useState } */ from 'react';
+import React, { useEffect } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -21,7 +21,54 @@ import {
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Headers } from 'design-react-kit';
 
+const useDisableHeaderInteractions = () => {
+  useEffect(() => {
+    const body = document.body;
+
+    const disableHeader = () => {
+      if (
+        body.classList.contains('cms-ui') &&
+        body.classList.contains('section-edit')
+      ) {
+        const header = document.querySelector('header');
+        if (!header) return;
+
+        const focusables = header.querySelectorAll(
+          'a, button, input, select, textarea, [tabindex], .it-socials a',
+        );
+
+        [...focusables].forEach((item) => {
+          item.setAttribute('tabIndex', '-1');
+          item.setAttribute('aria-hidden', 'true');
+          // item.style.pointerEvents = 'none'; - disabilitare il mouse click?
+        });
+      }
+    };
+
+    disableHeader();
+
+    const bodyObserver = new MutationObserver(disableHeader);
+    bodyObserver.observe(body, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
+    const header = document.querySelector('header');
+    let headerObserver;
+    if (header) {
+      headerObserver = new MutationObserver(disableHeader);
+      headerObserver.observe(header, { childList: true, subtree: true });
+    }
+
+    return () => {
+      bodyObserver.disconnect();
+      headerObserver?.disconnect();
+    };
+  }, []);
+};
+
 const Header = ({ pathname }) => {
+  useDisableHeaderInteractions();
   // const [mini, setMini] = useState(false);
 
   // const handleScroll = () => {