How to start with left menu collapsed

Question

Is there an easy was to start with the left menu collapsed or do I need to update the layout ? I'd like to have the menu collapsed by default with only the icons visible. Thank you.

Plainsong

Have you tried anything? – Recipient

Answer 1

If you mean Sidebar when saying "left menu", you can hide it by turning on the user saga (the toggle action will continue to work):

// closeSidebarSaga.js

import {
  put,
  takeEvery,
} from 'redux-saga/effects'

import {
  REGISTER_RESOURCE, // React-admin 3.5.0 
  setSidebarVisibility,
} from 'react-admin'

function* closeSidebar(action) {
  try {
    if (action.payload) {
      yield put(setSidebarVisibility(false))
    }
  } catch (error) {
    console.log('closeSidebar:', error)
  }
}

function* closeSidebarSaga() {
  yield takeEvery(REGISTER_RESOURCE, closeSidebar) 
}

export default closeSidebarSaga

// App.js:

import closeSidebarSaga from './closeSidebarSaga'

<Admin customSagas={[ closeSidebarSaga ]} ... }>
...
</Admin>

In the react-admin library itself, apparently a bug, at some point in time after the login, action SET_SIDEBAR_VISIBILITY = true is called!

Imprisonment

Works fine. Thank you. – Plainsong

@Imprisonment How do you activate it? I'm not familiar with sagas. I tried calling it when App.js mounts, but I can't see any change. – Upshot

The react-admin has a special opportunity to connect: marmelab.com/react-admin/Admin.html#customsagas – Imprisonment

It does not work for me anymore. It used to work, but I realized just now that it does not work anymore. I am not sure exactly when it stopped working as i just upgraded to react-admin 3.5.0 and I also implemented MSAL authentication which may be affecting it. Any idea? – Solley

Hello, in version react-admin 3.5.0 removed "dispactch action setSidebarVisibility(true)" and now this solution will not work: github.com/marmelab/react-admin/pull/4677/files/… – Imprisonment

Alternatively you can bind to any other event when the application starts: "yield takeEvery(REGISTER_RESOURCE, closeSidebar)" – Imprisonment

Answer 2

You can set the initial state when loading Admin, then there will be no moment when the Sidebar is visible at the beginning, and then it is hidden: https://marmelab.com/react-admin/Admin.html#initialstate

const initialState = {
  admin: { ui: { sidebarOpen: false, viewVersion: 0 } }
}    

<Admin
  initialState={initialState}
  ...
</Admin>

Imprisonment

hey MaxAlex, this is neat - but are these (and others) state values defined anywhere? The official documentation merely acknowledges the existence of the initialState prop. I'm looking to fix the sideBar in position, so it never scrolls off the screen, and poking around looking for a solution. thanks – Upside

Hi, Andy, I didn't see this in the official documentation, the contents of Redux-state can be viewed through dev-tools in the browser. Perhaps to do this, you need to redefine the CSS for the Sidebar component. – Imprisonment

Answer 3

To hide the left sideBar divider we need to dispatch setSidebarVisibility action .

This is an example to hide the sideBar by using useDispatch react-redux hook & setSidebarVisibility action inside the layout file (layout.tsx):

import React from 'react';

/**
* Step 1/2 :Import required hooks (useEffect & useDispatch)
*/ 
import { useEffect } from 'react';
import { useSelector,useDispatch } from 'react-redux';

import { Layout, Sidebar ,setSidebarVisibility} from 'react-admin';
import AppBar from './AppBar';
import Menu from './Menu';
import { darkTheme, lightTheme } from './themes';
import { AppState } from '../types';

const CustomSidebar = (props: any) => <Sidebar {...props} size={200} />;

export default (props: any) => {
    const theme = useSelector((state: AppState) =>
        state.theme === 'dark' ? darkTheme : lightTheme
    );

    /**
    * Step 2/2 : dispatch setSidebarVisibility action
    */
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(setSidebarVisibility(false));
    });

    return (
        <Layout
            {...props}
            appBar={AppBar}
            sidebar={CustomSidebar}
            menu={Menu}
            theme={theme}
        />
    );
};

Springe

Answer 4

Since Redux is not used anymore by ReactAdmin, you need to adapt the local storage instead to hide the sidebar. Call this in your App.tsx class:

const store = localStorageStore();
store.setItem("sidebar.open", false);

Effulgent