fix(layout-sider): n-layout-sider's collapse-mode not working

CHANGELOG.en-US.md

@@ -5,7 +5,11 @@
 ### Feats
 
 - `n-button` add `tag` prop.
-- `n-data-table` add `table-layout` prop
+- `n-data-table` add `table-layout` prop.
+
+### Fixes
+
+- `n-layout-sider`'s `collapse-mode` not working.
 
 ## 2.8.0
 

CHANGELOG.zh-CN.md

@@ -7,6 +7,10 @@
 - `n-button` 新增 `tag` 属性
 - `n-data-table` 新增 `table-layout` 属性
 
+### Fixes
+
+- `n-layout-sider` 的 `collapse-mode` 属性不生效
+
 ## 2.8.0
 
 ### Perf

demo/pages/Layout.vue

@@ -3,6 +3,7 @@
     <n-layout-sider
       :native-scrollbar="false"
       :collapsed-width="0"
+      collapse-mode="transform"
       bordered
       show-trigger="bar"
       v-if="showSider"

src/layout/src/LayoutSider.tsx

@@ -118,8 +118,9 @@ export default defineComponent({
       )
     })
     const scrollContainerStyleRef = computed<CSSProperties>(() => {
+      if (props.collapseMode !== 'transform') return {}
       return {
-        width: formatLength(props.width)
+        minWidth: formatLength(props.width)
       }
     })
     const scrollableDivStyleRef = computed(() => {
@@ -127,6 +128,7 @@ export default defineComponent({
         props.contentStyle,
         scrollContainerStyleRef.value,
         {
+          width: '100%',
           height: '100%',
           overflow: 'auto'
         }

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

@@ -8,6 +8,7 @@ import { c, cB, cE, cM } from '../../../_utils/cssr'
 // --sider-toggle-bar-color
 // --sider-toggle-bar-color-hover
 export default cB('layout-sider', `
+  flex-shrink: 0;
   box-sizing: border-box;
   position: relative;
   z-index: 1;