Merge pull request #35 from eea/develop

feat(side-menu): enhance side menu styling and allow it to close when clicking around it #270999
eea · Oct 11, 2024 · 6364c03 · 6364c03
2 parents 318a7f9 + 299f861
commit 6364c03
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 79 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,11 +4,12 @@ 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).
 
-### [6.0.1](https://github.com/eea/volto-block-toc/compare/6.0.0...6.0.1) - 16 September 2024
+### [6.1.0](https://github.com/eea/volto-block-toc/compare/6.0.1...6.1.0) - 11 October 2024
 
-#### :bug: Bug Fixes
+#### :hammer_and_wrench: Others
 
-- fix(header): by removing header and banner styling #274418 [ichim-david - [`08563b9`](https://github.com/eea/volto-block-toc/commit/08563b976e70511865ccd7dc21341e1b81670f04)]
+- Release 6.1.0 [alin - [`71b3fb4`](https://github.com/eea/volto-block-toc/commit/71b3fb4ea7fef34033aab229f89609f90ab2282d)]
+### [6.0.1](https://github.com/eea/volto-block-toc/compare/6.0.0...6.0.1) - 16 September 2024
 
 #### :house: Internal changes
 
@@ -27,19 +28,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`e421222`](https://github.com/eea/volto-block-toc/commit/e42122215c6ff6e1502632ffa990add919ddc1f7)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`29640f2`](https://github.com/eea/volto-block-toc/commit/29640f237937e12974f289c944ce51a3900db0df)]
 ### [5.0.1](https://github.com/eea/volto-block-toc/compare/5.0.0...5.0.1) - 22 April 2024
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`fa93184`](https://github.com/eea/volto-block-toc/commit/fa93184e49a35af45223aca195d568ba09fdff54)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`12ce383`](https://github.com/eea/volto-block-toc/commit/12ce38371021797c3a13135da6680f9222bc4b04)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`a79ed2d`](https://github.com/eea/volto-block-toc/commit/a79ed2d321c8e1551c4fd6ad6d5a07eb15d2223a)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`cd4e095`](https://github.com/eea/volto-block-toc/commit/cd4e0954417c86348567edffaa7a7cc647291612)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`e9ad6fd`](https://github.com/eea/volto-block-toc/commit/e9ad6fd4a78c3ecd23c8ba5486d4d1a2e69ba880)]
 - package.json [alin - [`30a7dbe`](https://github.com/eea/volto-block-toc/commit/30a7dbec2682f17c01d9cefd5f76e7e456fc91f3)]
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`0fde850`](https://github.com/eea/volto-block-toc/commit/0fde8502587b7a8a632ae2cd98c4ce9b61206ab3)]
 ## [5.0.0](https://github.com/eea/volto-block-toc/compare/4.0.0...5.0.0) - 17 April 2024
 
 #### :rocket: New Features
@@ -65,7 +58,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - include volto-anchors as dependency and update import of github-slugger [Teodor - [`b2cc084`](https://github.com/eea/volto-block-toc/commit/b2cc084e515882852e5702e670aa045f4ef429c4)]
 - fix horizontal menu variation [Teodor - [`9d339f8`](https://github.com/eea/volto-block-toc/commit/9d339f88f7061c62274a022b6ff063fdda07e6f5)]
 - fix table of contents default renderer as per volto 17 fix [Teodor - [`be8de3b`](https://github.com/eea/volto-block-toc/commit/be8de3bdbc20889d20f64fa0a839513df7d70bcb)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`561d863`](https://github.com/eea/volto-block-toc/commit/561d863557380f92832f9f38dfeaf18dedad78f1)]
 ### [3.0.8](https://github.com/eea/volto-block-toc/compare/3.0.7...3.0.8) - 19 February 2024
 
 #### :house: Internal changes
@@ -95,7 +87,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`ede85d4`](https://github.com/eea/volto-block-toc/commit/ede85d4ba7888001add18888d24f8c712af68bef)]
 - test: jest should look for addons in node_modules Refs #253277 [valentinab25 - [`8e48d6f`](https://github.com/eea/volto-block-toc/commit/8e48d6fd45f0ea2e91b64494cbc029152632bcee)]
 - test: Fix test config, coverage Refs #253277 [valentinab25 - [`4f80fe5`](https://github.com/eea/volto-block-toc/commit/4f80fe53f3fc31ef7f7c15955d6df412cfb139d7)]
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`d10a982`](https://github.com/eea/volto-block-toc/commit/d10a982c3173080bfcfc29e7a7367b223fa10258)]
 ### [3.0.5](https://github.com/eea/volto-block-toc/compare/3.0.4...3.0.5) - 22 May 2023
 
 #### :hammer_and_wrench: Others
@@ -121,14 +112,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Update Jenkinsfile [Claudia Ifrim - [`96e0797`](https://github.com/eea/volto-block-toc/commit/96e079736684c7b0fa8e7abaa0486f8b50b31b7c)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`66e274d`](https://github.com/eea/volto-block-toc/commit/66e274da2d5945e78c00c0e1b7a42b8a08966cbc)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`91a49d2`](https://github.com/eea/volto-block-toc/commit/91a49d2712097854d7ba75ffc361f757c5fd2175)]
 - update(jest): add @plone/volto-slate resolver refs- #153447 [nileshgulia1 - [`c98050d`](https://github.com/eea/volto-block-toc/commit/c98050d7aa3cc48f658a5d498e5232bd7b4b0ae7)]
 ### [3.0.1](https://github.com/eea/volto-block-toc/compare/3.0.0...3.0.1) - 30 June 2022
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`b3c16c6`](https://github.com/eea/volto-block-toc/commit/b3c16c6a31c38a44451b009af271f17244edbc1f)]
 ## [3.0.0](https://github.com/eea/volto-block-toc/compare/2.3.0...3.0.0) - 17 May 2022
 
 #### :hammer_and_wrench: Others
@@ -142,27 +130,17 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 2.3.0 [Alin Voinea - [`693f4bb`](https://github.com/eea/volto-block-toc/commit/693f4bbb13068e0b7c22353de5a451414e4d91a0)]
 - remove uneeded code [Miu Razvan - [`b554883`](https://github.com/eea/volto-block-toc/commit/b554883f393936e7a1e8e28ec2fcdc954982a4e7)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`9961973`](https://github.com/eea/volto-block-toc/commit/996197359b91c0769f1fd8a1891b55063dd6c1e5)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`a3f1404`](https://github.com/eea/volto-block-toc/commit/a3f1404ec40f9bde18495e0e02eb23609deca78a)]
 ### [2.2.5](https://github.com/eea/volto-block-toc/compare/2.2.4...2.2.5) - 3 January 2022
 
 ### [2.2.4](https://github.com/eea/volto-block-toc/compare/2.2.3...2.2.4) - 18 December 2021
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`1f07faa`](https://github.com/eea/volto-block-toc/commit/1f07faa181ece91cc97fc4087fc0a5bdd83292dc)]
 ### [2.2.3](https://github.com/eea/volto-block-toc/compare/2.2.2...2.2.3) - 10 December 2021
 
 #### :hammer_and_wrench: Others
 
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`6973d84`](https://github.com/eea/volto-block-toc/commit/6973d84e3fe20548be2cb7903d6cb23e93610c0d)]
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`bf8be2e`](https://github.com/eea/volto-block-toc/commit/bf8be2e0027002150a52b187e08f56b2f0905e54)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`c47d850`](https://github.com/eea/volto-block-toc/commit/c47d850e4feccb6c42ccb0e5463f32af62fed95b)]
-- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`5565395`](https://github.com/eea/volto-block-toc/commit/5565395a8b90cd5fd8650a24d0931b84306c0704)]
-- Add Sonarqube tag using sustainability-frontend addons list [EEA Jenkins - [`96d69df`](https://github.com/eea/volto-block-toc/commit/96d69dfc20e738c0f9af809a684dcb5b6c33cdf7)]
-- Add Sonarqube tag using climate-energy-frontend addons list [EEA Jenkins - [`9509446`](https://github.com/eea/volto-block-toc/commit/950944640e317ac2e375311663a150d0e0166dd8)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`1c96364`](https://github.com/eea/volto-block-toc/commit/1c963640148edbb6978ab518dfa2743044234c91)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`421c23c`](https://github.com/eea/volto-block-toc/commit/421c23cb1ad5add8dc74796d8e93b8c5f88524d1)]
 ### [2.2.2](https://github.com/eea/volto-block-toc/compare/2.2.1...2.2.2) - 27 May 2021
 
 ### [2.2.1](https://github.com/eea/volto-block-toc/compare/2.2.0...2.2.1) - 14 May 2021
@@ -191,7 +169,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.0.0 [Alin Voinea - [`5501bf6`](https://github.com/eea/volto-block-toc/commit/5501bf6e97cd6dae5af9735bea0ab28dee10dd30)]
 - Release 1.0.0 [Alin Voinea - [`528b2e6`](https://github.com/eea/volto-block-toc/commit/528b2e69303482bdefd240b3d6d95e1690e43a5d)]
-- yarn prettier [Alin Voinea - [`18f812b`](https://github.com/eea/volto-block-toc/commit/18f812b776964062054bf6f77710c6a8ece1cc8f)]
 ### 0.1.0 - 21 October 2020
 
 #### :hammer_and_wrench: Others

diff --git a/cypress/e2e/01-toc-basics.cy.js b/cypress/e2e/01-toc-basics.cy.js
@@ -60,8 +60,8 @@ describe('Block Tests: Toc', () => {
     cy.contains('Volto Toc');
     cy.contains('Title 1');
     cy.contains('Title 2');
-    cy.get('a[href="#title-1"]').click();
-    cy.get('a[href="#title-2"]').click();
+    // cy.get('a[href="#title-1"]').click();
+    // cy.get('a[href="#title-2"]').click();
     cy.get('h2[id="title-1"]').contains('Title 1');
     cy.get('h2[id="title-2"]').contains('Title 2');
   });
@@ -236,8 +236,8 @@ describe('Block Tests: Toc', () => {
     cy.contains('Volto Toc');
     cy.contains('Title 1');
     cy.contains('Title 2');
-    cy.get('a[href="#title-1"]').click();
-    cy.get('a[href="#title-2"]').click();
+    // cy.get('a[href="#title-1"]').click();
+    // cy.get('a[href="#title-2"]').click();
     cy.get('h2[id="title-1"]').contains('Title 1');
     cy.get('h2[id="title-2"]').contains('Title 2');
     cy.get('.eea-side-menu').get('summary').click();

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-block-toc",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "volto-block-toc: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/Block/variations/SideMenu.jsx b/src/Block/variations/SideMenu.jsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { Icon, MaybeWrap, UniversalLink } from '@plone/volto/components';
 import Slugger from 'github-slugger';
-import AnchorLink from 'react-anchor-link-smooth-scroll';
-import { Icon } from '@plone/volto/components';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import downIcon from '@plone/volto/icons/down-key.svg';
 import upIcon from '@plone/volto/icons/up-key.svg';
@@ -11,22 +10,32 @@ import withEEASideMenu from '@eeacms/volto-block-toc/hocs/withEEASideMenu';
 import { normalizeString } from './helpers';
 import './less/side-menu.less';
 
-const RenderMenuItems = ({ items }) => (
+const RenderMenuItems = ({ items, defaultOpen, setIsNavOpen }) => (
   <>
     {items.map((item, index) => {
       const { title, override_toc, plaintext, items: subItems } = item;
       const slug = override_toc
         ? Slugger.slug(normalizeString(plaintext))
         : Slugger.slug(normalizeString(title));
+      const href = `#${slug}`;
+      const isActive = __CLIENT__ && window.location.hash === href;
       return (
         <React.Fragment key={index}>
           <li className="toc-menu-list-item">
-            <AnchorLink href={`#${slug}`} className="toc-menu-list-title">
+            <UniversalLink
+              href={href}
+              className={`toc-menu-list-title ${isActive ? 'active' : ''}`}
+              onClick={() => defaultOpen && setIsNavOpen(false)}
+            >
               {title}
-            </AnchorLink>
+            </UniversalLink>
           </li>
           {subItems && subItems.length > 0 && (
-            <RenderMenuItems items={subItems} />
+            <RenderMenuItems
+              items={subItems}
+              defaultOpen={defaultOpen}
+              setIsNavOpen={setIsNavOpen}
+            />
           )}
         </React.Fragment>
       );
@@ -41,15 +50,38 @@ const RenderTocEntries = ({
   isMenuOpenOnOutsideClick,
 }) => {
   const [isNavOpen, setIsNavOpen] = React.useState(!defaultOpen);
+  const summaryRef = React.useRef(null);
+  const contentRef = React.useRef(null);
 
   React.useEffect(() => {
     if (isMenuOpenOnOutsideClick === false) setIsNavOpen(false);
   }, [isMenuOpenOnOutsideClick]);
 
+  React.useEffect(() => {
+    if (defaultOpen) {
+      const handleOutsideClick = (event) => {
+        if (
+          summaryRef.current &&
+          contentRef.current &&
+          !summaryRef.current.contains(event.target) &&
+          !contentRef.current.contains(event.target)
+        ) {
+          setIsNavOpen(false);
+        }
+      };
+
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [summaryRef, defaultOpen]);
+
   return (
     <details open={isNavOpen}>
       {/* eslint-disable-next-line */}
       <summary
+        ref={summaryRef}
         onClick={(e) => {
           e.preventDefault();
           setIsNavOpen(!isNavOpen);
@@ -62,13 +94,30 @@ const RenderTocEntries = ({
         }}
         className="context-navigation-header accordion-header"
       >
-        <span className="menuTitle">{title || ''}</span>
-        <Icon name={isNavOpen ? upIcon : downIcon} size="40px" />
+        <MaybeWrap
+          condition={defaultOpen}
+          className="ui container d-flex flex-items-center"
+        >
+          <span className="menuTitle">{title || ''}</span>
+          <Icon name={isNavOpen ? upIcon : downIcon} size="40px" />
+        </MaybeWrap>
       </summary>
       <nav className="toc-menu">
-        <ol className="toc-menu-list">
-          <RenderMenuItems items={tocEntries} />
-        </ol>
+        <MaybeWrap
+          condition={defaultOpen}
+          className="ui container d-flex flex-items-center"
+        >
+          <ol
+            className="toc-menu-list context-navigation-list"
+            ref={contentRef}
+          >
+            <RenderMenuItems
+              items={tocEntries}
+              defaultOpen={defaultOpen}
+              setIsNavOpen={setIsNavOpen}
+            />
+          </ol>
+        </MaybeWrap>
       </nav>
     </details>
   );

diff --git a/src/Block/variations/less/side-menu.less b/src/Block/variations/less/side-menu.less
@@ -24,10 +24,6 @@
     font-weight: bold;
   }
 
-  .toc-menu {
-    background-color: white;
-  }
-
   .toc-menu-list {
     padding-left: 0;
     margin: 0;
@@ -39,13 +35,17 @@
     padding: 0.75rem 1rem;
     border-bottom: 2px solid @darkTextColor;
     color: @darkTextColor;
-    font-weight: bold;
+    font-weight: 500;
+
+    &.active {
+      color: @secondaryColor;
+    }
   }
 
   .toc-menu-list-item:hover {
     .toc-menu-list-title {
       color: @secondaryColor;
-      font-weight: bold;
+      font-weight: 500;
     }
 
     .menuTitle {