Add a sidebar toggle into the toolbar and close button into sidebar

packages/volto/locales/ca/LC_MESSAGES/volto.po

@@ -3404,6 +3404,11 @@ msgstr "Redueix la barra lateral"
 msgid "Shrink toolbar"
 msgstr "Redueix la barra d'eines"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/de/LC_MESSAGES/volto.po

@@ -3403,6 +3403,11 @@ msgstr "Sidebar verkleinern"
 msgid "Shrink toolbar"
 msgstr "Toolbar verkleinern"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/en/LC_MESSAGES/volto.po

@@ -3398,6 +3398,11 @@ msgstr ""
 msgid "Shrink toolbar"
 msgstr ""
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/es/LC_MESSAGES/volto.po

@@ -3405,6 +3405,11 @@ msgstr "Contraer barra lateral"
 msgid "Shrink toolbar"
 msgstr "Contraer barra de herramientas"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/eu/LC_MESSAGES/volto.po

@@ -3405,6 +3405,11 @@ msgstr "Txikitu alboko barra"
 msgid "Shrink toolbar"
 msgstr "Txikitu tresna-barra"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/fi/LC_MESSAGES/volto.po

@@ -3403,6 +3403,11 @@ msgstr "Kutista sivupalkki"
 msgid "Shrink toolbar"
 msgstr "Kutista työkalupalkki"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/fr/LC_MESSAGES/volto.po

@@ -3405,6 +3405,11 @@ msgstr "Rétrécir la barre latérale"
 msgid "Shrink toolbar"
 msgstr "Réduire la barre d'outils"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/hi/LC_MESSAGES/volto.po

@@ -3398,6 +3398,11 @@ msgstr "साइडबार को छोटा करें"
 msgid "Shrink toolbar"
 msgstr "टूलबार को छोटा करें"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/it/LC_MESSAGES/volto.po

@@ -3398,6 +3398,11 @@ msgstr "Riduci la sidebar"
 msgid "Shrink toolbar"
 msgstr "Riduci la toolbar"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/ja/LC_MESSAGES/volto.po

@@ -3403,6 +3403,11 @@ msgstr "サイドバーを閉じる"
 msgid "Shrink toolbar"
 msgstr "ツールバーを閉じる"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/nl/LC_MESSAGES/volto.po

@@ -3402,6 +3402,11 @@ msgstr ""
 msgid "Shrink toolbar"
 msgstr ""
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/pt/LC_MESSAGES/volto.po

@@ -3403,6 +3403,11 @@ msgstr "Encolher barra lateral"
 msgid "Shrink toolbar"
 msgstr ""
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/pt_BR/LC_MESSAGES/volto.po

@@ -3404,6 +3404,11 @@ msgstr "Recolher barra lateral"
 msgid "Shrink toolbar"
 msgstr "Recolher barra de ferramentas"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/ro/LC_MESSAGES/volto.po

@@ -3398,6 +3398,11 @@ msgstr "Reduceți bara laterală"
 msgid "Shrink toolbar"
 msgstr "Reduceti bara de instrumente"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/volto.pot

@@ -3400,6 +3400,11 @@ msgstr ""
 msgid "Shrink toolbar"
 msgstr ""
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/locales/zh_CN/LC_MESSAGES/volto.po

@@ -3404,6 +3404,11 @@ msgstr "缩小侧边栏"
 msgid "Shrink toolbar"
 msgstr "缩小工具栏"
 
+#. Default: "Sidebar expanded"
+#: components/manage/Form/SidebarToggleButton
+msgid "Sidebar expanded"
+msgstr ""
+
 #. Default: "Sign in to start session"
 #: components/theme/Login/Login
 msgid "Sign in to start session"

packages/volto/news/3912.feature

@@ -0,0 +1,2 @@
+Added a button to the toolbar to make it easier to show and hide the sidebar.
+@JeffersonBledsoe

packages/volto/src/actions/index.js

@@ -152,6 +152,7 @@ export {
 export { getQuerystring } from '@plone/volto/actions/querystring/querystring';
 export { getQueryStringResults } from '@plone/volto/actions/querystringsearch/querystringsearch';
 export {
+  setSidebarExpanded,
   setMetadataFieldsets,
   setMetadataFocus,
   resetMetadataFocus,

packages/volto/src/actions/sidebar/sidebar.js

@@ -7,6 +7,7 @@ import {
   SET_METADATA_FIELDSETS,
   SET_METADATA_FOCUS,
   RESET_METADATA_FOCUS,
+  SET_SIDEBAR_EXPANDED,
   SET_SIDEBAR_TAB,
 } from '@plone/volto/constants/ActionTypes';
 
@@ -61,3 +62,10 @@ export function setSidebarTab(index) {
     index,
   };
 }
+
+export function setSidebarExpanded(isExpanded) {
+  return {
+    type: SET_SIDEBAR_EXPANDED,
+    isExpanded,
+  };
+}

packages/volto/src/components/manage/Form/Form.jsx

@@ -6,6 +6,7 @@
 import { Icon, Toast } from '@plone/volto/components';
 import { Field, BlocksForm } from '@plone/volto/components/manage/Form';
 import BlocksToolbar from '@plone/volto/components/manage/Form/BlocksToolbar';
+import { SidebarToggleButton } from '@plone/volto/components/manage/Form/SidebarToggleButton';
 import UndoToolbar from '@plone/volto/components/manage/Form/UndoToolbar';
 import {
   difference,
@@ -758,6 +759,10 @@ class Form extends Component {
                 }
                 onSelectBlock={this.onSelectBlock}
               />
+              {config.experimental.sidebarToggleButton?.position ===
+              'toolbar' ? (
+                <SidebarToggleButton />
+              ) : null}
               <UndoToolbar
                 state={{
                   formData,

packages/volto/src/components/manage/Form/SidebarToggleButton.jsx

@@ -0,0 +1,54 @@
+import cx from 'classnames';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { setSidebarExpanded } from '@plone/volto/actions';
+import { Icon } from '@plone/volto/components';
+import { Plug } from '@plone/volto/components/manage/Pluggable';
+import configSVG from '@plone/volto/icons/configuration.svg';
+import { Button } from 'semantic-ui-react';
+
+const messages = defineMessages({
+  sidebarExpanded: {
+    id: 'Sidebar expanded',
+    defaultMessage: 'Sidebar expanded',
+  },
+});
+
+export const SidebarToggleButton = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const sidebarExpanded = useSelector(
+    (state) => state.sidebar.expanded ?? true,
+  );
+
+  return (
+    <Plug
+      pluggable="main.toolbar.bottom"
+      id="sidebar-toggle-button"
+      dependencies={[sidebarExpanded]}
+      order={-1}
+    >
+      <Button
+        className={cx('settings', {
+          'sidebar-expanded': sidebarExpanded,
+        })}
+        // TODO: The below should set `aria-pressed`, but it doesn't for some reason :(
+        active={sidebarExpanded}
+        aria-label={intl.formatMessage(messages.sidebarExpanded)}
+        aria-expanded={sidebarExpanded}
+        aria-controls="sidebar"
+        onClick={() => {
+          dispatch(setSidebarExpanded(!sidebarExpanded));
+        }}
+      >
+        <div aria-hidden="true" focusable="false">
+          <Icon name={configSVG} />
+        </div>
+      </Button>
+    </Plug>
+  );
+};
+
+export default SidebarToggleButton;

packages/volto/src/components/manage/Sidebar/Sidebar.jsx

@@ -1,15 +1,18 @@
-import React, { useState, Fragment, useCallback } from 'react';
+import { setSidebarExpanded, setSidebarTab } from '@plone/volto/actions';
+import { Icon } from '@plone/volto/components';
+import { BodyClass, getCookieOptions } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { Button, Tab } from 'semantic-ui-react';
-import { useDispatch, useSelector } from 'react-redux';
-import { compose } from 'redux';
+import { Fragment, useCallback, useState } from 'react';
 import { withCookies } from 'react-cookie';
 import { defineMessages, useIntl } from 'react-intl';
-import cx from 'classnames';
-import { BodyClass, getCookieOptions } from '@plone/volto/helpers';
-import { Icon } from '@plone/volto/components';
+import { useDispatch, useSelector } from 'react-redux';
+import { compose } from 'redux';
+import { Button, Tab } from 'semantic-ui-react';
+
+import clearSVG from '@plone/volto/icons/clear.svg';
 import forbiddenSVG from '@plone/volto/icons/forbidden.svg';
-import { setSidebarTab } from '@plone/volto/actions';
 import expandSVG from '@plone/volto/icons/left-key.svg';
 import collapseSVG from '@plone/volto/icons/right-key.svg';
 
@@ -51,9 +54,8 @@ const Sidebar = (props) => {
     settingsTab,
     orderTab = true,
   } = props;
-  const [expanded, setExpanded] = useState(
-    cookies.get('sidebar_expanded') !== 'false',
-  );
+  const expanded = useSelector((state) => state.sidebar.expanded ?? true);
+
   const [size] = useState(0);
   const [showFull, setshowFull] = useState(true);
 
@@ -63,7 +65,7 @@ const Sidebar = (props) => {
 
   const onToggleExpanded = () => {
     cookies.set('sidebar_expanded', !expanded, getCookieOptions());
-    setExpanded(!expanded);
+    dispatch(setSidebarExpanded(!expanded));
     resetFullSizeSidebar();
   };
 
@@ -111,19 +113,23 @@ const Sidebar = (props) => {
         className={cx('sidebar-container', { collapsed: !expanded })}
         style={size > 0 ? { width: size } : null}
       >
-        <Button
-          aria-label={
-            expanded
-              ? intl.formatMessage(messages.shrinkSidebar)
-              : intl.formatMessage(messages.expandSidebar)
-          }
-          className={
-            content && content.review_state
-              ? `${content.review_state} trigger`
-              : 'trigger'
-          }
-          onClick={onToggleExpanded}
-        />
+        {['toolbar', 'floating'].includes(
+          config.experimental.sidebarToggleButton?.position,
+        ) ? null : (
+          <Button
+            aria-label={
+              expanded
+                ? intl.formatMessage(messages.shrinkSidebar)
+                : intl.formatMessage(messages.expandSidebar)
+            }
+            className={
+              content && content.review_state
+                ? `${content.review_state} trigger`
+                : 'trigger'
+            }
+            onClick={onToggleExpanded}
+          />
+        )}
         <Button
           className="full-size-sidenav-btn"
           onClick={onToggleFullSize}
@@ -134,6 +140,16 @@ const Sidebar = (props) => {
             name={showFull ? expandSVG : collapseSVG}
           />
         </Button>
+        {config.experimental.sidebarCloseButton ||
+        config.experimental.sidebarToggleButton?.position ? (
+          <Button
+            className="close-sidenav-btn"
+            aria-label={intl.formatMessage(messages.shrinkSidebar)}
+            onClick={onToggleExpanded}
+          >
+            <Icon name={clearSVG} size="26px" />
+          </Button>
+        ) : null}
         <Tab
           menu={{
             secondary: true,