fix(Layout): update layout-menu style (#4803)

* fix: 固定侧边栏菜单高度

* doc: 更新示例

* doc: 更新样式

* style: 更新侧边栏菜单高度样式

Author: ArgoZhang

src/BootstrapBlazor.Shared/Components/Samples/Layouts.razor

@@ -40,7 +40,7 @@
            Introduction="@Localizer["LayoutsUpAndDownIntro"]"
            Name="UpAndDown">
     <div class="layout-demo">
-        <Layout ShowFooter="true">
+        <Layout ShowFooter="true" AdditionalAssemblies="[typeof(MainLayout).Assembly]">
             <Header>
                 <div>Header</div>
             </Header>
@@ -58,7 +58,7 @@
            Introduction="@Localizer["LayoutsMiddleLeftRightIntro"]"
            Name="MiddleLeftRight">
     <div class="layout-demo">
-        <Layout ShowFooter="true">
+        <Layout ShowFooter="true" AdditionalAssemblies="[typeof(MainLayout).Assembly]">
             <Header>
                 <div>Header</div>
             </Header>
@@ -79,7 +79,7 @@
            Introduction="@Localizer["LayoutsLeftRightIntro"]"
            Name="LeftRight">
     <div class="layout-demo">
-        <Layout ShowFooter="true" IsFullSide="true">
+        <Layout ShowFooter="true" IsFullSide="true" AdditionalAssemblies="[typeof(MainLayout).Assembly]">
             <Header>
                 <div>Header</div>
             </Header>
@@ -100,7 +100,7 @@
            Introduction="@Localizer["LayoutsCustomPercentIntro"]"
            Name="CustomPercent">
     <div class="layout-demo">
-        <Layout ShowFooter="true" SideWidth="200">
+        <Layout ShowFooter="true" SideWidth="200" AdditionalAssemblies="[typeof(MainLayout).Assembly]">
             <Header>
                 <div>Header</div>
             </Header>
@@ -140,7 +140,7 @@
         @((MarkupString)Localizer["LayoutsAppTips7"].Value)
     </Tips>
     <div class="layout-demo1">
-        <Layout ShowFooter="true" SideWidth="160px" Menus="IconSideMenuItems1">
+        <Layout ShowFooter="true" SideWidth="160px" Menus="IconSideMenuItems1" AdditionalAssemblies="[typeof(MainLayout).Assembly]">
             <Header>
                 <div>Header</div>
             </Header>
@@ -158,7 +158,7 @@
         @Localizer["LayoutsAppTips8"]
     </p>
     <div class="layout-demo2">
-        <Layout ShowFooter="true" SideWidth="160px" Menus="IconSideMenuItems2">
+        <Layout ShowFooter="true" SideWidth="160px" Menus="IconSideMenuItems2" AdditionalAssemblies="[typeof(MainLayout).Assembly]">
             <Header>
                 <div>Header</div>
             </Header>

src/BootstrapBlazor/Components/Layout/Layout.razor

@@ -29,7 +29,7 @@
                         }
                         @if (Menus != null)
                         {
-                            @RenderMenu(IsFullSide)
+                            @RenderMenu
                         }
                     </aside>
                     <section class="layout-right">
@@ -58,7 +58,7 @@
                             }
                             @if (Menus != null)
                             {
-                                @RenderMenu(IsFullSide)
+                                @RenderMenu
                             }
                         </aside>
                         @RenderMain
@@ -100,9 +100,9 @@
         @Header
     </header>;
 
-    RenderFragment<bool> RenderMenu => hasScroll =>
+    RenderFragment RenderMenu =>
     @<div class="layout-menu">
-        @if (hasScroll)
+        @if (IsFixedTabHeader || IsFullSide)
         {
             <Scroll>
                 <Menu Items="@Menus" IsVertical="true" IsAccordion="@IsAccordion" OnClick="ClickMenu"></Menu>

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

@@ -233,6 +233,7 @@
     }
 
     &.is-fixed-tab {
+        .layout-menu,
         .tabs {
             height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
 
@@ -278,6 +279,10 @@
                     top: 0;
                     height: var(--bb-layout-height);
                 }
+
+                .layout-menu {
+                    height: calc(var(--bb-layout-height) - var(--bb-layout-header-height));
+                }
             }
         }