The collapse trigger of Sider should be fixed and upon menus

close #7161
ant-design · Aug 11, 2017 · f689ede · f689ede
1 parent 30e4fa8
commit f689ede
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
@@ -161,7 +161,7 @@ export default class Sider extends React.Component<SiderProps, any> {
     const triggerDom = (
       trigger !== null ?
       zeroWidthTrigger || (
-        <div className={`${prefixCls}-trigger`} onClick={this.toggle}>
+        <div className={`${prefixCls}-trigger`} onClick={this.toggle} style={{ width: siderWidth }}>
           {trigger || defaultTrigger}
         </div>
       ) : null

diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -785,6 +785,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
     </div>
     <div
       class="ant-layout-sider-trigger"
+      style="width:200px;"
     >
       <i
         class="anticon anticon-left"

diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
@@ -1,5 +1,6 @@
 ---
 order: 3
+iframe: 360
 title:
   zh-CN: 侧边布局
   en-US: Sider
@@ -65,7 +66,7 @@ class SiderDemo extends React.Component {
               <Menu.Item key="6">Team 1</Menu.Item>
               <Menu.Item key="8">Team 2</Menu.Item>
             </SubMenu>
-            <Menu.Item key="8">
+            <Menu.Item key="9">
               <Icon type="file" />
               <span>File</span>
             </Menu.Item>

diff --git a/components/layout/style/index.less b/components/layout/style/index.less
@@ -56,15 +56,15 @@
     }
 
     &-trigger {
-      position: absolute;
+      position: fixed;
       text-align: center;
-      width: 100%;
       bottom: 0;
       cursor: pointer;
       height: @layout-trigger-height;
       line-height: @layout-trigger-height;
-      background: @layout-trigger-background;
       color: @layout-trigger-color;
+      background: fade(@layout-trigger-background, 100);
+      z-index: 1;
     }
 
     &-zero-width {