feat: configurable Slim header from control panel (#598)

* feat: added volto-slim-header to configure tertiary menu from control panel

* chore: removed debug

* fix: RELEASE.md

* cleanup

---------

Co-authored-by: Piero Nicolli <[email protected]>
Co-authored-by: Piero Nicolli <[email protected]>

RELEASE.md

@@ -43,10 +43,6 @@
 
 ## Versione x.x.x (xx/xx/xxxx)
 
-### Novità
-- Nel template Slider del blocco elenco, ora è possibile scegliere l'aspetto degli elementi dello slider (default: slide semplice con immagine e titolo cliccabile, Card semplice, Card con immagine).
-## Versione X.X.X (dd/mm/yyyy)
-
 ### Migliorie
 
 - Nel blocco Argomenti in Evidenza, è stata rimossa l'obbligatorietà di aggiungere una card argomento, ora si possono inserire anche solo le etichette.
@@ -57,6 +53,8 @@
 
 ### Novità
 
+- Ora i link in testata nell'header slim sono configurabili da pannello di controllo.
+- Nel template Slider del blocco elenco, ora è possibile scegliere l'aspetto degli elementi dello slider (default: slide semplice con immagine e titolo cliccabile, Card semplice, Card con immagine).
 - Nel blocco Argomenti in Evidenza sono state aggiunte due nuove proprietà, una permette di allineare gli "Altri argomenti" al centro e la seconda serve a nascondere o meno il bottone "Vedi tutti" che punta alla pagina argomenti.
 
 ### Fix

package.json

@@ -31,7 +31,8 @@
     "volto-data-grid-widget",
     "volto-querywidget-with-browser",
     "@eeacms/volto-taxonomy",
-    "volto-feedback"
+    "volto-feedback",
+    "volto-slimheader"
   ],
   "scripts": {
     "prepare": "husky install",
@@ -153,6 +154,7 @@
     "volto-querywidget-with-browser": "0.4.2",
     "volto-rss-block": "3.0.0",
     "volto-secondarymenu": "4.0.0",
+    "volto-slimheader": "0.1.0",
     "volto-social-settings": "3.0.0",
     "volto-subblocks": "2.0.0",
     "volto-subfooter": "3.0.0",

src/components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu.jsx

@@ -3,16 +3,39 @@
  * @module components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import { Nav, NavItem, NavLink } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import { useIntl } from 'react-intl';
-import config from '@plone/volto/registry';
+import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
+import { getSlimHeader, getItemsByPath } from 'volto-slimheader';
 
 const TertiaryMenu = () => {
   const intl = useIntl();
-  let menu = config.settings.siteProperties.headerslimTertiaryMenu;
-  const items = menu[intl.locale];
+  const pathname = useLocation().pathname;
+  const dispatch = useDispatch();
+
+  const slimHeader = useSelector((state) => state.slimHeader?.result);
+  const slimHeaderItems = getItemsByPath(slimHeader, pathname)
+    ?.filter((item) => item.visible)
+    .map((item) => {
+      return {
+        url: item.href || flattenToAppURL(item.linkUrl?.[0]?.['@id']) || '/',
+        title: item.title,
+      };
+    });
+
+  const staticMenu =
+    getSiteProperty('headerslimTertiaryMenu', intl.locale) ?? [];
+
+  useEffect(() => {
+    dispatch(getSlimHeader());
+  }, [dispatch]);
+
+  const items = slimHeaderItems?.length > 0 ? slimHeaderItems : staticMenu;
 
   return items?.length > 0 ? (
     <Nav vertical={false} className="tertiary-menu">

src/config/italiaConfig.js

@@ -217,6 +217,10 @@ export default function applyConfig(voltoConfig) {
       // arLogoutUrl: '/logout?e=1',
       // spidLogin: true, //se true, nella pagina di errore Unauthorized, mostra il pulsante per il login a Spid.
       headerslimTertiaryMenu: {
+        default: [
+          //{ title: 'Contatti', url: '/it/contatti' },
+          //{ title: 'Novità', url: '/it/novita' },
+        ],
         it: [
           //{ title: 'Contatti', url: '/it/contatti' },
           //{ title: 'Novità', url: '/it/novita' },

src/helpers/config.js

@@ -16,7 +16,7 @@ export const getSiteProperty = (property, locale) => {
             value
           );
         } else {
-          return value.default ?? value;
+          return value.default ?? value[locale] ?? value;
         }
       default:
         break;

yarn.lock

@@ -6583,6 +6583,7 @@ __metadata:
     volto-querywidget-with-browser: 0.4.2
     volto-rss-block: 3.0.0
     volto-secondarymenu: 4.0.0
+    volto-slimheader: 0.1.0
     volto-social-settings: 3.0.0
     volto-subblocks: 2.0.0
     volto-subfooter: 3.0.0
@@ -14432,6 +14433,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"volto-slimheader@npm:0.1.0":
+  version: 0.1.0
+  resolution: "volto-slimheader@npm:0.1.0"
+  peerDependencies:
+    "@plone/volto": ">=16.0.0-alpha.38"
+  checksum: 2cdd3f53cb6ce20571fa1f58a2658f2b0d6694dab37d06be8784338500bca2227f45471be1b7980583d666719eb7a9c80c9a8013a93ef354cd8f697608161d25
+  languageName: node
+  linkType: hard
+
 "volto-social-settings@npm:3.0.0":
   version: 3.0.0
   resolution: "volto-social-settings@npm:3.0.0"