如何从折叠的左侧菜单开始

Question

是否有一种简单的方法是从折叠的左侧菜单开始，或者我是否需要更新布局？我想让菜单默认折叠起来，只有图标可见。谢谢。

Answer 1

如果你在说 "left menu" 时指的是边栏，你可以通过打开用户传奇来隐藏它（切换操作将继续有效）：

// 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>

在react-admin库本身中，显然是一个错误，在登录后的某个时间点，调用了操作SET_SIDEBAR_VISIBILITY = true！

Answer 2

要隐藏左侧的 sideBar 分隔符，我们需要调度 setSidebarVisibility 操作。

这是一个使用 useDispatch react-redux hook 隐藏侧边栏的例子 & 布局文件中的setSidebarVisibility动作(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}
        />
    );
};

Answer 3

可以在加载Admin的时候设置初始状态，这样就不会出现Sidebar一开始可见的瞬间，然后隐藏： https://marmelab.com/react-admin/Admin.html#initialstate

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

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

如何从折叠的左侧菜单开始

How to start with left menu collapsed

react-admin