refactor(LayoutSplitebar): Enhanced javascript handle sidebar width is not set (#5512)

* refactor: 更新变量类型

* refactor: 删除重复组件

* refactor: 更新脚本逻辑

* refactor: 优化逻辑

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor

@@ -8,7 +8,7 @@ namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
 /// <summary>
 /// Online sheet sample code
 /// </summary>
-public partial class OnlineSheet : ComponentBase, IDisposable
+public partial class OnlineSheet : IDisposable
 {
     [Inject, NotNull]
     private IWebHostEnvironment? WebHost { get; set; }

src/BootstrapBlazor.Server/Components/Samples/Tutorials/OnlineSheet.razor.cs

@@ -20,14 +20,19 @@ export function init(id) {
     let width = 0;
     Drag.drag(bar,
         e => {
-            section.classList.add('drag')
-            width = parseInt(getComputedStyle(section).getPropertyValue('--bb-layout-sidebar-width'))
-            originX = e.clientX || e.touches[0].clientX
+            section.classList.add('drag');
+            const widthString = getComputedStyle(section).getPropertyValue('--bb-layout-sidebar-width');
+            if (widthString === '') {
+                section.style.setProperty('--bb-layout-sidebar-width', '0');
+                widthString = '0';
+            }
+            width = parseInt(widthString);
+            originX = e.clientX || e.touches[0].clientX;
         },
         e => {
             const eventX = e.clientX || (e.touches.length > 0 && e.touches[0].clientX)
             const moveX = eventX - originX
-            const newWidth = width + moveX
+            let newWidth = width + moveX
             if (min > -1 && newWidth < min) {
                 newWidth = min
             }