@eeacms/volto-eea-website-policy 0.2.5 → 0.3.1

package/CHANGELOG.md

@@ -4,8 +4,31 @@ 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).
 
+#### [0.3.1](https://github.com/eea/volto-eea-website-policy/compare/0.3.0...0.3.1)
+
+- feature(navigation): addde context navigation block [`2b0b6f6`](https://github.com/eea/volto-eea-website-policy/commit/2b0b6f616adf85ab41365a7cf6ee6e690ff9fd0c)
+
+#### [0.3.0](https://github.com/eea/volto-eea-website-policy/compare/0.2.6...0.3.0)
+
+> 6 July 2022
+
+- change(teaser): enabled theming for icon and text color [`#13`](https://github.com/eea/volto-eea-website-policy/pull/13)
+- change(package): bump release version [`1b00439`](https://github.com/eea/volto-eea-website-policy/commit/1b0043933442bb73c1042dce644a2c09e5f210f4)
+- change(item): enable theming for icon and text color and added tertiary option [`58c2d28`](https://github.com/eea/volto-eea-website-policy/commit/58c2d2864fe94c9e7808064b61d3b6c4e6fccbb1)
+- change(item): commented sizes too small for item icons and enabled tertiary theme [`0f02d7d`](https://github.com/eea/volto-eea-website-policy/commit/0f02d7d6204b068b78c3f977a561782a19b6f79e)
+
+#### [0.2.6](https://github.com/eea/volto-eea-website-policy/compare/0.2.5...0.2.6)
+
+> 1 July 2022
+
+- Fix Cannot read properties of undefined (reading 'translations') [`8e7b8b8`](https://github.com/eea/volto-eea-website-policy/commit/8e7b8b8533b14f173d77783fe2d0b517c29c5937)
+- Customize Toolbar.jsx - copied unchanged from @plone/volto 16.0.0.alpha.11 [`b7add4f`](https://github.com/eea/volto-eea-website-policy/commit/b7add4faa8ef2dde7d77489fc8bc431cbb023314)
+
 #### [0.2.5](https://github.com/eea/volto-eea-website-policy/compare/0.2.4...0.2.5)
 
+> 23 June 2022
+
+- Rounded Card variation and disable ImageCards block [`#11`](https://github.com/eea/volto-eea-website-policy/pull/11)
 - Rounded card via style wrapper [`6728684`](https://github.com/eea/volto-eea-website-policy/commit/67286844b00902aa4c6b316b50be35db95c531f0)
 - Revert "Rounded Card variation - refs #148723" [`0168a86`](https://github.com/eea/volto-eea-website-policy/commit/0168a86fa644a9b848e37c7f5054eb4308c36784)
 - Disable Image Cards block [`3ed8dc3`](https://github.com/eea/volto-eea-website-policy/commit/3ed8dc311cad8e30a8c918ecec7b21cc99260c50)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { EditSchema } from './schema';
+import { InlineForm, SidebarPortal } from '@plone/volto/components';
+import ContextNavigationView from './ContextNavigationView';
+
+const ContextNavigationFillView = (props) => {
+  const schema = EditSchema();
+  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,
+              });
+            }}
+          />
+        )}
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default ContextNavigationFillView;

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

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

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

@@ -0,0 +1,26 @@
+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';
+
+export default (config) => {
+  config.blocks.blocksConfig.contextNavigation = {
+    id: 'contextNavigation',
+    title: 'Navigation',
+    icon: codeSVG,
+    group: 'site',
+    view: ContextNavigationView,
+    edit: ContextNavigationEdit,
+    schema: BlockSettingsSchema,
+    restricted: false,
+    mostUsed: true,
+    blockHasOwnFocusManagement: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+};

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

@@ -0,0 +1,81 @@
+export const EditSchema = () => {
+  return {
+    title: 'Navigation',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'name',
+          'root_node',
+          'includeTop',
+          'currentFolderOnly',
+          'topLevel',
+          'bottomLevel',
+          'no_icons',
+          'thumb_scale',
+          'no_thumbs',
+        ],
+      },
+    ],
+    required: [],
+    properties: {
+      name: {
+        title: 'Title',
+        description: 'The title of the navigation tree',
+      },
+      root_node: {
+        title: 'Root node',
+        description:
+          'You may search for and choose a folder to act as the root of the navigation tree. Leave blank to use the Plone site root.',
+        widget: 'object_browser',
+        // TODO: these don't work. Why?
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description'],
+      },
+      includeTop: {
+        title: 'Include top node',
+        description:
+          "Whether or not to show the top, or 'root', node in the navigation tree. This is affected by the 'Start level' setting.",
+        type: 'boolean',
+      },
+      currentFolderOnly: {
+        title: 'Only show the contents of the current folder',
+        description:
+          'If selected, the navigation tree will only show the current folder and its children at all times.',
+        type: 'boolean',
+      },
+
+      topLevel: {
+        title: 'Start level',
+        description:
+          'An integer value that specifies the number of folder levels below the site root that must be exceeded before the navigation tree will display. 0 means that the navigation tree should be displayed everywhere including pages in the root of the site. 1 means the tree only shows up inside folders located in the root and downwards, never showing at the top level.',
+        type: 'number',
+        default: 1,
+      },
+      bottomLevel: {
+        title: 'Navigation tree depth',
+        description:
+          'How many folders should be included before the navigation tree stops. 0 means no limit. 1 only includes the root folder.',
+        type: 'number',
+        default: 0,
+      },
+      no_icons: {
+        title: 'Supress icons',
+        description:
+          'If enabled, the portlet will not show document type icons.',
+        type: 'boolean',
+      },
+      thumb_scale: {
+        title: 'Override thumb scale',
+        description:
+          "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',
+        type: 'boolean',
+        description: 'If enabled, the portlet will not show thumbs.',
+      },
+    },
+  };
+};

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

@@ -12,7 +12,13 @@ export default ({ data }) => {
         ? [{ id: 'image', title: 'Image', fields: ['image', 'imageSize'] }]
         : []),
       ...(assetType === 'icon'
-        ? [{ id: 'icon', title: 'Icon', fields: ['icon', 'iconSize'] }]
+        ? [
+            {
+              id: 'icon',
+              title: 'Icon',
+              fields: ['icon', 'iconSize', 'iconTheme'],
+            },
+          ]
         : []),
     ],
     properties: {
@@ -31,10 +37,11 @@ export default ({ data }) => {
       imageSize: {
         title: 'Image size',
         choices: [
-          ['mini', 'Mini'],
-          ['tile', 'Tile'],
-          ['tiny', 'Tiny'],
-          ['small', 'Small'],
+          // commented as they were too small to use as item icons
+          // ['mini', 'Mini'],
+          // ['tile', 'Tile'],
+          // ['tiny', 'Tiny'],
+          // ['small', 'Small'],
           ['large', 'Large'],
           ['big', 'Big'],
           ['huge', 'Huge'],
@@ -63,6 +70,7 @@ export default ({ data }) => {
         choices: [
           ['primary', 'Primary'],
           ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
         ],
       },
     },
@@ -86,6 +94,7 @@ export const stylingSchema = ({ intl }) => ({
       choices: [
         ['primary', 'Primary'],
         ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
       ],
     },
     verticalAlign: {

package/src/customizations/volto/components/manage/Toolbar/Toolbar.jsx

@@ -0,0 +1,589 @@
+/**
+ * Toolbar component.
+ * @module components/manage/Toolbar/Toolbar
+ */
+
+import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import jwtDecode from 'jwt-decode';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import { withCookies } from 'react-cookie';
+import { filter, find } from 'lodash';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+import More from '@plone/volto/components/manage/Toolbar/More';
+import PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
+import Types from '@plone/volto/components/manage/Toolbar/Types';
+import PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
+import PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
+import StandardWrapper from '@plone/volto/components/manage/Toolbar/StandardWrapper';
+import {
+  getTypes,
+  listActions,
+  setExpandedToolbar,
+  unlockContent,
+} from '@plone/volto/actions';
+import { Icon } from '@plone/volto/components';
+import { BodyClass, getBaseUrl, getCookieOptions } from '@plone/volto/helpers';
+import { Pluggable } from '@plone/volto/components/manage/Pluggable';
+
+import penSVG from '@plone/volto/icons/pen.svg';
+import unlockSVG from '@plone/volto/icons/unlock.svg';
+import folderSVG from '@plone/volto/icons/folder.svg';
+import addSVG from '@plone/volto/icons/add-document.svg';
+import moreSVG from '@plone/volto/icons/more.svg';
+import userSVG from '@plone/volto/icons/user.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit',
+    defaultMessage: 'Edit',
+  },
+  contents: {
+    id: 'Contents',
+    defaultMessage: 'Contents',
+  },
+  add: {
+    id: 'Add',
+    defaultMessage: 'Add',
+  },
+  more: {
+    id: 'More',
+    defaultMessage: 'More',
+  },
+  personalTools: {
+    id: 'Personal tools',
+    defaultMessage: 'Personal tools',
+  },
+  shrinkToolbar: {
+    id: 'Shrink toolbar',
+    defaultMessage: 'Shrink toolbar',
+  },
+  personalInformation: {
+    id: 'Personal Information',
+    defaultMessage: 'Personal Information',
+  },
+  personalPreferences: {
+    id: 'Personal Preferences',
+    defaultMessage: 'Personal Preferences',
+  },
+  collection: {
+    id: 'Collection',
+    defaultMessage: 'Collection',
+  },
+  file: {
+    id: 'File',
+    defaultMessage: 'File',
+  },
+  link: {
+    id: 'Link',
+    defaultMessage: 'Link',
+  },
+  newsItem: {
+    id: 'News Item',
+    defaultMessage: 'News Item',
+  },
+  page: {
+    id: 'Page',
+    defaultMessage: 'Page',
+  },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  unlock: {
+    id: 'Unlock',
+    defaultMessage: 'Unlock',
+  },
+});
+
+const toolbarComponents = {
+  personalTools: { component: PersonalTools, wrapper: null },
+  more: { component: More, wrapper: null },
+  types: { component: Types, wrapper: null, contentAsProps: true },
+  profile: {
+    component: PersonalInformation,
+    wrapper: StandardWrapper,
+    wrapperTitle: messages.personalInformation,
+    hideToolbarBody: true,
+  },
+  preferences: {
+    component: PersonalPreferences,
+    wrapper: StandardWrapper,
+    wrapperTitle: messages.personalPreferences,
+    hideToolbarBody: true,
+  },
+};
+
+/**
+ * Toolbar container class.
+ * @class Toolbar
+ * @extends Component
+ */
+class Toolbar extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    actions: PropTypes.shape({
+      object: PropTypes.arrayOf(PropTypes.object),
+      object_buttons: PropTypes.arrayOf(PropTypes.object),
+      user: PropTypes.arrayOf(PropTypes.object),
+    }),
+    token: PropTypes.string,
+    userId: PropTypes.string,
+    pathname: PropTypes.string.isRequired,
+    content: PropTypes.shape({
+      '@type': PropTypes.string,
+      is_folderish: PropTypes.bool,
+      review_state: PropTypes.string,
+    }),
+    getTypes: PropTypes.func.isRequired,
+    types: PropTypes.arrayOf(
+      PropTypes.shape({
+        '@id': PropTypes.string,
+        addable: PropTypes.bool,
+        title: PropTypes.string,
+      }),
+    ),
+    listActions: PropTypes.func.isRequired,
+    unlockContent: PropTypes.func,
+    unlockRequest: PropTypes.objectOf(PropTypes.any),
+    inner: PropTypes.element.isRequired,
+    hideDefaultViewButtons: PropTypes.bool,
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    actions: null,
+    token: null,
+    userId: null,
+    content: null,
+    hideDefaultViewButtons: false,
+    types: [],
+  };
+
+  toolbarWindow = React.createRef();
+
+  constructor(props) {
+    super(props);
+    const { cookies } = props;
+    this.state = {
+      expanded: cookies.get('toolbar_expanded') !== 'false',
+      showMenu: false,
+      menuStyle: {},
+      menuComponents: [],
+      loadedComponents: [],
+      hideToolbarBody: false,
+    };
+  }
+
+  /**
+   * Component will mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.listActions(getBaseUrl(this.props.pathname));
+    this.props.getTypes(getBaseUrl(this.props.pathname));
+    this.props.setExpandedToolbar(this.state.expanded);
+    document.addEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      this.props.listActions(getBaseUrl(nextProps.pathname));
+      this.props.getTypes(getBaseUrl(nextProps.pathname));
+    }
+
+    // Unlock
+    if (this.props.unlockRequest.loading && nextProps.unlockRequest.loaded) {
+      this.props.listActions(getBaseUrl(nextProps.pathname));
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  handleShrink = () => {
+    const { cookies } = this.props;
+    cookies.set('toolbar_expanded', !this.state.expanded, getCookieOptions());
+    this.setState(
+      (state) => ({ expanded: !state.expanded }),
+      () => this.props.setExpandedToolbar(this.state.expanded),
+    );
+  };
+
+  closeMenu = () =>
+    this.setState(() => ({ showMenu: false, loadedComponents: [] }));
+
+  loadComponent = (type) => {
+    const { loadedComponents } = this.state;
+    if (!this.state.loadedComponents.includes(type)) {
+      this.setState({
+        loadedComponents: [...loadedComponents, type],
+        hideToolbarBody: toolbarComponents[type].hideToolbarBody || false,
+      });
+    }
+  };
+
+  unloadComponent = () => {
+    this.setState((state) => ({
+      loadedComponents: state.loadedComponents.slice(0, -1),
+      hideToolbarBody:
+        toolbarComponents[
+          state.loadedComponents[state.loadedComponents.length - 2]
+        ].hideToolbarBody || false,
+    }));
+  };
+
+  toggleMenu = (e, selector) => {
+    if (this.state.showMenu) {
+      this.closeMenu();
+      return;
+    }
+    // PersonalTools always shows at bottom
+    if (selector === 'personalTools') {
+      this.setState((state) => ({
+        showMenu: !state.showMenu,
+        menuStyle: { bottom: 0 },
+      }));
+    } else {
+      this.setState((state) => ({
+        showMenu: !state.showMenu,
+        menuStyle: { top: 0 },
+      }));
+    }
+    this.loadComponent(selector);
+  };
+
+  handleClickOutside = (e) => {
+    if (this.pusher && doesNodeContainClick(this.pusher, e)) return;
+    this.closeMenu();
+  };
+
+  unlock = (e) => {
+    this.props.unlockContent(getBaseUrl(this.props.pathname), true);
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const path = getBaseUrl(this.props.pathname);
+    const lock = this.props.content?.lock;
+    const unlockAction =
+      lock?.locked && lock?.stealable && lock?.creator !== this.props.userId;
+    const editAction =
+      !unlockAction && find(this.props.actions.object, { id: 'edit' });
+    const folderContentsAction = find(this.props.actions.object, {
+      id: 'folderContents',
+    });
+    const { expanded } = this.state;
+
+    return (
+      this.props.token && (
+        <>
+          <BodyClass
+            className={expanded ? 'has-toolbar' : 'has-toolbar-collapsed'}
+          />
+          <div
+            style={this.state.menuStyle}
+            className={
+              this.state.showMenu ? 'toolbar-content show' : 'toolbar-content'
+            }
+            ref={this.toolbarWindow}
+          >
+            {this.state.showMenu && (
+              // This sets the scroll locker in the body tag in mobile
+              <BodyClass className="has-toolbar-menu-open" />
+            )}
+            <div
+              className="pusher-puller"
+              ref={(node) => (this.pusher = node)}
+              style={{
+                transform: this.toolbarWindow.current
+                  ? `translateX(-${
+                      (this.state.loadedComponents.length - 1) *
+                      this.toolbarWindow.current.getBoundingClientRect().width
+                    }px)`
+                  : null,
+              }}
+            >
+              {this.state.loadedComponents.map((component, index) =>
+                (() => {
+                  const ToolbarComponent =
+                    toolbarComponents[component].component;
+                  const WrapperComponent = toolbarComponents[component].wrapper;
+                  const haveActions =
+                    toolbarComponents[component].hideToolbarBody;
+                  const title =
+                    toolbarComponents[component].wrapperTitle &&
+                    this.props.intl.formatMessage(
+                      toolbarComponents[component].wrapperTitle,
+                    );
+                  if (WrapperComponent) {
+                    return (
+                      <WrapperComponent
+                        componentName={component}
+                        componentTitle={title}
+                        pathname={this.props.pathname}
+                        loadComponent={this.loadComponent}
+                        unloadComponent={this.unloadComponent}
+                        componentIndex={index}
+                        theToolbar={this.toolbarWindow}
+                        key={`personalToolsComponent-${index}`}
+                        closeMenu={this.closeMenu}
+                        hasActions={haveActions}
+                      >
+                        <ToolbarComponent
+                          pathname={this.props.pathname}
+                          loadComponent={this.loadComponent}
+                          unloadComponent={this.unloadComponent}
+                          componentIndex={index}
+                          theToolbar={this.toolbarWindow}
+                          closeMenu={this.closeMenu}
+                          isToolbarEmbedded
+                        />
+                      </WrapperComponent>
+                    );
+                  } else {
+                    return (
+                      <ToolbarComponent
+                        pathname={this.props.pathname}
+                        loadComponent={this.loadComponent}
+                        unloadComponent={this.unloadComponent}
+                        componentIndex={index}
+                        theToolbar={this.toolbarWindow}
+                        key={`personalToolsComponent-${index}`}
+                        closeMenu={this.closeMenu}
+                        content={
+                          toolbarComponents[component].contentAsProps
+                            ? this.props.content
+                            : null
+                        }
+                      />
+                    );
+                  }
+                })(),
+              )}
+            </div>
+          </div>
+          <div className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}>
+            <div className="toolbar-body">
+              <div className="toolbar-actions">
+                {this.props.hideDefaultViewButtons && this.props.inner && (
+                  <>{this.props.inner}</>
+                )}
+                {!this.props.hideDefaultViewButtons && (
+                  <>
+                    {unlockAction && (
+                      <button
+                        aria-label={this.props.intl.formatMessage(
+                          messages.unlock,
+                        )}
+                        className="unlock"
+                        onClick={(e) => this.unlock(e)}
+                        tabIndex={0}
+                      >
+                        <Icon
+                          name={unlockSVG}
+                          size="30px"
+                          className="unlock"
+                          title={this.props.intl.formatMessage(messages.unlock)}
+                        />
+                      </button>
+                    )}
+
+                    {editAction && (
+                      <Link
+                        aria-label={this.props.intl.formatMessage(
+                          messages.edit,
+                        )}
+                        className="edit"
+                        to={`${path}/edit`}
+                      >
+                        <Icon
+                          name={penSVG}
+                          size="30px"
+                          className="circled"
+                          title={this.props.intl.formatMessage(messages.edit)}
+                        />
+                      </Link>
+                    )}
+                    {this.props.content &&
+                      this.props.content.is_folderish &&
+                      folderContentsAction &&
+                      !this.props.pathname.endsWith('/contents') && (
+                        <Link
+                          aria-label={this.props.intl.formatMessage(
+                            messages.contents,
+                          )}
+                          to={`${path}/contents`}
+                        >
+                          <Icon
+                            name={folderSVG}
+                            size="30px"
+                            title={this.props.intl.formatMessage(
+                              messages.contents,
+                            )}
+                          />
+                        </Link>
+                      )}
+                    {this.props.content &&
+                      this.props.content.is_folderish &&
+                      folderContentsAction &&
+                      this.props.pathname.endsWith('/contents') && (
+                        <Link
+                          to={`${path}`}
+                          aria-label={this.props.intl.formatMessage(
+                            messages.back,
+                          )}
+                        >
+                          <Icon
+                            name={clearSVG}
+                            className="contents circled"
+                            size="30px"
+                            title={this.props.intl.formatMessage(messages.back)}
+                          />
+                        </Link>
+                      )}
+                    {this.props.content &&
+                      ((this.props.content.is_folderish &&
+                        this.props.types.length > 0) ||
+                        (config.settings.isMultilingual &&
+                          this.props.content['@components']?.translations)) && (
+                        <button
+                          className="add"
+                          aria-label={this.props.intl.formatMessage(
+                            messages.add,
+                          )}
+                          onClick={(e) => this.toggleMenu(e, 'types')}
+                          tabIndex={0}
+                          id="toolbar-add"
+                        >
+                          <Icon
+                            name={addSVG}
+                            size="30px"
+                            title={this.props.intl.formatMessage(messages.add)}
+                          />
+                        </button>
+                      )}
+                    <div className="toolbar-button-spacer" />
+                    <button
+                      className="more"
+                      aria-label={this.props.intl.formatMessage(messages.more)}
+                      onClick={(e) => this.toggleMenu(e, 'more')}
+                      tabIndex={0}
+                      id="toolbar-more"
+                    >
+                      <Icon
+                        className="mobile hidden"
+                        name={moreSVG}
+                        size="30px"
+                        title={this.props.intl.formatMessage(messages.more)}
+                      />
+                      {this.state.showMenu ? (
+                        <Icon
+                          className="mobile only"
+                          name={clearSVG}
+                          size="30px"
+                        />
+                      ) : (
+                        <Icon
+                          className="mobile only"
+                          name={moreSVG}
+                          size="30px"
+                        />
+                      )}
+                    </button>
+                  </>
+                )}
+              </div>
+              <div className="toolbar-bottom">
+                <Pluggable name="main.toolbar.bottom" />
+                {!this.props.hideDefaultViewButtons && (
+                  <button
+                    className="user"
+                    aria-label={this.props.intl.formatMessage(
+                      messages.personalTools,
+                    )}
+                    onClick={(e) => this.toggleMenu(e, 'personalTools')}
+                    tabIndex={0}
+                    id="toolbar-personal"
+                  >
+                    <Icon
+                      name={userSVG}
+                      size="30px"
+                      title={this.props.intl.formatMessage(
+                        messages.personalTools,
+                      )}
+                    />
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="toolbar-handler">
+              <button
+                aria-label={this.props.intl.formatMessage(
+                  messages.shrinkToolbar,
+                )}
+                className={cx({
+                  [this.props.content?.review_state]: this.props.content
+                    ?.review_state,
+                })}
+                onClick={this.handleShrink}
+              />
+            </div>
+          </div>
+          <div className="pusher" />
+        </>
+      )
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  withCookies,
+  connect(
+    (state, props) => ({
+      actions: state.actions.actions,
+      token: state.userSession.token,
+      userId: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
+      content: state.content.data,
+      pathname: props.pathname,
+      types: filter(state.types.types, 'addable'),
+      unlockRequest: state.content.unlock,
+    }),
+    { getTypes, listActions, setExpandedToolbar, unlockContent },
+  ),
+)(Toolbar);

package/src/index.js

@@ -2,6 +2,7 @@ import { runtimeConfig } from '@plone/volto/runtime_config';
 import installCallout from 'volto-slate/editor/plugins/Callout';
 import installItemBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Item';
 import customizeTeaserBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Teaser';
+import installContextNavigationBlock from '@eeacms/volto-eea-website-policy/components/Blocks/ContextNavigation';
 
 const applyConfig = (config) => {
   // if (process.env.NODE_ENV === 'production') {
@@ -99,10 +100,11 @@ const applyConfig = (config) => {
   }
 
   // Custom blocks
-  config = [installItemBlock, customizeTeaserBlock].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
+  config = [
+    installItemBlock,
+    installContextNavigationBlock,
+    customizeTeaserBlock,
+  ].reduce((acc, apply) => apply(acc), config);
   config.blocks.blocksConfig.item.mostUsed = true;
 
   // Disable some blocks