diff --git a/src/layout/demos/enUS/basic.demo.md b/src/layout/demos/enUS/basic.demo.md
index 694cfeeba..e5da9b09b 100644
--- a/src/layout/demos/enUS/basic.demo.md
+++ b/src/layout/demos/enUS/basic.demo.md
@@ -6,7 +6,7 @@ I hope the demo can meet you demand, so that you can have more time to do other
 <n-space vertical size="large">
   <n-layout>
     <n-layout-header>Yiheyuan Road</n-layout-header>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
     <n-layout-footer>Chengfu Road</n-layout-footer>
@@ -14,10 +14,10 @@ I hope the demo can meet you demand, so that you can have more time to do other
   <n-layout>
     <n-layout-header>Yiheyuan Road</n-layout-header>
     <n-layout has-sider>
-      <n-layout-sider content-style="padding: 24px"
+      <n-layout-sider content-style="padding: 24px;"
         >Handian Bridge</n-layout-sider
       >
-      <n-layout-content content-style="padding: 24px"
+      <n-layout-content content-style="padding: 24px;"
         >Pingshan Road</n-layout-content
       >
     </n-layout>
@@ -29,7 +29,7 @@ I hope the demo can meet you demand, so that you can have more time to do other
     >
     <n-layout>
       <n-layout-header>Yiheyuan Road</n-layout-header>
-      <n-layout-content content-style="padding: 24px"
+      <n-layout-content content-style="padding: 24px;"
         >Pingshan Road</n-layout-content
       >
       <n-layout-footer>Chengfu Road</n-layout-footer>
diff --git a/src/layout/demos/enUS/collapse-right.demo.md b/src/layout/demos/enUS/collapse-right.demo.md
index cb7b13797..59f5c22f0 100644
--- a/src/layout/demos/enUS/collapse-right.demo.md
+++ b/src/layout/demos/enUS/collapse-right.demo.md
@@ -5,13 +5,16 @@ Sometimes you might want to put the collapsed sidebar on the right.
 ```html
 <n-space vertical size="large">
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;"
+      >Pingshan Road</n-layout-content
+    >
     <n-layout-sider
       collapse-mode="width"
       :collapsed-width="120"
       :native-scrollbar="true"
       :width="240"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <p>
@@ -19,27 +22,25 @@ Sometimes you might want to put the collapsed sidebar on the right.
         Bridge
       </p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
-      >Pingshan Road</n-layout-content
-    >
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;"
+      >Pingshan Road</n-layout-content
+    >
     <n-layout-sider
       collapse-mode="transform"
       :native-scrollbar="false"
       :collapsed-width="120"
       :width="240"
-      show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      show-trigger="bar"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
-      >Pingshan Road</n-layout-content
-    >
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout style="max-height: 320px;" />
     <n-layout-sider
       bordered
       show-trigger
@@ -57,7 +58,6 @@ Sometimes you might want to put the collapsed sidebar on the right.
         :options="menuOptions"
       />
     </n-layout-sider>
-    <n-layout style="max-height: 320px;" />
   </n-layout>
 </n-space>
 ```
diff --git a/src/layout/demos/enUS/collapse.demo.md b/src/layout/demos/enUS/collapse.demo.md
index 83655412c..c53924418 100644
--- a/src/layout/demos/enUS/collapse.demo.md
+++ b/src/layout/demos/enUS/collapse.demo.md
@@ -15,8 +15,8 @@ Use `show-trigger` to use builtin button.
       collapse-mode="width"
       :collapsed-width="120"
       :width="240"
-      show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      show-trigger="bar"
+      content-style="padding: 24px;"
       bordered
     >
       <p>
@@ -24,7 +24,7 @@ Use `show-trigger` to use builtin button.
         Bridge
       </p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>
@@ -34,12 +34,12 @@ Use `show-trigger` to use builtin button.
       :collapsed-width="120"
       :width="240"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>
diff --git a/src/layout/demos/enUS/embedded.demo.md b/src/layout/demos/enUS/embedded.demo.md
index e294b2b07..ddb5df355 100644
--- a/src/layout/demos/enUS/embedded.demo.md
+++ b/src/layout/demos/enUS/embedded.demo.md
@@ -3,7 +3,7 @@
 Sometimes you may want the background to be darker to highlight the content (especially card like things).
 
 ```html
-<n-layout embedded content-style="padding: 24px">
+<n-layout embedded content-style="padding: 24px;">
   <n-card>
     All you need to do to look to those clouds,<br />
     and every day be in a good mood.
diff --git a/src/layout/demos/enUS/show-sider-content.demo.md b/src/layout/demos/enUS/show-sider-content.demo.md
index 6525dfcac..1120f4723 100644
--- a/src/layout/demos/enUS/show-sider-content.demo.md
+++ b/src/layout/demos/enUS/show-sider-content.demo.md
@@ -11,12 +11,12 @@ Sometimes you don't want to see content inside sider after it's collapsed. Set `
       :width="240"
       :show-collapsed-content="false"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian Bridge
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>
@@ -26,12 +26,12 @@ Sometimes you don't want to see content inside sider after it's collapsed. Set `
       :collapsed-width="120"
       :width="240"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>
diff --git a/src/layout/demos/zhCN/basic.demo.md b/src/layout/demos/zhCN/basic.demo.md
index 5af0d17b5..02652e328 100644
--- a/src/layout/demos/zhCN/basic.demo.md
+++ b/src/layout/demos/zhCN/basic.demo.md
@@ -6,14 +6,14 @@
 <n-space vertical size="large">
   <n-layout>
     <n-layout-header>颐和园路</n-layout-header>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     <n-layout-footer>成府路</n-layout-footer>
   </n-layout>
   <n-layout>
     <n-layout-header>颐和园路</n-layout-header>
     <n-layout has-sider>
-      <n-layout-sider content-style="padding: 24px">海淀桥</n-layout-sider>
-      <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+      <n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
+      <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     </n-layout>
     <n-layout-footer>成府路</n-layout-footer>
   </n-layout>
@@ -21,7 +21,7 @@
     <n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
     <n-layout>
       <n-layout-header>颐和园路</n-layout-header>
-      <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+      <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
       <n-layout-footer>成府路</n-layout-footer>
     </n-layout>
   </n-layout>
diff --git a/src/layout/demos/zhCN/collapse-right.demo.md b/src/layout/demos/zhCN/collapse-right.demo.md
index 63622430f..9cd1a3747 100644
--- a/src/layout/demos/zhCN/collapse-right.demo.md
+++ b/src/layout/demos/zhCN/collapse-right.demo.md
@@ -5,34 +5,35 @@
 ```html
 <n-space vertical size="large">
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     <n-layout-sider
       collapse-mode="width"
       :collapsed-width="120"
       :width="240"
       :native-scrollbar="true"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     <n-layout-sider
       collapse-mode="transform"
       :collapsed-width="120"
       :width="240"
       :native-scrollbar="false"
-      show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      show-trigger="bar"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout style="max-height: 320px;" />
     <n-layout-sider
       bordered
       show-trigger
@@ -48,7 +49,6 @@
         :options="menuOptions"
       />
     </n-layout-sider>
-    <n-layout style="max-height: 320px;" />
   </n-layout>
 </n-space>
 ```
diff --git a/src/layout/demos/zhCN/collapse.demo.md b/src/layout/demos/zhCN/collapse.demo.md
index c56f2ebeb..5558adfda 100644
--- a/src/layout/demos/zhCN/collapse.demo.md
+++ b/src/layout/demos/zhCN/collapse.demo.md
@@ -14,25 +14,25 @@
       :collapsed-width="120"
       :width="240"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider>
     <n-layout-sider
       collapse-mode="transform"
       :collapsed-width="120"
       :width="240"
-      show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      show-trigger="bar"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
 </n-space>
 ```
diff --git a/src/layout/demos/zhCN/embedded.demo.md b/src/layout/demos/zhCN/embedded.demo.md
index 1fe2552dd..fcbe84f02 100644
--- a/src/layout/demos/zhCN/embedded.demo.md
+++ b/src/layout/demos/zhCN/embedded.demo.md
@@ -3,7 +3,7 @@
 有的时候你希望背景色暗一点，来突出上面显示的内容（尤其是卡片）。
 
 ```html
-<n-layout embedded content-style="padding: 24px">
+<n-layout embedded content-style="padding: 24px;">
   <n-card>
     只要是 看到天边云一朵<br />
     逐天拢有好心情
diff --git a/src/layout/demos/zhCN/show-sider-content.demo.md b/src/layout/demos/zhCN/show-sider-content.demo.md
index fcc3c6c5e..9ec146e99 100644
--- a/src/layout/demos/zhCN/show-sider-content.demo.md
+++ b/src/layout/demos/zhCN/show-sider-content.demo.md
@@ -16,7 +16,7 @@
     >
       海淀桥 海淀桥 海淀桥 海淀桥 海淀桥
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider>
     <n-layout-sider
@@ -29,7 +29,7 @@
     >
       <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
 </n-space>
 ```
diff --git a/src/layout/src/Layout.tsx b/src/layout/src/Layout.tsx
index 33c30d424..edc160df9 100644
--- a/src/layout/src/Layout.tsx
+++ b/src/layout/src/Layout.tsx
@@ -40,8 +40,9 @@ const layoutProps = {
 
 export type LayoutProps = ExtractPublicPropTypes<typeof layoutProps>
 
-export const layoutInjectionKey: InjectionKey<ExtractPropTypes<LayoutProps>> =
-  Symbol('layout')
+export const layoutInjectionKey: InjectionKey<
+ExtractPropTypes<typeof layoutProps>
+> = Symbol('layout')
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createLayoutComponent (isContent: boolean) {
@@ -115,9 +116,6 @@ export function createLayoutComponent (isContent: boolean) {
     render () {
       const { mergedClsPrefix, hasSider } = this
       const hasSiderStyle = hasSider ? this.hasSiderStyle : undefined
-      const siderPlacementStyle = {
-        'flex-direction': this.siderPlacement === 'right' && 'row-reverse'
-      }
       const layoutClass = [
         isContent && `${mergedClsPrefix}-layout-content`,
         `${mergedClsPrefix}-layout`,
@@ -129,9 +127,7 @@ export function createLayoutComponent (isContent: boolean) {
             <div
               ref="scrollableElRef"
               class={`${mergedClsPrefix}-layout-scroll-container`}
-              style={
-                [this.contentStyle, hasSiderStyle, siderPlacementStyle] as any
-              }
+              style={[this.contentStyle, hasSiderStyle] as any}
             >
               {this.$slots}
             </div>
@@ -141,7 +137,6 @@ export function createLayoutComponent (isContent: boolean) {
               ref="scrollbarInstRef"
               theme={this.mergedTheme.peers.Scrollbar}
               themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
-              style={siderPlacementStyle}
               contentStyle={[this.contentStyle, hasSiderStyle] as any}
             >
               {this.$slots}
diff --git a/src/layout/src/LayoutSider.tsx b/src/layout/src/LayoutSider.tsx
index 7dc0e242d..ccdaf4251 100644
--- a/src/layout/src/LayoutSider.tsx
+++ b/src/layout/src/LayoutSider.tsx
@@ -123,20 +123,8 @@ export default defineComponent({
         minWidth: formatLength(props.width)
       }
     })
-    const siderScrollContainerTransformStyleRef = computed<CSSProperties>(
-      () => {
-        if (siderPlacementRef.value !== 'left' && props.collapseMode === 'transform') {
-          return {
-            transform: `translateX(calc(${formatLength(props.width)} - ${
-              styleMaxWidthRef.value
-            }px)`
-          }
-        }
-        return {}
-      }
-    )
     const siderPlacementRef = computed(() => {
-      return layoutProps?.siderPlacement || 'left'
+      return layoutProps ? layoutProps.siderPlacement : 'left'
     })
     const uncontrolledCollapsedRef = ref(props.defaultCollapsed)
     const mergedCollapsedRef = useMergedState(
@@ -209,7 +197,6 @@ export default defineComponent({
       styleMaxWidth: styleMaxWidthRef,
       mergedCollapsed: mergedCollapsedRef,
       scrollContainerStyle: scrollContainerStyleRef,
-      siderScrollContainerTransformStyle: siderScrollContainerTransformStyleRef,
       siderPlacement: siderPlacementRef,
       handleTriggerClick,
       cssVars: computed(() => {
@@ -250,7 +237,7 @@ export default defineComponent({
         class={[
           `${mergedClsPrefix}-layout-sider`,
           `${mergedClsPrefix}-layout-sider--${this.position}-positioned`,
-          `${mergedClsPrefix}-layout-sider--${this.siderPlacement}`,
+          `${mergedClsPrefix}-layout-sider--${this.siderPlacement}-placement`,
           this.bordered && `${mergedClsPrefix}-layout-sider--bordered`,
           mergedCollapsed && `${mergedClsPrefix}-layout-sider--collapsed`,
           (!mergedCollapsed || this.showCollapsedContent) &&
@@ -268,10 +255,7 @@ export default defineComponent({
           <NScrollbar
             {...this.scrollbarProps}
             ref="scrollbarInstRef"
-            style={[
-              this.scrollContainerStyle,
-              this.siderScrollContainerTransformStyle
-            ]}
+            style={this.scrollContainerStyle}
             contentStyle={this.contentStyle}
             theme={this.mergedTheme.peers.Scrollbar}
             themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
@@ -294,7 +278,6 @@ export default defineComponent({
             style={[
               this.scrollContainerStyle,
               this.contentStyle,
-              this.siderScrollContainerTransformStyle,
               {
                 overflow: 'auto'
               }
@@ -307,10 +290,6 @@ export default defineComponent({
         {showTrigger ? (
           showTrigger === 'arrow-circle' ? (
             <ToggleButton
-              class={[
-                mergedCollapsed &&
-                  `${mergedClsPrefix}-layout-toggle-button--collapsed`
-              ]}
               clsPrefix={mergedClsPrefix}
               style={this.triggerStyle}
               onClick={this.handleTriggerClick}
@@ -318,7 +297,6 @@ export default defineComponent({
           ) : (
             <ToggleBar
               clsPrefix={mergedClsPrefix}
-              collapsed={mergedCollapsed}
               style={this.triggerStyle}
               onClick={this.handleTriggerClick}
             />
diff --git a/src/layout/src/ToggleBar.tsx b/src/layout/src/ToggleBar.tsx
index dada144f5..ce95c7ded 100644
--- a/src/layout/src/ToggleBar.tsx
+++ b/src/layout/src/ToggleBar.tsx
@@ -6,22 +6,12 @@ export default defineComponent({
       type: String,
       required: true
     },
-    onClick: Function as PropType<(e: MouseEvent) => void>,
-    collapsed: {
-      type: Boolean,
-      default: false
-    }
+    onClick: Function as PropType<(e: MouseEvent) => void>
   },
   render () {
     const { clsPrefix } = this
     return (
-      <div
-        onClick={this.onClick}
-        class={[
-          `${clsPrefix}-layout-toggle-bar`,
-          this.collapsed && `${clsPrefix}-layout-toggle-bar--collapsed`
-        ]}
-      >
+      <div onClick={this.onClick} class={`${clsPrefix}-layout-toggle-bar`}>
         <div class={`${clsPrefix}-layout-toggle-bar__top`} />
         <div class={`${clsPrefix}-layout-toggle-bar__bottom`} />
       </div>
diff --git a/src/layout/src/styles/layout-sider.cssr.ts b/src/layout/src/styles/layout-sider.cssr.ts
index df1cc8efd..c361e26b1 100644
--- a/src/layout/src/styles/layout-sider.cssr.ts
+++ b/src/layout/src/styles/layout-sider.cssr.ts
@@ -25,26 +25,59 @@ export default cB('layout-sider', `
   display: flex;
   justify-content: flex-end;
 `, [
-  c('>', [
-    cB('scrollbar', `
-      transition: transform .3s var(--bezier);
-    `)
-  ]),
-  cM('right', [
+  cM('right-placement', `
+    justify-content: flex-start;
+  `, [
     cM('bordered', `
+      border-right: none;
       border-left: 1px solid var(--border-color);
     `),
+    cM('collapsed', [
+      cB('layout-toggle-button', `
+        transform: translateX(-50%) translateY(-50%) rotate(0);
+      `),
+      cB('layout-toggle-bar', [
+        c('&:hover', [
+          cE('top', {
+            transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
+          }),
+          cE('bottom', {
+            transform: 'rotate(12deg) scale(1.15) translateY(2px)'
+          })
+        ])
+      ])
+    ]),
     cB('layout-toggle-button', `
       transform: translateX(-50%) translateY(-50%) rotate(180deg);
       left: 0;
-    `, [
-      cM('collapsed', `
-        transform: translateX(-50%) translateY(-50%) rotate(0);
-      `)
-    ]),
+    `),
     cB('layout-toggle-bar', `
       left: -28px;
       transform: rotate(180deg);
+    `, [
+      c('&:hover', [
+        cE('top', {
+          transform: 'rotate(12deg) scale(1.15) translateY(-2px)'
+        }),
+        cE('bottom', {
+          transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
+        })
+      ])
+    ])
+  ]),
+  cM('collapsed', [
+    cB('layout-toggle-bar', [
+      c('&:hover', [
+        cE('top', {
+          transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
+        }),
+        cE('bottom', {
+          transform: 'rotate(12deg) scale(1.15) translateY(2px)'
+        })
+      ])
+    ]),
+    cB('layout-toggle-button', `
+      transform: translateX(50%) translateY(-50%) rotate(180deg);
     `)
   ]),
   cB('layout-toggle-button', `
@@ -59,11 +92,7 @@ export default cB('layout-sider', `
     right: 0;
     fill: var(--toggle-button-color);
     transform: translateX(50%) translateY(-50%) rotate(0);
-  `, [
-    cM('collapsed', `
-      transform: translateX(50%) translateY(-50%) rotate(180deg);
-    `)
-  ]),
+  `),
   cB('layout-toggle-bar', `
     cursor: pointer;
     height: 72px;
@@ -94,16 +123,6 @@ export default cB('layout-sider', `
         transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
       })
     ]),
-    cM('collapsed', [
-      c('&:hover', [
-        cE('top', {
-          transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
-        }),
-        cE('bottom', {
-          transform: 'rotate(12deg) scale(1.15) translateY(2px)'
-        })
-      ])
-    ]),
     cE('top, bottom', {
       backgroundColor: 'var(--toggle-bar-color)'
     }),
@@ -127,7 +146,7 @@ export default cB('layout-sider', `
     box-sizing: border-box;
     height: 100%;
     opacity: 0;
-    transition: transform .3s var(--bezier), opacity .3s var(--bezier);
+    transition: opacity .3s var(--bezier);
     max-width: 100%;
   `),
   cM('show-content', [