design-comuni-plone-theme 10.0.0 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 
 
+## [10.1.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v10.0.0...v10.1.0) (2023-11-06)
+
+
+### Features
+
+* Sidemenu customizable ([#388](https://github.com/redturtle/design-comuni-plone-theme/issues/388)) ([94fa0c1](https://github.com/redturtle/design-comuni-plone-theme/commit/94fa0c107f73acb9b7e89638f613206391cefc46))
+
+
+### Bug Fixes
+
+* GalleryPreview ([29f0299](https://github.com/redturtle/design-comuni-plone-theme/commit/29f02990f1e7467e536f151c9e86821c1b0c9e98))
+* locales ([14d268b](https://github.com/redturtle/design-comuni-plone-theme/commit/14d268be970d6fccce06c0c24f99c67745735fef))
+* useSideMenu observer ([bd2e4ab](https://github.com/redturtle/design-comuni-plone-theme/commit/bd2e4ab451d4bc5a05b2673cdbf4a2b05038f4b4))
+
 ## [10.0.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v8.9.0...v10.0.0) (2023-11-03)
 
 

package/locales/de/LC_MESSAGES/volto.po

@@ -164,6 +164,7 @@ msgid "Content in evidence"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Contenuto
 msgid "Contenuto"
 msgstr ""
@@ -2214,6 +2215,7 @@ msgid "incarico"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Indice della pagina
 msgid "index"
 msgstr ""

package/locales/en/LC_MESSAGES/volto.po

@@ -149,6 +149,7 @@ msgid "Content in evidence"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Contenuto
 msgid "Contenuto"
 msgstr "Content"
@@ -2199,6 +2200,7 @@ msgid "incarico"
 msgstr "assignment"
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Indice della pagina
 msgid "index"
 msgstr "Page index"

package/locales/es/LC_MESSAGES/volto.po

@@ -158,6 +158,7 @@ msgid "Content in evidence"
 msgstr "Contenido destacado"
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Contenuto
 msgid "Contenuto"
 msgstr "Contenido"
@@ -2208,6 +2209,7 @@ msgid "incarico"
 msgstr "Compromiso"
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Indice della pagina
 msgid "index"
 msgstr "Índice de página"

package/locales/fr/LC_MESSAGES/volto.po

@@ -166,6 +166,7 @@ msgid "Content in evidence"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Contenuto
 msgid "Contenuto"
 msgstr "Contenu"
@@ -2216,6 +2217,7 @@ msgid "incarico"
 msgstr "Engagement"
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Indice della pagina
 msgid "index"
 msgstr "Index des pages"

package/locales/it/LC_MESSAGES/volto.po

@@ -149,6 +149,7 @@ msgid "Content in evidence"
 msgstr "Contenuto in primo piano"
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Contenuto
 msgid "Contenuto"
 msgstr "Contenuto"
@@ -2199,6 +2200,7 @@ msgid "incarico"
 msgstr "incarico"
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Indice della pagina
 msgid "index"
 msgstr "Indice della pagina"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-11-03T10:53:24.029Z\n"
+"POT-Creation-Date: 2023-11-06T09:06:10.531Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -151,6 +151,7 @@ msgid "Content in evidence"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Contenuto
 msgid "Contenuto"
 msgstr ""
@@ -2201,6 +2202,7 @@ msgid "incarico"
 msgstr ""
 
 #: components/ItaliaTheme/View/Commons/SideMenu
+#: components/ItaliaTheme/View/Commons/SideMenuByTitles
 # defaultMessage: Indice della pagina
 msgid "index"
 msgstr ""

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",

package/src/components/ItaliaTheme/GalleryPreview/GalleryPreview.jsx

@@ -34,8 +34,8 @@ const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const image = items[viewIndex];
 
-  let checkUrlImage = image.image_field
-    ? image.image_scales?.[image.image_field]?.[0]?.scales?.larger?.download
+  let checkUrlImage = image?.image_field
+    ? image?.image_scales?.[image?.image_field]?.[0]?.scales?.larger?.download
     : image?.image?.scales?.larger?.download ||
       image?.image_scales?.image[0]?.scales?.larger?.download;
 

package/src/components/ItaliaTheme/View/BandoView/BandoView.jsx

@@ -3,11 +3,10 @@
  * @module components/theme/View/BandoView
  */
 
-import React, { useState, createRef, useEffect } from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  SideMenu,
   PageHeader,
   RelatedItems,
   BandoPlaceholderAfterContent,
@@ -22,6 +21,7 @@ import {
   RelatedItemInEvidence,
   SkipToMainContent,
   ContentTypeViewSections,
+  useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 export const BandoViewSectionsOrder = [
@@ -44,15 +44,8 @@ export const BandoViewSectionsOrder = [
  */
 const BandoView = ({ content, location }) => {
   let documentBody = createRef();
-  const [sideMenuElements, setSideMenuElements] = useState(null);
+  const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
-  useEffect(() => {
-    if (documentBody.current) {
-      if (__CLIENT__) {
-        setSideMenuElements(documentBody.current);
-      }
-    }
-  }, [documentBody]);
   return (
     <>
       <div className="container px-4 my-4 bando-view">

package/src/components/ItaliaTheme/View/Commons/SideMenu.jsx

@@ -1,3 +1,6 @@
+/* ************
+Costruisce il sidemenu in base alle sections strutturate nella parte destra del contenuto
+**************/
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable no-unused-expressions */

package/src/components/ItaliaTheme/View/Commons/SideMenuByTitles.jsx

@@ -0,0 +1,220 @@
+/* ****************
+Costuisce il SideMenu utilizzando tutti gli h2 che trova nella parte di destra del contenuto.
+******************/
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable no-unused-expressions */
+import { defineMessages, useIntl } from 'react-intl';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { throttle } from 'lodash';
+import {
+  Progress,
+  Accordion,
+  AccordionBody,
+  AccordionHeader,
+} from 'design-react-kit';
+import cx from 'classnames';
+
+const messages = defineMessages({
+  index: {
+    id: 'index',
+    defaultMessage: 'Indice',
+  },
+  contenuto: {
+    id: 'Contenuto',
+    defaultMessage: 'Contenuto',
+  },
+});
+
+const extractHeaders = (elements, intl) => {
+  let item;
+  let headers = [];
+  for (var index = 0; index < elements.length; index++) {
+    item = elements[index];
+
+    if (item.id === 'text-body') {
+      headers.push({
+        id: item.id,
+        title:
+          item.getAttribute('menu_title') ||
+          intl.formatMessage(messages.contenuto),
+        item: item,
+      });
+
+      const h = item.getElementsByTagName('h2');
+
+      for (var hi = 0; hi < h.length; hi++) {
+        headers.push({
+          id: h[hi].id,
+          title: h[hi].innerText,
+          item: h[hi],
+        });
+      }
+    } else {
+      let item_header = item.querySelector('#header-' + item.id);
+      if (item_header) {
+        headers.push({
+          id: item.id,
+          title: item_header.textContent,
+          item: item,
+        });
+      }
+    }
+  }
+  return headers;
+};
+
+/**
+ * SideMenuByTitles view component class.
+ * @function SideMenuByTitles
+ * @params {object} content: Content object.
+ * @returns {string} Markup of the component.
+ */
+const SideMenuByTitles = ({ data, content_uid }) => {
+  const intl = useIntl();
+
+  const [headers, setHeaders] = useState([]);
+  const [activeSection, setActiveSection] = useState(null);
+  const [scrollY, setScrollY] = useState(0);
+  const [isClient, setIsClient] = useState(false);
+
+  const [isNavOpen, setIsNavOpen] = useState(
+    __CLIENT__ ? window.innerWidth >= 992 : false,
+  );
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    const scrollOffset = 0.1 * window.innerHeight;
+    setScrollY(window.scrollY);
+    const headersHeights = headers
+      .map((section) => {
+        const element = document.getElementById(section.id);
+        return {
+          id: section.id,
+          top: element?.getBoundingClientRect()?.top,
+        };
+      })
+      .filter((section) => section.top <= scrollOffset);
+    if (headersHeights.length > 0) {
+      const section = headersHeights.reduce(
+        (prev, curr) => (prev.top > curr.top ? prev : curr),
+        headers[0],
+      );
+      setActiveSection(section.id);
+    } else {
+      setActiveSection(null); //di default nessun header è selezionato.
+    }
+  }, [headers, activeSection]);
+
+  useEffect(() => {
+    if (data?.children) {
+      const extractedHeaders = extractHeaders(data.children, intl);
+
+      if (extractedHeaders.length > 0) {
+        setHeaders(extractedHeaders);
+        // setActiveSection(extractedHeaders[0].id); //di default nessun header è selezionato.
+      }
+    }
+  }, [data, content_uid]);
+
+  useEffect(() => {
+    if (headers.length > 0)
+      window.addEventListener('scroll', throttledHandleScroll, {
+        passive: true,
+      });
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandleScroll);
+    };
+  }, [headers]);
+
+  const throttledHandleScroll = throttle(handleScroll, 100);
+
+  const handleClickAnchor = (id) => (e) => {
+    e.preventDefault();
+    if (window.innerWidth < 992) {
+      setIsNavOpen(false);
+    }
+    // Blur a link
+    document.getElementById(`item-${id}`).blur();
+    // Focus on section
+    document.getElementById(id).focus({ preventScroll: true });
+    // Scroll to section
+    // setTimeout hack should wait for rerender after setIsNavOpen
+    setTimeout(() => {
+      document.getElementById(id)?.scrollIntoView?.({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }, 0);
+  };
+
+  const yCountEnd = isClient
+    ? document.querySelector('#main-content-section')
+    : null;
+
+  const progressValue = useMemo(() => {
+    if (!isClient) return 0;
+    return (scrollY - yCountEnd.offsetTop) / yCountEnd.offsetHeight || 0;
+  }, [scrollY, isClient]);
+
+  return headers?.length > 0 ? (
+    <div className="sticky-wrapper navbar-wrapper page-side-menu">
+      <nav className="navbar it-navscroll-wrapper navbar-expand-lg">
+        <div className="menu-wrapper">
+          <div className="link-list-wrapper menu-link-list">
+            <div className="accordion-wrapper">
+              <Accordion>
+                <AccordionHeader
+                  active={isNavOpen}
+                  onToggle={() => {
+                    setIsNavOpen(!isNavOpen);
+                  }}
+                >
+                  <h3>{intl.formatMessage(messages.index)}</h3>
+                </AccordionHeader>
+                <div className="mb-3">
+                  <Progress
+                    value={progressValue > 0 ? 100 * progressValue : 0}
+                    role="progressbar"
+                  />
+                </div>
+                <AccordionBody
+                  active={isNavOpen}
+                  className={
+                    isNavOpen
+                      ? 'accordion-collapse show'
+                      : 'accordion-collapse collapse'
+                  }
+                >
+                  <ul className="link-list" data-element="page-index">
+                    {headers.map((item, i) => {
+                      return (
+                        <li className="nav-item" key={item.id}>
+                          <a
+                            className={cx('nav-link', {
+                              active: item.id === activeSection,
+                            })}
+                            href={`#${item.id}`}
+                            onClick={handleClickAnchor(item.id)}
+                            id={`item-${item.id}`}
+                          >
+                            <span>{item.title}</span>
+                          </a>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </AccordionBody>
+              </Accordion>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+  ) : null;
+};
+export default SideMenuByTitles;

package/src/components/ItaliaTheme/View/DocumentoView/DocumentoView.jsx

@@ -3,7 +3,7 @@
  * @module components/theme/View/DocumentoView
  */
 
-import React, { useState, createRef, useEffect } from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -17,12 +17,12 @@ import {
   DocumentoDocAllegati,
   DocumentoUlterioriInformazioni,
   ContentImage,
-  SideMenu,
   PageHeader,
   RelatedItems,
   RelatedItemInEvidence,
   SkipToMainContent,
   ContentTypeViewSections,
+  useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 export const DocumentoViewSectionsOrder = [
@@ -48,16 +48,9 @@ export const DocumentoViewSectionsOrder = [
  */
 const DocumentoView = ({ content, location }) => {
   let documentBody = createRef();
-  const [sideMenuElements, setSideMenuElements] = useState(null);
-  //const userLogged = useSelector((state) => state.userSession);
+  const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
-  useEffect(() => {
-    if (documentBody.current) {
-      if (__CLIENT__) {
-        setSideMenuElements(documentBody.current);
-      }
-    }
-  }, [documentBody]);
+  //const userLogged = useSelector((state) => state.userSession);
 
   return (
     <>

package/src/components/ItaliaTheme/View/EventoView/EventoView.jsx

@@ -3,12 +3,11 @@
  * @module components/theme/View/EventoView
  */
 
-import React, { useState, createRef, useEffect } from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 
 import {
   ContentImage,
-  SideMenu,
   PageHeader,
   RelatedItems,
   EventoPlaceholderAfterContent,
@@ -25,6 +24,7 @@ import {
   SkipToMainContent,
   ContentTypeViewSections,
   EventoSponsors,
+  useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 export const EventoViewSectionsOrder = [
@@ -53,15 +53,7 @@ export const EventoViewSectionsOrder = [
  */
 const EventoView = ({ content, location }) => {
   let documentBody = createRef();
-  const [sideMenuElements, setSideMenuElements] = useState(null);
-
-  useEffect(() => {
-    if (documentBody.current) {
-      if (__CLIENT__) {
-        setSideMenuElements(documentBody.current);
-      }
-    }
-  }, [documentBody]);
+  const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
     <>

package/src/components/ItaliaTheme/View/NewsItemView/NewsItemView.jsx

@@ -3,12 +3,11 @@
  * @module components/theme/View/NewsItemView
  */
 
-import React, { createRef, useEffect, useState } from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import { readingTime } from '../ViewUtils';
+
 import {
   PageHeader,
-  SideMenu,
   ContentImage,
   RelatedItems,
   NewsItemPlaceholderAfterContent,
@@ -23,6 +22,8 @@ import {
   NewsItemDataset,
   NewsItemMetadata,
   ContentTypeViewSections,
+  useSideMenu,
+  useReadingTime,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 export const NewsItemViewSectionsOrder = [
@@ -47,9 +48,9 @@ export const NewsItemViewSectionsOrder = [
  * @returns {string} Markup of the component.
  */
 const NewsItemView = ({ content, location }) => {
-  const [readingtime, setReadingtime] = useState(0);
   let documentBody = createRef();
-  const [sideMenuElements, setSideMenuElements] = useState(null);
+  const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
+  const { readingtime } = useReadingTime(content, documentBody);
 
   let related_items = [];
   if (content?.notizie_correlate?.length > 0) {
@@ -59,17 +60,6 @@ const NewsItemView = ({ content, location }) => {
     related_items = [...related_items, ...content.relatedItems];
   }
 
-  useEffect(() => {
-    if (documentBody.current) {
-      if (__CLIENT__) {
-        setReadingtime(
-          readingTime(content.title, content.description, documentBody),
-        );
-        setSideMenuElements(documentBody.current);
-      }
-    }
-  }, [content.description, content.title, documentBody]);
-
   return (
     <>
       <div className="container px-4 my-4 newsitem-view">

package/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoViewNoBlocks.jsx

@@ -3,13 +3,12 @@
  * @module components/theme/View/PaginaArgomentoViewNoBlocks
  */
 
-import React, { createRef, useState, useEffect } from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import {
   GenericCard,
   ContentImage,
-  SideMenu,
   PageHeader,
   OfficeCard,
   RichTextSection,
@@ -20,6 +19,7 @@ import {
   SkipToMainContent,
   RelatedItems,
   RelatedItemInEvidence,
+  useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 // import { getBaseUrl } from '@plone/volto/helpers';
@@ -68,15 +68,7 @@ const messages = defineMessages({
 const PaginaArgomentoViewNoBlocks = ({ content }) => {
   const intl = useIntl();
   let documentBody = createRef();
-  const [sideMenuElements, setSideMenuElements] = useState(null);
-
-  useEffect(() => {
-    if (documentBody.current) {
-      if (__CLIENT__) {
-        setSideMenuElements(documentBody.current);
-      }
-    }
-  }, [documentBody]);
+  const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
     <>

package/src/components/ItaliaTheme/View/PersonaView/PersonaView.jsx

@@ -3,11 +3,10 @@
  * @module components/theme/View/PersonaView
  */
 
-import React, { createRef, useEffect, useState } from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  SideMenu,
   PageHeader,
   RelatedItems,
   PersonaRuolo,
@@ -19,6 +18,7 @@ import {
   RelatedItemInEvidence,
   SkipToMainContent,
   ContentTypeViewSections,
+  useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 export const PersonaViewSectionsOrder = [
@@ -36,14 +36,7 @@ export const PersonaViewSectionsOrder = [
  */
 const PersonaView = ({ content }) => {
   let documentBody = createRef();
-  const [sideMenuElements, setSideMenuElements] = useState(null);
-  useEffect(() => {
-    if (documentBody.current) {
-      if (__CLIENT__) {
-        setSideMenuElements(documentBody.current);
-      }
-    }
-  }, [documentBody]);
+  const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
     <>

package/src/components/ItaliaTheme/View/ServizioView/ServizioView.jsx

@@ -3,12 +3,11 @@
  * @module components/theme/View/ServizioView
  */
 
-import React, { createRef, useEffect, useState } from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
-  SideMenu,
   PageHeader,
   ContentImage,
   ServizioPlaceholderAfterContent,
@@ -38,6 +37,7 @@ import {
   ServizioArgomenti,
   ServizioMetatag,
   ContentTypeViewSections,
+  useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 export const ServizioViewSectionsOrder = (props) => [
@@ -109,14 +109,7 @@ const ServizioView = ({ content, moment }) => {
   Moment.locale(intl.locale);
 
   const documentBody = createRef();
-  const [sideMenuElements, setSideMenuElements] = useState(null);
-  useEffect(() => {
-    if (documentBody.current) {
-      if (__CLIENT__) {
-        setSideMenuElements(documentBody.current);
-      }
-    }
-  }, [documentBody]);
+  const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
     <>

package/src/components/ItaliaTheme/View/UOView/UOView.jsx

@@ -3,14 +3,13 @@
  * @module components/theme/View/UOView
  */
 
-import React, { createRef, useEffect, useState } from 'react';
+import React, { createRef } from 'react';
 
 import PropTypes from 'prop-types';
 import {
   PageHeader,
   UOServices,
   RelatedItems,
-  SideMenu,
   ContentImage,
   UOPlaceholderAfterContent,
   UOPlaceholderAfterRelatedItems,
@@ -23,6 +22,7 @@ import {
   RelatedItemInEvidence,
   SkipToMainContent,
   ContentTypeViewSections,
+  useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 export const UOViewSectionsOrder = [
@@ -56,13 +56,7 @@ export const UOViewSectionsOrder = [
  */
 const UOView = ({ content }) => {
   let documentBody = createRef();
-  const [sideMenuElements, setSideMenuElements] = useState(null);
-
-  useEffect(() => {
-    if (documentBody.current && __CLIENT__) {
-      setSideMenuElements(documentBody.current);
-    }
-  }, [documentBody]);
+  const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
     <>

package/src/components/ItaliaTheme/View/VenueView/VenueView.jsx

@@ -3,11 +3,10 @@
  * @module components/theme/View/VenueView
  */
 
-import React, { createRef, useEffect, useState } from 'react';
+import React, { createRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  SideMenu,
   PageHeader,
   ContentImage,
   RelatedItems,
@@ -23,6 +22,7 @@ import {
   VenueContacts,
   VenueMoreInfos,
   ContentTypeViewSections,
+  useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 export const VenueViewSectionsOrder = [
@@ -56,15 +56,7 @@ export const VenueViewSectionsOrder = [
  */
 const VenueView = ({ content }) => {
   let documentBody = createRef();
-  const [sideMenuElements, setSideMenuElements] = useState(null);
-
-  useEffect(() => {
-    if (documentBody.current) {
-      if (__CLIENT__) {
-        setSideMenuElements(documentBody.current);
-      }
-    }
-  }, [documentBody]);
+  const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   useEffect(() => {
     if (

package/src/components/ItaliaTheme/View/ViewUtils.jsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { IntlProvider } from 'react-intl';
 import { renderToString } from 'react-dom/server';
+import { SideMenu } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import config from '@plone/volto/registry';
 
 export const readingTime = (title, description, htmlBody) => {
   const body = htmlBody.current.textContent;
@@ -13,3 +15,69 @@ export const readingTime = (title, description, htmlBody) => {
 
 export const getHTMLString = (content, locale) =>
   renderToString(<IntlProvider locale={locale}>{content}</IntlProvider>);
+
+//Hook per avere il reading time di una pagina
+export const useReadingTime = (content, documentBody) => {
+  const [readingtime, setReadingtime] = useState(0);
+
+  useEffect(() => {
+    if (documentBody.current) {
+      if (__CLIENT__) {
+        setReadingtime(
+          readingTime(content.title, content.description, documentBody),
+        );
+      }
+    }
+  }, [content.description, content.title, documentBody]);
+
+  return { readingtime, setReadingtime };
+};
+
+//Hook per avere i SideMenu elements di una pagina
+export const useSideMenu = (content, documentBody) => {
+  const [sideMenuElements, setSideMenuElements] = useState(null);
+  const [observer, setObserver] = useState(null);
+  const updateSideMenuOnLoadingBlocks =
+    config.settings?.italiaThemeViewsConfig?.[content['@type']]
+      ?.updateSideMenuOnLoadingBlocks ?? false;
+  const SideMenuComponent =
+    config.settings?.italiaThemeViewsConfig?.[content['@type']]?.sideMenu ??
+    SideMenu;
+
+  useEffect(() => {
+    if (documentBody.current) {
+      if (__CLIENT__) {
+        setSideMenuElements(documentBody.current);
+      }
+    }
+  }, [content.description, content.title, documentBody]);
+
+  //observer is needed for loadable blocks like listing and rss, if you want to use their title's for SideMenu
+
+  useEffect(() => {
+    if (!updateSideMenuOnLoadingBlocks) return;
+
+    if (!observer) {
+      const obs = updateSideMenuOnLoadingBlocks
+        ? new MutationObserver((mutationList) => {
+            setSideMenuElements(documentBody.current);
+          })
+        : null;
+      setObserver(obs);
+    }
+    if (observer) {
+      observer.observe(documentBody.current, {
+        //attributes: true,
+        childList: true,
+        subtree: true,
+      });
+    }
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [observer, setObserver, documentBody, updateSideMenuOnLoadingBlocks]);
+
+  return { sideMenuElements, setSideMenuElements, SideMenu: SideMenuComponent };
+};

package/src/components/ItaliaTheme/View/index.js

@@ -5,6 +5,12 @@ export {
   RichTextRender,
   richTextHasContent,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RichTextRender';
+export {
+  useSideMenu,
+  useReadingTime,
+  readingTime,
+  getHTMLString,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/View/ViewUtils';
 
 export RenderBlocks from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RenderBlocks';
 export RelatedNewsArticles from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RelatedNewsArticles';

package/src/config/italiaConfig.js

@@ -191,6 +191,8 @@ export default function applyConfig(voltoConfig) {
       //   sections: [
       //     //sections order for Venue content-type view. See components/ItaliaTheme/View/VenueView/VenueView.jsx for default VenueViewSectionsOrder
       //   ],
+      //   updateSideMenuOnLoadingBlocks:false, //serve se si vuole fare in modo che il sideMenu si aggiorni con i titli dei blocchi presenti nel testo
+      //   sideMenu:null // qui va messo il component da usare per fare il SideMenu, se non è impostato viene usato quello di default
       // },
     },
     siteProperties: {