@eeacms/volto-eea-website-theme 0.6.13 → 0.6.16

package/CHANGELOG.md

@@ -4,9 +4,36 @@ 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.6.16](https://github.com/eea/volto-eea-website-theme/compare/0.6.15...0.6.16)
+
+- Nonapi breadcrumbs [`#48`](https://github.com/eea/volto-eea-website-theme/pull/48)
+- Make Breadcrumbs behave better with non-content routes [`9407840`](https://github.com/eea/volto-eea-website-theme/commit/94078403458a5a3ea725ce9126fffed9d463097d)
+- change(megamenu): add border for active element of menu [`252efc4`](https://github.com/eea/volto-eea-website-theme/commit/252efc4485961c8d05e3703fee06179a0fdc8da3)
+- change(footer): tweaked size of eionet logo to follow size of eea logo [`fcfa8ee`](https://github.com/eea/volto-eea-website-theme/commit/fcfa8ee00cffbc147eefa0f614b366c94f30945d)
+- feature(theme): added context navigation component [`083b1c2`](https://github.com/eea/volto-eea-website-theme/commit/083b1c272623c720ebfeb4338e59c2cefcb29ecc)
+
+#### [0.6.15](https://github.com/eea/volto-eea-website-theme/compare/0.6.14...0.6.15)
+
+> 1 July 2022
+
+- Release [`#47`](https://github.com/eea/volto-eea-website-theme/pull/47)
+- Moved customized Toolbar to volto-eea-website-policy [`403b06d`](https://github.com/eea/volto-eea-website-theme/commit/403b06dd1225f4f15883d938d47facfe730a3699)
+- change(logo): use a real svg logo for white eea logo [`e2703af`](https://github.com/eea/volto-eea-website-theme/commit/e2703af2bf3779ad3aa21fa673fa5652691a9f25)
+
+#### [0.6.14](https://github.com/eea/volto-eea-website-theme/compare/0.6.13...0.6.14)
+
+> 30 June 2022
+
+- develop [`#46`](https://github.com/eea/volto-eea-website-theme/pull/46)
+- change(header): show eea information systems on mobile [`abdf181`](https://github.com/eea/volto-eea-website-theme/commit/abdf1819465ba1ca582c2a2d82ec02a137c0cf7f)
+- change(pageheader): share dropdown appears below the share icon [`10aaafc`](https://github.com/eea/volto-eea-website-theme/commit/10aaafc79d03784972b7cf40639077246340eda9)
+- change(pageheader): removed blogger, reddit and stumbleupon sharing links [`0f7d887`](https://github.com/eea/volto-eea-website-theme/commit/0f7d88700076704abb04ba1bf806ab669fe085be)
+
 #### [0.6.13](https://github.com/eea/volto-eea-website-theme/compare/0.6.12...0.6.13)
 
-- Fix double header issue - refs #151713 [`3151229`](https://github.com/eea/volto-eea-website-theme/commit/3151229d27193d6b4a4355419c924d2ddd538e71)
+> 23 June 2022
+
+- Fix double header issue - refs #151713 [`#45`](https://github.com/eea/volto-eea-website-theme/pull/45)
 - Customize EventView - copied unchanged from @plone/volto 16.0.0-alpha.7 [`346fc87`](https://github.com/eea/volto-eea-website-theme/commit/346fc87c0834627efa70ed1303c5ee98a5a17ae2)
 
 #### [0.6.12](https://github.com/eea/volto-eea-website-theme/compare/0.6.11...0.6.12)

package/package.json

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

package/src/components/theme/Banner/View.jsx

@@ -161,18 +161,10 @@ const View = (props) => {
                                 sharePage(metadata['@id'], 'linkedin');
                               }}
                             />
-                            <Banner.Action icon="blogger b" />
-                            <Banner.Action
-                              icon="ri-reddit-line"
-                              onClick={() => {
-                                sharePage(metadata['@id'], 'reddit');
-                              }}
-                            />
-                            <Banner.Action icon="stumbleupon circle" />
                           </div>
                         </>
                       )}
-                      position="top center"
+                      position="bottom center"
                       size="small"
                       trigger={
                         <Banner.Action

package/src/config.js

@@ -8,7 +8,7 @@ import copernicusLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/
 import industryLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/industry.svg';
 import marineLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/marine.svg';
 import eionetLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eionet.svg';
-import eeaLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea.svg';
+import eeaLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-white.svg';
 import climateLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/climate-health.svg';
 
 // TODO: to be consolidated with headerLinks
@@ -108,7 +108,7 @@ export const footerOpts = {
       columnSize: {
         mobile: 6,
         tablet: 12,
-        computer: 7,
+        computer: 6,
       },
     },
   ],

package/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -6,14 +6,35 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useLocation } from 'react-router';
 import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 import { getBreadcrumbs } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
+
 import EEABreadcrumbs from '@eeacms/volto-eea-design-system/ui/Breadcrumbs/Breadcrumbs';
 
+const isContentRoute = (pathname) => {
+  const { settings } = config;
+  const normalized_nonContentRoutes = settings.nonContentRoutes.map((item) => {
+    if (item.test) {
+      return item;
+    } else {
+      return new RegExp(item + '$');
+    }
+  });
+
+  const isNonContentRoute =
+    normalized_nonContentRoutes.findIndex((item) => item.test(pathname)) > -1;
+
+  return !isNonContentRoute;
+};
+
 const Breadcrumbs = (props) => {
   const dispatch = useDispatch();
   const { items = [], root = '/' } = useSelector((state) => state?.breadcrumbs);
-  const { pathname } = props;
+  // const pathname = useSelector((state) => state.location.pathname);
+  const location = useLocation();
+  const { pathname } = location;
 
   const sections = items.map((item) => ({
     title: item.title,
@@ -22,7 +43,10 @@ const Breadcrumbs = (props) => {
   }));
 
   useEffect(() => {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+    if (
+      !hasApiExpander('breadcrumbs', getBaseUrl(pathname)) &&
+      isContentRoute(pathname)
+    ) {
       dispatch(getBreadcrumbs(getBaseUrl(pathname)));
     }
   }, [dispatch, pathname]);

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -18,7 +18,7 @@ import { getNavigation } from '@plone/volto/actions';
 import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
 import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
 import { find } from 'lodash';
-import WhiteLogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea.svg';
+import WhiteLogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-white.svg';
 import LogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea-logo.svg';
 import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
@@ -27,6 +27,8 @@ import config from '@plone/volto/registry';
 import { compose } from 'recompose';
 import { BodyClass } from '@plone/volto/helpers';
 
+import cx from 'classnames';
+
 /**
  * EEA Specific Header component.
  */
@@ -83,7 +85,7 @@ const EEAHeader = ({ pathname, token, items, history }) => {
           <Image src={eeaFlag} alt="eea flag"></Image>
           <Header.TopDropdownMenu
             text="An official website of the European Union | How do you Know?"
-            mobileText="An official EU website"
+            mobileText=" "
             icon="chevron down"
             aria-label="dropdown"
             className=""
@@ -110,7 +112,6 @@ const EEAHeader = ({ pathname, token, items, history }) => {
         <Header.TopItem>
           <Header.TopDropdownMenu
             id="theme-sites"
-            className="tablet or lower hidden"
             text={eea.globalHeaderPartnerLinks.title}
             viewportWidth={width}
           >
@@ -193,9 +194,17 @@ const EEAHeader = ({ pathname, token, items, history }) => {
             {item.title}
           </a>
         )}
-        renderMenuItem={(item) => (
-          <UniversalLink href={item.url || '/'} title={item.title}>
-            <span className={'item'}>{item.title}</span>
+        renderMenuItem={(item, options, props) => (
+          <UniversalLink
+            href={item.url || '/'}
+            title={item.title}
+            {...(options || {})}
+            className={cx(options?.className, {
+              active: item.url === router_pathname,
+            })}
+          >
+            {props?.children}
+            <span>{item.title}</span>
           </UniversalLink>
         )}
       ></Header.Main>

package/theme/theme.config

@@ -86,6 +86,7 @@
 @tag              : 'eea';
 @tags             : 'eea';
 @tagList          : 'eea';
+@contextNavigation : 'eea';
 @inpageNavigation : 'eea';
 @avatar           : 'eea';
 @divider          : 'eea';

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

@@ -1,589 +0,0 @@
-/**
- * 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);