fix: fix menu layout bug on mobile

yezihaohao · Sep 6, 2020 · 378e02f · 378e02f
1 parent e89c0fc
commit 378e02f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,6 +8,7 @@ import HeaderCustom from './components/HeaderCustom';
 import { ThemePicker, Copyright } from './components/widget';
 import { checkLogin } from './utils';
 import { fetchMenu } from './service';
+import classNames from 'classnames';
 
 const { Content, Footer } = Layout;
 
@@ -116,7 +117,9 @@ const App = (props: AppProps) => {
                 <SiderCustom collapsed={collapsed} />
             )}
             <ThemePicker />
-            <Layout className="app_layout">
+            <Layout
+                className={classNames('app_layout', { 'app_layout-mobile': responsive.isMobile })}
+            >
                 <HeaderCustom toggle={toggle} collapsed={collapsed} user={auth || {}} />
                 <Content className="app_layout_content">
                     <Routes auth={auth} />

diff --git a/src/style/antd/layout.less b/src/style/antd/layout.less
@@ -1,3 +1,14 @@
 .ant-layout-content {
     min-height: auto;
-}
+}
+
+.ant-layout {
+    &.ant-layout-has-sider {
+        &.app_layout-mobile {
+            flex-direction: column;
+            .ant-layout-content {
+                margin: 0;
+            }
+        }
+    }
+}