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

src/actions/index.js

@@ -142,7 +142,10 @@ export {
 } from '@plone/volto/actions/workflow/workflow';
 export { getQuerystring } from '@plone/volto/actions/querystring/querystring';
 export { getQueryStringResults } from '@plone/volto/actions/querystringsearch/querystringsearch';
-export { setSidebarTab } from '@plone/volto/actions/sidebar/sidebar';
+export {
+  setSidebarExpanded,
+  setSidebarTab,
+} from '@plone/volto/actions/sidebar/sidebar';
 export {
   deleteLinkTranslation,
   getTranslationLocator,

src/actions/sidebar/sidebar.js

@@ -3,7 +3,10 @@
  * @module actions/sidebar/sidebar
  */
 
-import { SET_SIDEBAR_TAB } from '@plone/volto/constants/ActionTypes';
+import {
+  SET_SIDEBAR_EXPANDED,
+  SET_SIDEBAR_TAB,
+} from '@plone/volto/constants/ActionTypes';
 
 /**
  * Set sidebar tab function.
@@ -17,3 +20,10 @@ export function setSidebarTab(index) {
     index,
   };
 }
+
+export function setSidebarExpanded(isExpanded) {
+  return {
+    type: SET_SIDEBAR_EXPANDED,
+    isExpanded,
+  };
+}

src/components/manage/Add/Add.jsx

@@ -16,7 +16,7 @@
 import qs from 'query-string';
 import { toast } from 'react-toastify';
 
-import { createContent, getSchema, changeLanguage } from '@plone/volto/actions';
+import { changeLanguage, createContent, getSchema } from '@plone/volto/actions';
 import {
   Form,
   Icon,
@@ -42,6 +42,7 @@
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import configSVG from '@plone/volto/icons/configuration.svg';
 
 const messages = defineMessages({
   add: {

src/components/manage/Edit/Edit.jsx

@@ -15,6 +15,7 @@
 import qs from 'query-string';
 import { find } from 'lodash';
 import { toast } from 'react-toastify';
+import cx from 'classnames';
 
 import {
   Forbidden,
@@ -40,6 +41,7 @@
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import configSVG from '@plone/volto/icons/configuration.svg';
 
 import config from '@plone/volto/registry';
 

src/components/manage/Form/Form.jsx

@@ -40,6 +40,7 @@ import {
 import { v4 as uuid } from 'uuid';
 import { toast } from 'react-toastify';
 import { BlocksToolbar, UndoToolbar } from '@plone/volto/components';
+import { SidebarToggleButton } from '@plone/volto/components/manage/Form/SidebarToggleButton';
 import { setSidebarTab } from '@plone/volto/actions';
 import { compose } from 'redux';
 import config from '@plone/volto/registry';
@@ -560,6 +561,7 @@ class Form extends Component {
             }
             onSelectBlock={this.onSelectBlock}
           />
+          <SidebarToggleButton />
           <UndoToolbar
             state={{
               formData: this.state.formData,

src/components/manage/Form/SidebarToggleButton.jsx

@@ -0,0 +1,59 @@
+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({
+  shrinkSidebar: {
+    id: 'Shrink sidebar',
+    defaultMessage: 'Shrink sidebar',
+  },
+  expandSidebar: {
+    id: 'Expand sidebar',
+    defaultMessage: 'Expand sidebar',
+  },
+});
+
+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]}
+    >
+      <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={
+          sidebarExpanded
+            ? intl.formatMessage(messages.shrinkSidebar)
+            : intl.formatMessage(messages.expandSidebar)
+        }
+        onClick={() => {
+          dispatch(setSidebarExpanded(!sidebarExpanded));
+        }}
+      >
+        <div aria-hidden="true" focusable="false">
+          <Icon name={configSVG} />
+        </div>
+      </Button>
+    </Plug>
+  );
+};
+
+export default SidebarToggleButton;

src/components/manage/Sidebar/Sidebar.jsx

@@ -14,8 +14,9 @@
 import { BodyClass, getCookieOptions } from '@plone/volto/helpers';
 import { Icon } from '@plone/volto/components';
 import forbiddenSVG from '@plone/volto/icons/forbidden.svg';
-import { setSidebarTab } from '@plone/volto/actions';
+import { setSidebarExpanded, setSidebarTab } from '@plone/volto/actions';
 import expandSVG from '@plone/volto/icons/left-key.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
 import collapseSVG from '@plone/volto/icons/right-key.svg';
 
 const messages = defineMessages({
@@ -77,30 +78,35 @@
    */
   constructor(props) {
     super(props);
     const { cookies } = props;
     this.onToggleExpanded = this.onToggleExpanded.bind(this);
     this.onToggleFullSize = this.onToggleFullSize.bind(this);
     this.onTabChange = this.onTabChange.bind(this);
     this.state = {
-      expanded: cookies.get('sidebar_expanded') !== 'false',
       size: 0,
       showFull: true,
-      showFullToolbarExpanded: true,
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.sidebarExpanded !== prevProps.sidebarExpanded) {
+      const { cookies } = this.props;
+      cookies.set(
+        'sidebar_expanded',
+        this.props.sidebarExpanded,
+        getCookieOptions(),
+      );
+    }
+  }
+
   /**
    * On toggle expanded handler
    * also reset sidebar since this has mimized it
    * @method onToggleExpanded
    * @returns {undefined}
    */
   onToggleExpanded() {
-    const { cookies } = this.props;
-    cookies.set('sidebar_expanded', !this.state.expanded, getCookieOptions());
-    this.setState({
-      expanded: !this.state.expanded,
-    });
+    this.props.setSidebarExpanded(!this.props.sidebarExpanded);
     this.resetFullSizeSidebar();
   }
 
@@ -109,7 +115,7 @@
    * Reset state
    */
   resetFullSizeSidebar() {
-    if (!this.state.expanded) {
+    if (!this.props.sidebarExpanded) {
       const currentResizer = document.querySelector('#sidebar');
       const sidebarContainer = currentResizer.getElementsByClassName(
         'sidebar-container',
@@ -168,7 +174,7 @@
    * @returns {string} Markup for the component.
    */
   render() {
-    const { expanded } = this.state;
+    const expanded = this.props.sidebarExpanded ?? true;
 
     return (
       <Fragment>
@@ -202,6 +208,13 @@
               name={this.state.showFull ? expandSVG : collapseSVG}
             />
           </Button>
+          <Button
+            className="close-sidenav-btn"
+            aria-label={this.props.intl.formatMessage(messages.shrinkSidebar)}
+            onClick={this.onToggleExpanded}
+          >
+            <Icon name={clearSVG} />
+          </Button>
           <Tab
             menu={{
               secondary: true,
@@ -262,7 +275,7 @@
             ].filter((tab) => tab)}
           />
         </div>
-        <div className={this.state.expanded ? 'pusher expanded' : 'pusher'} />
+        <div className={expanded ? 'pusher expanded' : 'pusher'} />
       </Fragment>
     );
   }
@@ -274,9 +287,10 @@
   connect(
     (state) => ({
       tab: state.sidebar.tab,
+      sidebarExpanded: state.sidebar.expanded,
       toolbarExpanded: state.toolbar.expanded,
       type: state.schema?.schema?.title,
     }),
-    { setSidebarTab },
+    { setSidebarTab, setSidebarExpanded },
   ),
 )(Sidebar);

src/components/manage/Sidebar/__snapshots__/Sidebar.test.jsx.snap

@@ -35,6 +35,30 @@ Array [
         xmlns=""
       />
     </button>
+    <button
+      aria-label="Shrink sidebar"
+      className="ui button close-sidenav-btn"
+      onClick={[Function]}
+    >
+      <svg
+        className="icon"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": undefined,
+          }
+        }
+        onClick={null}
+        style={
+          Object {
+            "fill": "currentColor",
+            "height": "36px",
+            "width": "auto",
+          }
+        }
+        viewBox=""
+        xmlns=""
+      />
+    </button>
     <div
       className="tabs-wrapper"
     >

src/constants/ActionTypes.js

@@ -76,6 +76,7 @@ export const RESET_PASSWORD = 'RESET_PASSWORD';
 export const REVERT_HISTORY = 'REVERT_HISTORY';
 export const REVERT_TRANSACTIONS = 'REVERT_TRANSACTIONS';
 export const SEARCH_CONTENT = 'SEARCH_CONTENT';
+export const SET_SIDEBAR_EXPANDED = 'SET_SIDEBAR_EXPANDED';
 export const SET_SIDEBAR_TAB = 'SET_SIDEBAR_TAB';
 export const TRANSITION_WORKFLOW = 'TRANSITION_WORKFLOW';
 export const UNINSTALL_ADDON = 'UNINSTALL_ADDON';

src/reducers/sidebar/sidebar.js

@@ -3,7 +3,10 @@
  * @module reducers/sidebar/sidebar
  */
 
-import { SET_SIDEBAR_TAB } from '@plone/volto/constants/ActionTypes';
+import {
+  SET_SIDEBAR_EXPANDED,
+  SET_SIDEBAR_TAB,
+} from '@plone/volto/constants/ActionTypes';
 
 const initialState = {
   tab: 0,
@@ -23,6 +26,11 @@ export default function sidebar(state = initialState, action = {}) {
         ...state,
         tab: action.index,
       };
+    case SET_SIDEBAR_EXPANDED:
+      return {
+        ...state,
+        expanded: action.isExpanded,
+      };
     default:
       return state;
   }

theme/themes/pastanaga/extras/sidebar.less

@@ -74,6 +74,24 @@
   color: #bac5c7;
 }
 
+.ui.button.close-sidenav-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 12px;
+  background: transparent;
+  margin: 0;
+
+  & svg {
+    height: @fullSizeIcon;
+    // Below attributes needed to stop the excess margin
+    width: 100% !important;
+    vertical-align: top !important;
+    margin: 0 !important;
+  }
+}
+
+
 .sidebar-container {
   position: fixed;
   z-index: 150;