@eeacms/volto-eea-website-policy 2.1.1 → 2.2.0

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).
 
+### [2.2.0](https://github.com/eea/volto-eea-website-policy/compare/2.1.1...2.2.0) - 26 August 2024
+
+#### :rocket: New Features
+
+- feat: context navigation portlet - refs #270999 [ichim-david - [`ca045b4`](https://github.com/eea/volto-eea-website-policy/commit/ca045b464c16aa5f1107204138e2ebfadf8669e3)]
+
+#### :hammer_and_wrench: Others
+
 ### [2.1.1](https://github.com/eea/volto-eea-website-policy/compare/2.1.0...2.1.1) - 30 May 2024
 
 #### :house: Internal changes
@@ -12,12 +20,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`c297b9e`](https://github.com/eea/volto-eea-website-policy/commit/c297b9efe743ad1f95ab662007a2186b5f042f4c)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`b11c055`](https://github.com/eea/volto-eea-website-policy/commit/b11c055d0a41c89a60f70875124994ba52772e48)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`a77d04e`](https://github.com/eea/volto-eea-website-policy/commit/a77d04e9f1e4d6b8657e09fd1a2bcde66499f77f)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`12c6e92`](https://github.com/eea/volto-eea-website-policy/commit/12c6e92e4157896bf812dbbd8996c754b491d3ea)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`0aa866d`](https://github.com/eea/volto-eea-website-policy/commit/0aa866dc6fb5f4226a99a3e192a958af60385185)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`7517f96`](https://github.com/eea/volto-eea-website-policy/commit/7517f96d82efd6a7ddaa746c81a51997583363f6)]
 ### [2.1.0](https://github.com/eea/volto-eea-website-policy/compare/2.0.0...2.1.0) - 9 May 2024
 
 #### :rocket: New Features
@@ -27,10 +29,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 2.1.0 [alin - [`da22af4`](https://github.com/eea/volto-eea-website-policy/commit/da22af436092236d7ef6e8568e3eca4813d517b5)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`9a5d706`](https://github.com/eea/volto-eea-website-policy/commit/9a5d7064e829622e2627c616c4ca1ce71511dfcb)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`f8b40e9`](https://github.com/eea/volto-eea-website-policy/commit/f8b40e961138efc4090d0ab45a5689905c672b15)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`4ab2144`](https://github.com/eea/volto-eea-website-policy/commit/4ab2144e02291d98064b001d9eb40417da4d1795)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`5af4642`](https://github.com/eea/volto-eea-website-policy/commit/5af464227c6695c7e2d3ccd9f240c2a5071bfefa)]
 ## [2.0.0](https://github.com/eea/volto-eea-website-policy/compare/1.15.0...2.0.0) - 22 April 2024
 
 #### :rocket: New Features
@@ -103,7 +101,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- test: [JENKINS] fail with logs on coverage [valentinab25 - [`5cf68f8`](https://github.com/eea/volto-eea-website-policy/commit/5cf68f8db34448d10fe993d16541ad9732434cc8)]
 ### [1.12.0-beta.1](https://github.com/eea/volto-eea-website-policy/compare/1.11.1...1.12.0-beta.1) - 12 January 2024
 
 #### :hammer_and_wrench: Others
@@ -124,11 +121,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 1.11.0 [Alin Voinea - [`3249160`](https://github.com/eea/volto-eea-website-policy/commit/3249160422c6c6e0cf14823b614f8885101a847a)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`8beb7e7`](https://github.com/eea/volto-eea-website-policy/commit/8beb7e7a12cbc314e56e4b1aceab5ef8d00ca6f3)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`12d3da1`](https://github.com/eea/volto-eea-website-policy/commit/12d3da12e9a3b0882cf55efe2d40f3032724d41b)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`0af0764`](https://github.com/eea/volto-eea-website-policy/commit/0af076467120ed9a80c697931e869837b92a0a4c)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`8662e3e`](https://github.com/eea/volto-eea-website-policy/commit/8662e3e5fc3640d678ce320eb8856a37d419306c)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`ef1074f`](https://github.com/eea/volto-eea-website-policy/commit/ef1074fdf968cafdf476d4ee4951eb18ebac048a)]
 ### [1.10.0](https://github.com/eea/volto-eea-website-policy/compare/1.9.2...1.10.0) - 2 November 2023
 
 #### :rocket: New Features
@@ -137,7 +129,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`8b1b422`](https://github.com/eea/volto-eea-website-policy/commit/8b1b42297b46d9fb7325589b3bd043233c0d66e9)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`44ac62e`](https://github.com/eea/volto-eea-website-policy/commit/44ac62e6f8b7e5b7d57edfbf82812c91dc5d6bba)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`b9a46d8`](https://github.com/eea/volto-eea-website-policy/commit/b9a46d85a64739188a3df9e8cbe645418b5d8b0a)]
 
@@ -258,7 +249,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.5.0 [Alin Voinea - [`a3dea8e`](https://github.com/eea/volto-eea-website-policy/commit/a3dea8ea15cb8d2a876dc10da926ece3a5707ea9)]
 - test(Jenkinsfile): Use latest stable volto for testing [Alin Voinea - [`a8f7123`](https://github.com/eea/volto-eea-website-policy/commit/a8f712364187f9638886667c249fa102cb49b5c0)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`124a8f8`](https://github.com/eea/volto-eea-website-policy/commit/124a8f8ad4ced507aeec27012d725f2e2b977e08)]
 ### [1.4.0](https://github.com/eea/volto-eea-website-policy/compare/1.3.4...1.4.0) - 21 February 2023
 
 #### :rocket: New Features
@@ -338,7 +328,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 1.1.0 [Alin Voinea - [`0291b3b`](https://github.com/eea/volto-eea-website-policy/commit/0291b3bb7b4c6ab09ca98728885cea4051eac8e3)]
-- yarn 3 [Alin Voinea - [`593aa58`](https://github.com/eea/volto-eea-website-policy/commit/593aa58eaa4d28aced0603b7f7dd125c857a6f54)]
 ### [1.0.4](https://github.com/eea/volto-eea-website-policy/compare/1.0.3...1.0.4) - 22 November 2022
 
 #### :nail_care: Enhancements
@@ -384,7 +373,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`d153f54`](https://github.com/eea/volto-eea-website-policy/commit/d153f54e55e918fa4746e05488c734624eaf14a9)]
 ### [0.4.0](https://github.com/eea/volto-eea-website-policy/compare/0.3.3...0.4.0) - 19 September 2022
 
 #### :hammer_and_wrench: Others
@@ -460,7 +448,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - format index.js [Andrei Grigore - [`db4481a`](https://github.com/eea/volto-eea-website-policy/commit/db4481aeeba59a769272659f33278c902fc69bec)]
 - Update index.js [Alexandru Ghica - [`dc09886`](https://github.com/eea/volto-eea-website-policy/commit/dc0988640a76a9914381b120f58bb61a9ab1eb39)]
 - Added externalRoutes [Alexandru Ghica - [`b68135b`](https://github.com/eea/volto-eea-website-policy/commit/b68135b013fafa93a41ea602ea2fad30879abe0f)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`575cca6`](https://github.com/eea/volto-eea-website-policy/commit/575cca674602ca2e1c2a41300c47ba594ff49aa0)]
 ### [0.1.1](https://github.com/eea/volto-eea-website-policy/compare/0.1.0...0.1.1) - 4 March 2022
 
 #### :hammer_and_wrench: Others
@@ -473,5 +460,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn bootstrap [Alin Voinea - [`9b4d197`](https://github.com/eea/volto-eea-website-policy/commit/9b4d197cbc7992566cb36524d190078d5ad21a44)]
 - Initial commit [Alin Voinea - [`3800692`](https://github.com/eea/volto-eea-website-policy/commit/3800692f7a4de6460815bd6061facacb986cbef0)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,10 +17,12 @@
     "url": "git@github.com:eea/volto-eea-website-policy.git"
   },
   "addons": [
+    "@eeacms/volto-block-toc",
     "@eeacms/volto-widget-dataprovenance",
     "@plone-collective/volto-authomatic"
   ],
   "dependencies": {
+    "@eeacms/volto-block-toc": "*",
     "@eeacms/volto-widget-dataprovenance": "*",
     "@plone-collective/volto-authomatic": "*"
   },

package/src/components/Blocks/ContextNavigation/ContextNavigationEdit.jsx

@@ -1,31 +1,45 @@
 import React from 'react';
 import { EditSchema } from './schema';
-import { InlineForm, SidebarPortal } from '@plone/volto/components';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
 import ContextNavigationView from './ContextNavigationView';
 
-const ContextNavigationFillView = (props) => {
-  const schema = EditSchema();
+const ContextNavigationFillEdit = (props) => {
+  const contentTypes = props.properties?.['@components']?.types;
+  const availableTypes = React.useMemo(
+    () => contentTypes?.map((type) => [type.id, type.title || type.name]),
+    [contentTypes],
+  );
+
+  const schema = React.useMemo(
+    () => EditSchema({ availableTypes }),
+    [availableTypes],
+  );
+
   return (
     <>
       <h3>Context navigation</h3>
       <ContextNavigationView {...props} />{' '}
       <SidebarPortal selected={props.selected}>
-        {props.selected && (
-          <InlineForm
-            title={schema.title}
-            schema={schema}
-            formData={props.data}
-            onChangeField={(id, value) => {
-              props.onChangeBlock(props.block, {
-                ...props.data,
-                [id]: value,
-              });
-            }}
-          />
-        )}
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={props.onChangeBlock}
+          formData={props.data}
+          block={props.block}
+          navRoot={props.navRoot}
+          contentType={props.contentType}
+        />
       </SidebarPortal>
     </>
   );
 };
 
-export default ContextNavigationFillView;
+export default ContextNavigationFillEdit;

package/src/components/Blocks/ContextNavigation/ContextNavigationEdit.test.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import ContextNavigationEdit from './ContextNavigationEdit';
 import { Router } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
 import { createMemoryHistory } from 'history';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -12,12 +14,13 @@ jest.mock('@plone/volto/components', () => ({
       <input id="test" onChange={onChangeField} />
     </div>
   ),
-  SidebarPortal: ({ children }) => (
-    <div>
-      <div>SidebarPortal</div>
-      {children}
-    </div>
-  ),
+  SidebarPortal: ({ children, selected }) =>
+    selected ? (
+      <div>
+        <div>SidebarPortal</div>
+        {children}
+      </div>
+    ) : null,
 }));
 
 jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
@@ -29,27 +32,48 @@ jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
   };
 });
 
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
+  emptyBlocksForm: jest.fn(),
+  getBlocksLayoutFieldname: () => 'blocks_layout',
+  withVariationSchemaEnhancer: jest.fn((Component) => Component),
+}));
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
 describe('ContextNavigationEdit', () => {
   it('renders corectly', () => {
     const history = createMemoryHistory();
     const { getByText, queryByText } = render(
-      <Router history={history}>
-        <ContextNavigationEdit />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationEdit selected={false} />
+        </Router>
+        ,
+      </Provider>,
     );
 
     expect(getByText('Context navigation')).toBeInTheDocument();
     expect(getByText('ConnectedContextNavigation')).toBeInTheDocument();
     expect(queryByText('InlineForm')).toBeNull();
-    expect(getByText('SidebarPortal')).toBeInTheDocument();
+    expect(queryByText('SidebarPortal')).toBeNull();
   });
 
   it('renders corectly', () => {
     const history = createMemoryHistory();
     const { container, getByText } = render(
-      <Router history={history}>
-        <ContextNavigationEdit selected={true} onChangeBlock={() => {}} />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationEdit selected={true} onChangeBlock={() => {}} />
+        </Router>
+        ,
+      </Provider>,
     );
 
     expect(getByText('Context navigation')).toBeInTheDocument();

package/src/components/Blocks/ContextNavigation/ContextNavigationView.jsx

@@ -1,17 +1,14 @@
 import React from 'react';
-import ConnectedContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL, withBlockExtensions } from '@plone/volto/helpers';
+import DefaultTemplate from './variations/Default';
 
-const ContextNavigationView = ({ data = {} }) => {
+const ContextNavigationView = (props = {}) => {
+  const { variation, data = {} } = props;
   const navProps = { ...data };
   const root_path = data?.root_node?.[0]?.['@id'];
   if (root_path) navProps['root_path'] = flattenToAppURL(root_path);
-
-  return (
-    <>
-      <ConnectedContextNavigation params={navProps} />
-    </>
-  );
+  const Renderer = variation?.view ?? DefaultTemplate;
+  return <Renderer params={navProps} />;
 };
 
-export default ContextNavigationView;
+export default withBlockExtensions(ContextNavigationView);

package/src/components/Blocks/ContextNavigation/ContextNavigationView.test.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import ContextNavigationView from './ContextNavigationView';
 import { Router } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
 import { createMemoryHistory } from 'history';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -14,6 +16,21 @@ jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
   };
 });
 
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
+  emptyBlocksForm: jest.fn(),
+  getBlocksLayoutFieldname: () => 'blocks_layout',
+  flattenToAppURL: () => '',
+}));
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
 describe('ContextNavigationView', () => {
   let history;
   beforeEach(() => {
@@ -22,9 +39,11 @@ describe('ContextNavigationView', () => {
 
   it('renders corectly', () => {
     const { container } = render(
-      <Router history={history}>
-        <ContextNavigationView />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationView />
+        </Router>
+      </Provider>,
     );
 
     expect(container.firstChild).toHaveTextContent(
@@ -34,17 +53,19 @@ describe('ContextNavigationView', () => {
 
   it('renders corectly', () => {
     const { container } = render(
-      <Router history={history}>
-        <ContextNavigationView
-          data={{
-            navProps: { root_path: 'https://localhost:3000/test' },
-            root_node: [{ '@id': 'root_node' }],
-          }}
-        />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationView
+            data={{
+              navProps: { root_path: 'https://localhost:3000/test' },
+              root_node: [{ '@id': 'root_node' }],
+            }}
+          />
+        </Router>
+      </Provider>,
     );
     expect(container.firstChild).toHaveTextContent(
-      'ConnectedContextNavigation root_node',
+      'ConnectedContextNavigation',
     );
   });
 });

package/src/components/Blocks/ContextNavigation/index.js

@@ -2,6 +2,7 @@ import codeSVG from '@plone/volto/icons/code.svg';
 import ContextNavigationEdit from './ContextNavigationEdit';
 import ContextNavigationView from './ContextNavigationView';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
+import variations from './variations';
 
 const applyConfig = (config) => {
   config.blocks.blocksConfig.contextNavigation = {
@@ -13,6 +14,7 @@ const applyConfig = (config) => {
     edit: ContextNavigationEdit,
     schema: BlockSettingsSchema,
     restricted: true,
+    variations,
     mostUsed: true,
     blockHasOwnFocusManagement: true,
     sidebarTab: 1,

package/src/components/Blocks/ContextNavigation/schema.js

@@ -1,4 +1,4 @@
-export const EditSchema = () => {
+export const EditSchema = ({ availableTypes }) => {
   return {
     title: 'Navigation',
     fieldsets: [
@@ -8,6 +8,7 @@ export const EditSchema = () => {
         fields: [
           'name',
           'root_node',
+          'portal_type',
           'includeTop',
           'currentFolderOnly',
           'topLevel',
@@ -33,6 +34,12 @@ export const EditSchema = () => {
         mode: 'link',
         selectedItemAttrs: ['Title', 'Description'],
       },
+      portal_type: {
+        title: 'Filter children',
+        description: 'Only show child items of this content type',
+        choices: availableTypes,
+        isMulti: true,
+      },
       includeTop: {
         title: 'Include top node',
         description:
@@ -61,7 +68,7 @@ export const EditSchema = () => {
         default: 0,
       },
       no_icons: {
-        title: 'Supress icons',
+        title: 'Suppress icons',
         description:
           'If enabled, the portlet will not show document type icons.',
         type: 'boolean',
@@ -72,7 +79,7 @@ export const EditSchema = () => {
           "Enter a valid scale name (see 'Image Handling' control panel) to override (e.g. icon, tile, thumb, mini, preview, ... ). Leave empty to use default (see 'Site' control panel).",
       },
       no_thumbs: {
-        title: 'Supress thumbs',
+        title: 'Suppress thumbs',
         type: 'boolean',
         description: 'If enabled, the portlet will not show thumbs.',
       },

package/src/components/Blocks/ContextNavigation/variations/Accordion.jsx

@@ -0,0 +1,175 @@
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { withRouter } from 'react-router';
+import { compose } from 'redux';
+import { Accordion } from 'semantic-ui-react';
+
+import Slugger from 'github-slugger';
+
+import { Icon, UniversalLink } from '@plone/volto/components';
+import { withContentNavigation } from '@plone/volto/components/theme/Navigation/withContentNavigation';
+import withEEASideMenu from '@eeacms/volto-block-toc/hocs/withEEASideMenu';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import downIcon from '@plone/volto/icons/down-key.svg';
+import upIcon from '@plone/volto/icons/up-key.svg';
+
+const messages = defineMessages({
+  navigation: {
+    id: 'Navigation',
+    defaultMessage: 'Navigation',
+  },
+});
+
+const AccordionNavigation = ({
+  navigation = {},
+  device,
+  isMenuOpenOnOutsideClick,
+}) => {
+  const { items = [], title, has_custom_name } = navigation;
+  const intl = useIntl();
+  const navOpen = ['mobile', 'tablet'].includes(device) ? false : true;
+  const [isNavOpen, setIsNavOpen] = React.useState(navOpen);
+  const [activeItems, setActiveItems] = React.useState({});
+
+  const onClickSummary = React.useCallback((e) => {
+    e.preventDefault();
+    setIsNavOpen((prev) => !prev);
+  }, []);
+
+  React.useEffect(() => {
+    if (isMenuOpenOnOutsideClick === false) setIsNavOpen(false);
+  }, [isMenuOpenOnOutsideClick]);
+
+  const onKeyDownSummary = React.useCallback(
+    (e) => {
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        e.preventDefault();
+        onClickSummary(e);
+      }
+    },
+    [onClickSummary],
+  );
+
+  const renderItems = ({ item, level = 0 }) => {
+    const {
+      title,
+      href,
+      is_current,
+      is_in_path,
+      items: childItems,
+      type,
+    } = item;
+    const hasChildItems = childItems && childItems.length > 0;
+    const normalizedTitle = Slugger.slug(title);
+
+    const checkIfActive = () => {
+      return activeItems[href] !== undefined ? activeItems[href] : is_in_path;
+    };
+
+    const isActive = checkIfActive();
+
+    const handleTitleClick = () => {
+      setActiveItems((prev) => ({ ...prev, [href]: !isActive }));
+    };
+
+    return (
+      <li
+        className={cx({
+          is_in_path,
+          'accordion-list-title': !hasChildItems,
+          'accordion-list-item': hasChildItems,
+        })}
+        key={href}
+      >
+        {hasChildItems ? (
+          <Accordion className="default">
+            <Accordion.Title
+              active={isActive}
+              as={'button'}
+              aria-expanded={isActive}
+              onClick={handleTitleClick}
+              aria-controls={`accordion-content-${normalizedTitle}`}
+              id={`accordion-title-${normalizedTitle}`}
+            >
+              <span className="title-text">{title}</span>
+              <Icon name={isActive ? upIcon : downIcon} size="32px" />
+            </Accordion.Title>
+            <Accordion.Content
+              active={isActive}
+              id={`accordion-content-${normalizedTitle}`}
+              aria-labelledby={`accordion-title-${normalizedTitle}`}
+              role="region"
+            >
+              <ul className="accordion-list">
+                {childItems.map((child) =>
+                  renderItems({ item: child, level: level + 1 }),
+                )}
+              </ul>
+            </Accordion.Content>
+          </Accordion>
+        ) : (
+          <UniversalLink
+            href={flattenToAppURL(href)}
+            className={cx(`title-link contenttype-${type}`, {
+              current: is_current,
+              in_path: is_in_path,
+            })}
+          >
+            {title}
+          </UniversalLink>
+        )}
+      </li>
+    );
+  };
+
+  return items.length ? (
+    <>
+      <nav className="context-navigation">
+        <details open={isNavOpen}>
+          {/* eslint-disable-next-line */}
+          <summary
+            className="context-navigation-header accordion-header"
+            onClick={onClickSummary}
+            onKeyDown={onKeyDownSummary}
+          >
+            {has_custom_name ? title : intl.formatMessage(messages.navigation)}
+            <Icon name={isNavOpen ? upIcon : downIcon} size="40px" />
+          </summary>
+          <ul className="context-navigation-list accordion-list">
+            {items.map((item) => renderItems({ item }))}
+          </ul>
+        </details>
+      </nav>
+    </>
+  ) : null;
+};
+
+AccordionNavigation.propTypes = {
+  /**
+   * Navigation tree returned from @contextnavigation restapi endpoint
+   */
+  navigation: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string,
+        href: PropTypes.string,
+        is_current: PropTypes.bool,
+        is_in_path: PropTypes.bool,
+        items: PropTypes.array,
+        type: PropTypes.string,
+      }),
+    ),
+    has_custom_name: PropTypes.bool,
+    title: PropTypes.string,
+  }),
+};
+
+export default compose(
+  withRouter,
+  withContentNavigation,
+  withEEASideMenu,
+)(AccordionNavigation);

package/src/components/Blocks/ContextNavigation/variations/Default.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ConnectedContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation';
+
+const Default = (props) => {
+  const { params } = props;
+  return <ConnectedContextNavigation params={params} />;
+};
+
+export default Default;

package/src/components/Blocks/ContextNavigation/variations/index.js

@@ -0,0 +1,18 @@
+import Accordion from './Accordion';
+import Default from './Default';
+
+const contextBlockVariations = [
+  {
+    id: 'default',
+    title: 'Listing (default)',
+    view: Default,
+    isDefault: true,
+  },
+  {
+    id: 'accordion',
+    title: 'Accordion',
+    view: Accordion,
+  },
+];
+
+export default contextBlockVariations;

package/src/index.js

@@ -112,7 +112,7 @@ const applyConfig = (config) => {
     ...config.settings.eea,
     rolesWhoCanChangeLayout: ['Manager'],
   };
-  // config.settings.eea.rolesWhoCanChangeLayout = ['Manager'];
+  config.settings.eea.rolesWhoCanChangeLayout = ['Manager'];
 
   // Custom blocks
   // context navigation
@@ -135,6 +135,10 @@ const applyConfig = (config) => {
     }
   });
 
+  if (config.blocks.blocksConfig.contextNavigation) {
+    config.blocks.blocksConfig.contextNavigation.restricted = false;
+  }
+
   // Override blocks config
   Object.keys(overrideBlocks).forEach((block) => {
     if (config.blocks.blocksConfig[block]) {