在 Antd React App 中重新创建类似 Sider/Drawer 的 Ant Design Pro答案

【问题标题】：Recreate Ant Design Pro like Sider/Drawer in Antd React App在 Antd React App 中重新创建类似 Sider/Drawer 的 Ant Design Pro
【发布时间】：2020-10-11 15:55:38
【问题描述】：

我正在尝试将我的 Antd React 应用程序的样式/css 配置为移动设备。

我的主菜单使用 here 所见的反应式侧边菜单。

我的问题是，当我使用移动视口查看时，它有点难看，并且会挤压菜单之外的所有内容。扩展/压缩菜单的小标签涵盖了我的其他一些组件。

我更喜欢他们在 Ant Design Pro 演示中的设计。

但我不确定如何准确地创建它。有没有人尝试过？它似乎在移动视口中使用 Drawer，而不是在 Layout API 中使用 Sider。

【问题讨论】：

标签： reactjs antd ant-design-pro

【解决方案1】：

想通了。

基本上我的解决方案（不确定这是否是他们在 Ant Design Pro 中实际所做的）是在桌面上使用 Reactive Sider Menu 示例，在移动设备上使用 Drawer。

Reactive Sider Menu 示例中的相同切换按钮可以隐藏/关闭 Sider（在桌面）和 Drawer（在移动设备中）。

诀窍是使用 CSS 媒体查询在桌面中隐藏抽屉并在移动设备中隐藏边栏，这样每个人都可以做自己的事情。

CSS

.hideOnMobile {
  display: none;
}
@media only screen and (min-width: 768px) {
  .hideOnMobile {
    display: block;
  }
}

.hideOnDesktop {
  display: block;
}
@media only screen and (min-width: 768px) {
  .hideOnDesktop {
    display: none;
  }
}

App.js

const App = () => {
  // sider and drawer toggle
  const [isToggled, setToggled] = useState(false);
  const toggleTrueFalse = () => setToggled(!isToggled);
  const onClose = () => {
    setToggled(false);
  };

  return (
            <Layout style={{ minHeight: "100vh" }}>
              <Drawer
                placement="left"
                onClose={onClose}
                closable={false}
                visible={isToggled}
                className="hideOnDesktop"
                bodyStyle={{ backgroundColor: "#001529", padding: "0" }}
              >
                <Navbar />
              </Drawer>
              <Sider
                breakpoint="lg"
                collapsedWidth="0"
                collapsed={isToggled}
                onBreakpoint={(broken) => {
                  setToggled(broken);
                }}
                className="hideOnMobile"
              >
                <Navbar />
              </Sider>
              <Layout className="site-layout">
                <Header
                  className="site-layout-background"
                  style={{ padding: 0 }}
                >
                  <Row>
                    {React.createElement(
                      isToggled ? MenuUnfoldOutlined : MenuFoldOutlined,
                      {
                        className: "trigger",
                        onClick: toggleTrueFalse,
                      }
                    )}
                    <TopNavbar />
                  </Row>
                </Header> 
...

此外，根据 Drawer 组件的 Antd 文档，您可以使用 bodyStyle 属性设置背景颜色并移除填充，以便菜单与 Drawer 的两侧齐平。

【讨论】：