feat: make Sider collapsible (#190)

orzyyyy · Aug 25, 2019 · 34faecd · 34faecd
1 parent c9861a5
commit 34faecd
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -96,7 +96,7 @@ export default class MainPage extends Component<MainPageProps, MainPageState> {
     const { menuData } = this.props;
     const { siderSelectedKey } = this.state;
     return (
-      <Sider theme="light">
+      <Sider theme="light" collapsible collapsedWidth={0}>
         <Menu
           selectedKeys={[siderSelectedKey]}
           mode="inline"

diff --git a/src/pages/__tests__/__snapshots__/MainPage.test.js.snap b/src/pages/__tests__/__snapshots__/MainPage.test.js.snap
@@ -5,6 +5,8 @@ exports[`MainPage render correctly 1`] = `
   className="MainPage"
 >
   <Sider
+    collapsedWidth={0}
+    collapsible={true}
     theme="light"
   >
     <Menu

diff --git a/src/pages/css/MainPage.css b/src/pages/css/MainPage.css
@@ -17,3 +17,7 @@
   background: #e6f7ff;
   transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
+
+.MainPage .ant-layout-sider-zero-width-trigger {
+  top: calc(100vh - 65px);
+}