fix(layout): sider toggle button is covered

CHANGELOG.en-US.md

@@ -6,6 +6,7 @@
 
 - Fix `n-menu` tooltip of `n-menu-item` won't show when vertical collapsed.
 - Fix `n-menu` `collapsed-icon-size` not working.
+- Fix `n-layout-sider` toggle button is covered.
 
 ## 2.0.0
 

CHANGELOG.zh-CN.md

@@ -6,6 +6,7 @@
 
 - 修正 `n-menu` 垂直折叠时 `n-menu-item` tooltip 不显示的问题
 - 修正 `n-menu` `collapsed-icon-size` 不生效的问题
+- 修正 `n-layout-sider` 按钮被遮挡的问题
 
 ## 2.0.0
 

src/layout/demos/zhCN/index.demo-entry.md

@@ -15,6 +15,7 @@ absolute
 scrollbar
 collapse
 trigger-button
+trigger-button-debug
 show-sider-content
 scroll-to
 ```

src/layout/demos/zhCN/trigger-button-debug.demo.md

@@ -0,0 +1,59 @@
+# 触发按钮 Debug
+
+免费附赠一个触发按钮。
+
+```html
+<n-switch v-model:value="collapsed" />
+<n-layout>
+  <n-layout-sider
+    collapse-mode="width"
+    show-trigger
+    :collapsed-width="120"
+    :width="240"
+    :collapsed="collapsed"
+    @collapse="collapsed = true"
+    @expand="collapsed = false"
+  >
+    <n-h1>边栏</n-h1>
+  </n-layout-sider>
+  <n-layout style="height: 240px; padding: 24px;">
+    <n-layout-content>
+      <span>内容</span>
+    </n-layout-content>
+    <n-layout-footer>
+      <n-h1>页脚</n-h1>
+    </n-layout-footer>
+  </n-layout>
+</n-layout>
+<n-layout style="overflow: hidden;">
+  <n-layout-sider
+    show-trigger="arrow-circle"
+    collapse-mode="transform"
+    :collapsed-width="120"
+    :width="240"
+    :collapsed="collapsed"
+    @collapse="collapsed = true"
+    @expand="collapsed = false"
+  >
+    <n-h1>边栏</n-h1>
+  </n-layout-sider>
+  <n-layout style="height: 240px; padding: 24px;">
+    <n-layout-content>
+      <span>内容</span>
+    </n-layout-content>
+    <n-layout-footer>
+      <n-h1>页脚</n-h1>
+    </n-layout-footer>
+  </n-layout>
+</n-layout>
+```
+
+```js
+export default {
+  data () {
+    return {
+      collapsed: false
+    }
+  }
+}
+```

src/layout/src/styles/layout-sider.cssr.ts

@@ -10,7 +10,7 @@ import { c, cB, cE, cM } from '../../../_utils/cssr'
 export default cB('layout-sider', `
   box-sizing: border-box;
   position: relative;
-  z-index: auto;
+  z-index: 1;
   transition:
     min-width .3s var(--bezier),
     max-width .3s var(--bezier),
@@ -19,7 +19,6 @@ export default cB('layout-sider', `
   background-color: var(--sider-color);
 `, [
   cB('layout-toggle-button', `
-    z-index: 1;
     transition:
       transform .3s var(--bezier),
       fill .3s var(--bezier);

src/layout/src/styles/layout.cssr.ts

@@ -28,9 +28,5 @@ export default cB('layout', `
     right: 0;
     top: 0;
     bottom: 0;
-  `, [
-    cB('layout-sider', `
-      z-index: 1;
-    `)
-  ])
+  `)
 ])