refactor: 支持 Layout 收缩状态

Author: ArgoZhang

src/BootstrapBlazor/Components/Layout/Layout.razor.scss

@@ -84,7 +84,6 @@
     }
 
     .has-sidebar {
-        /*left-right*/
         position: relative;
         flex: 1;
 
@@ -267,14 +266,17 @@
             position: relative;
             width: var(--bb-layout-sidebar-width);
             transform: translateX(0);
-            transition: width .3s linear;
             flex-shrink: 0;
 
             .layout-menu {
                 border-right: 1px solid var(--bs-border-color);
             }
         }
 
+        &:not(.drag) .layout-side {
+            transition: width .3s linear;
+        }
+
         &.has-sidebar {
             .layout-side {
                 &.is-fixed-header {

src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.js

@@ -15,7 +15,7 @@ export function init(id) {
     let width = 0;
     Drag.drag(bar,
         e => {
-            bar.classList.add('drag')
+            section.classList.add('drag')
             width = parseInt(getComputedStyle(section).getPropertyValue('--bb-layout-sidebar-width'))
             originX = e.clientX || e.touches[0].clientX
         },
@@ -32,7 +32,7 @@ export function init(id) {
             section.style.setProperty('--bb-layout-sidebar-width', `${newWidth}px`)
         },
         e => {
-            bar.classList.remove('drag')
+            section.classList.remove('drag')
         }
     )
 }

src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.scss

@@ -18,16 +18,25 @@
         transition: background .3s linear;
 
         &:hover {
-            background-color: var(--bb-sidebar-body-hover-bg);
+            background-color: var(--bb-splitebar-body-hover-bg);
         }
+    }
+}
 
-        &.drag,
-        &.drag:hover {
-            background-color: var(--bb-sidebar-body-drag-hover-bg);
+.drag {
+    .layout-splitebar {
+        .layout-splitebar-body:hover {
+            background-color: var(--bb-splitebar-body-drag-hover-bg);
         }
     }
 }
 
+.is-collapsed {
+    .layout-splitebar-body {
+        display: none;
+    }
+}
+
 @media(min-width: 768px) {
     .layout-splitebar {
         display: block;