Merge branch 'main' into main

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,10 +233,14 @@
     }
 
     &.is-fixed-tab {
-        .tabs-header {
-            position: sticky;
-            top: var(--bb-layout-header-height);
-            z-index: 5;
+        .layout-menu,
+        .tabs {
+            height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
+
+            .tabs-body {
+                height: calc(100% - var(--bb-tabs-item-height));
+                overflow: auto;
+            }
         }
     }
 }
@@ -275,6 +279,10 @@
                     top: 0;
                     height: var(--bb-layout-height);
                 }
+
+                .layout-menu {
+                    height: calc(var(--bb-layout-height) - var(--bb-layout-header-height));
+                }
             }
         }
 

src/BootstrapBlazor/Components/Menu/Menu.razor

@@ -6,11 +6,11 @@
     <CascadingValue Value="this" IsFixed="true">
         @if (IsVertical)
         {
-            <SideMenu Items="@Items" Id="@SideMenuId" class="@SideMenuClassString" OnClick="@OnClickMenu" IsScrollToView="@IsScrollIntoView" />
+            <SideMenu Items="@Items" Id="@SideMenuId" class="@SideMenuClassString" OnClick="@OnClickMenu"></SideMenu>
         }
         else
         {
-            <TopMenu Items="@Items" OnClick="@OnClickMenu" />
+            <TopMenu Items="@Items" OnClick="@OnClickMenu"></TopMenu>
         }
     </CascadingValue>
 </nav>

src/BootstrapBlazor/Components/Tab/Tab.razor.scss

@@ -15,7 +15,6 @@
 
     .tabs-body-content {
         background-color: var(--bs-body-bg);
-        height: 100%;
 
         &.bb-fs-open {
             padding: var(--bb-tabs-body-padding);