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

【问题标题】：How to start with left menu collapsed如何从折叠的左侧菜单开始
【发布时间】：2019-11-14 09:33:26
【问题描述】：

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

【问题讨论】：

你有没有尝试过？

【解决方案1】：

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

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

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

【讨论】：

嘿 MaxAlex，这很简洁 - 但是这些（和其他）状态值是否在任何地方定义？官方文档仅承认 initialState 属性的存在。我正在寻找将侧边栏固定到位，因此它永远不会滚动到屏幕外，并四处寻找解决方案。谢谢
嗨，Andy，我在官方文档中没有看到这个，可以通过浏览器中的dev-tools查看Redux-state的内容。也许要做到这一点，您需要重新定义侧边栏组件的 CSS。

【解决方案2】：

要隐藏左侧边栏分隔线，我们需要调度 setSidebarVisibility 动作。

这是一个使用 useDispatch react-redux hook & 隐藏侧边栏的示例布局文件 (layout.tsx) 中的 setSidebarVisibility 操作：

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}
        />
    );
};

【讨论】：

【解决方案3】：

如果您在说“左侧菜单”时指的是侧边栏，您可以通过打开用户传奇来隐藏它（切换操作将继续起作用）：

// 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 库本身中，显然是一个错误，在登录后的某个时间点，调用了 action SET_SIDEBAR_VISIBILITY = true！

【讨论】：

工作正常。谢谢。
@MaxAlex 你如何激活它？我对传奇不熟悉。我尝试在 App.js 挂载时调用它，但看不到任何变化。
react-admin 有一个特殊的联系机会：marmelab.com/react-admin/Admin.html#customsagas
它不再适合我了。它曾经有效，但我现在才意识到它不再有效。我不确定它何时停止工作，因为我刚刚升级到 react-admin 3.5.0，并且我还实施了可能会影响它的 MSAL 身份验证。有什么想法吗？
您好，在 react-admin 3.5.0 版本中删除了“dispactch action setSidebarVisibility(true)”，现在这个解决方案将不起作用：github.com/marmelab/react-admin/pull/4677/files/…