Recreate Ant Design Pro like Sider/Drawer in Antd React App

user_8834912 0
Viewed 3342

I'm trying to configure the style/css of my Antd React app to be mobile ready.

My main menu uses the Reactive Sider Menu seen here.

My issue is when I'm viewing with a mobile viewport it's kinda ugly and it squashes everything outside of the menu. And the little tab to expand/condense the menu covers some of my other components.

Menu

I'd much prefer the design that they have in the Ant Design Pro demo.

Antdpro

But I'm not sure how to create this exactly. Has anyone attempted it before? It seems to use a Drawer when it's in a mobile viewport as opposed to using the Sider in the Layout API.

ant-design-pro antd reactjs
1 Answers

Figured this out.

Essentially my solution (not sure if this is what they actually did in Ant Design Pro) is to use the Reactive Sider Menu example for the desktop and use a Drawer for mobile.

The same Toggle button in the Reactive Sider Menu example can hide/close the Sider (in Desktop) and Drawer (in mobile).

The trick was using CSS Media Queries to hide the Drawer in Desktop and hide the Sider in mobile so each could do their thing.

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

Also per the Antd docs for the Drawer component you can use the bodyStyle prop to set the background color and remove the padding so the menu sits flush to the sides of the Drawer.

user_88349120
Related