vikramlearning · gvreddy04 · Nov 9, 2024 · Nov 8, 2024 · Nov 8, 2024 · Nov 9, 2024
diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor
@@ -1,7 +1,7 @@
 @namespace BlazorBootstrap.Demo.RCL
 @inherits MainLayoutBase
 
-<BlazorBootstrapLayout>
+<BlazorBootstrapLayout StickyHeader="true">
     <HeaderSection>
         <div>
             <a class="nav-link py-2 px-2" href="@githubUrl" target="_blank" rel="noopener">

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/Layout_Server_Demo_01.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/Layout_Server_Demo_01.razor
@@ -1,31 +1,32 @@
 @inherits LayoutComponentBase
 
-<div class="bb-page">
-
-    <Sidebar @ref="sidebar"
-             IconName="IconName.BootstrapFill"
-             Title="Blazor Bootstrap"
-             DataProvider="SidebarDataProvider" />
-
-    <main>
-        <div class="bb-top-row px-4 d-flex justify-content-end">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
-            <div class="py-2">
-                @Body
-            </div>
-        </article>
-    </main>
-
-</div>
+<BlazorBootstrapLayout StickyHeader="true">
+    <HeaderSection>
+        <ThemeSwitcher Class="ps-3 ps-lg-2" />
+    </HeaderSection>
+
+    <SidebarSection>
+        <Sidebar2 Href="/"
+                  ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
+                  Title="Blazor Bootstrap"
+                  BadgeText="3.3.1"
+                  DataProvider="Sidebar2DataProvider"
+                  WidthUnit="Unit.Px" />
+    </SidebarSection>
+
+    <ContentSection>
+        @Body
+    </ContentSection>
+
+    <FooterSection>
+        Footer links...
+    </FooterSection>
+</BlazorBootstrapLayout>
 
 @code {
-    private Sidebar sidebar = default!;
     private IEnumerable<NavItem> navItems = default!;
 
-    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
+    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
     {
         if (navItems is null)
             navItems = GetNavItems();
@@ -36,11 +37,11 @@
     private IEnumerable<NavItem> GetNavItems()
     {
         navItems = new List<NavItem>
-        {
-            new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
-            new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
-            new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
-        };
+                   {
+                       new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
+                       new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
+                       new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
+                   };
 
         return navItems;
     }

diff --git a/...orBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor b/...orBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor
@@ -1,31 +1,32 @@
 @inherits LayoutComponentBase
 
-<div class="bb-page">
-
-    <Sidebar @ref="sidebar"
-             IconName="IconName.BootstrapFill"
-             Title="Blazor Bootstrap"
-             DataProvider="SidebarDataProvider" />
-
-    <main>
-        <div class="bb-top-row px-4 d-flex justify-content-end">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
-            <div class="py-2">
-                @Body
-            </div>
-        </article>
-    </main>
-
-</div>
+<BlazorBootstrapLayout StickyHeader="true">
+    <HeaderSection>
+        <ThemeSwitcher Class="ps-3 ps-lg-2" />
+    </HeaderSection>
+
+    <SidebarSection>
+        <Sidebar2 Href="/"
+                  ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
+                  Title="Blazor Bootstrap"
+                  BadgeText="3.3.1"
+                  DataProvider="Sidebar2DataProvider"
+                  WidthUnit="Unit.Px" />
+    </SidebarSection>
+
+    <ContentSection>
+        @Body
+    </ContentSection>
+
+    <FooterSection>
+        Footer links...
+    </FooterSection>
+</BlazorBootstrapLayout>
 
 @code {
-    private Sidebar sidebar = default!;
     private IEnumerable<NavItem> navItems = default!;
 
-    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
+    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
     {
         if (navItems is null)
             navItems = GetNavItems();

diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor b/BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor
@@ -10,36 +10,36 @@
     @if (Size == HeadingSize.H2)
     {
         <h2 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h2>
     }
     else if (Size == HeadingSize.H3)
     {
         <h3 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h3>
     }
     else if (Size == HeadingSize.H4)
     {
         <h4 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h4>
     }
     else if (Size == HeadingSize.H5)
     {
         <h5 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h5>
     }
     else if (Size == HeadingSize.H6)
     {
         <h6 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h6>
     }
 

diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css b/BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css
@@ -254,28 +254,28 @@ h1:focus-visible {
 
 /*** END: home ***/
 
-.anchor-link {
+.bb-anchor-link {
     font-weight: 400;
     color: rgba(13,110,253,0.5);
     transition: color 0.15s ease-in-out;
     opacity: 0;
-    padding-left: 0.375em;
+    /*padding-left: 0.375em;*/
     text-decoration: none;
     -webkit-font-smoothing: antialiased;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .anchor-link {
+    .bb-anchor-link {
         transition: none
     }
 }
 
-.anchor-link:focus, .anchor-link:hover {
+.bb-anchor-link:focus, .bb-anchor-link:hover {
     color: #0d6efd;
     text-decoration: none
 }
 
-:hover > .anchor-link, .anchor-link:focus {
+:hover > .bb-anchor-link, .bb-anchor-link:focus {
     opacity: 1;
 }
 

diff --git a/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs b/blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs
@@ -13,10 +13,19 @@ public partial class BlazorBootstrapLayout : BlazorBootstrapLayoutComponentBase
     [Parameter] public RenderFragment? FooterSection { get; set; }
     [Parameter] public string? FooterSectionCssClass { get; set; } = "bg-body-tertiary";
     protected string? FooterSectionCssClassNames => BuildClassNames(FooterSectionCssClass, ("bb-footer p-4", true));
-    
+
     [Parameter] public RenderFragment? HeaderSection { get; set; }
     [Parameter] public string? HeaderSectionCssClass { get; set; } = "d-flex justify-content-end";
-    protected string? HeaderSectionCssClassNames => BuildClassNames(HeaderSectionCssClass, ("bb-top-row px-4", true));
+
+    protected string? HeaderSectionCssClassNames =>
+        BuildClassNames(
+            HeaderSectionCssClass,
+            ("bb-top-row", true),
+            ("bb-top-row-sticky", StickyHeader),
+            ("px-4", true)
+        );
+
+    [Parameter] public bool StickyHeader { get; set; }
 
     [Parameter] public RenderFragment? SidebarSection { get; set; }
 

diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.css b/blazorbootstrap/wwwroot/blazor.bootstrap.css
@@ -458,7 +458,7 @@ table > tbody > tr > td:is(.freeze-column-right).freeze-column-active {
         flex-direction: row !important;
     }
 
-    .bb-top-row {
+    .bb-top-row-sticky {
         position: sticky;
         top: 0;
         z-index: 1;

diff --git a/docs/docs/02-layout/getting-started-server.mdx b/docs/docs/02-layout/getting-started-server.mdx
@@ -17,8 +17,8 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o
 
 Assuming you followed the getting started docs for the initial setup.
 
-1. **Blazor WebAssembly Project:** Follow the [getting started](/getting-started/blazor-webassembly) steps for the initial setup.
-1. **Blazor Server Project:** Follow the [getting started](/getting-started/blazor-server) steps for the initial setup.
+1. **Blazor WebAssembly Project:** Follow the [getting started](/getting-started/blazor-webassembly-net-8) steps for the initial setup.
+1. **Blazor Server Project:** Follow the [getting started](/getting-started/blazor-webapp-server-global-net-8) steps for the initial setup.
 
 ## Steps
 
@@ -31,33 +31,33 @@ Remove all the CSS content from the **Shared/MainLayout.razor.css** file.
 ```cshtml {} showLineNumbers
 @inherits LayoutComponentBase
 
-<div class="bb-page">
-
-    <Sidebar @ref="sidebar"
-             Href="/"
-             IconName="IconName.BootstrapFill"
-             Title="Blazor Bootstrap"
-             DataProvider="SidebarDataProvider" />
-
-    <main>
-        <div class="bb-top-row px-4 d-flex justify-content-end">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
-            <div class="py-2">
-                @Body
-            </div>
-        </article>
-    </main>
-
-</div>
+<BlazorBootstrapLayout StickyHeader="true">
+    <HeaderSection>
+        <ThemeSwitcher Class="ps-3 ps-lg-2" />
+    </HeaderSection>
+
+    <SidebarSection>
+        <Sidebar2 Href="/"
+                  ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
+                  Title="Blazor Bootstrap"
+                  BadgeText="3.3.1"
+                  DataProvider="Sidebar2DataProvider"
+                  WidthUnit="Unit.Px" />
+    </SidebarSection>
+
+    <ContentSection>
+        @Body
+    </ContentSection>
+
+    <FooterSection>
+        Footer links...
+    </FooterSection>
+</BlazorBootstrapLayout>
 
 @code {
-    private Sidebar sidebar = default!;
     private IEnumerable<NavItem> navItems = default!;
 
-    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
+    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
     {
         if (navItems is null)
             navItems = GetNavItems();
@@ -68,11 +68,11 @@ Remove all the CSS content from the **Shared/MainLayout.razor.css** file.
     private IEnumerable<NavItem> GetNavItems()
     {
         navItems = new List<NavItem>
-        {
-            new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
-            new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
-            new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
-        };
+                   {
+                       new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
+                       new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
+                       new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
+                   };
 
         return navItems;
     }
@@ -81,11 +81,9 @@ Remove all the CSS content from the **Shared/MainLayout.razor.css** file.
 
 ## Starter templates
 
-### .NET 6
-
-1. [Blazor Bootstrap - Blazor WebAssembly App](https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET6.BlazorWebAssemblyApp)
+### .NET 8
 
-   <img src="https://i.imgur.com/aRV3rJm.png" alt="Blazor Bootstrap - Blazor WebAssembly App" />
+TODO
 
 ### .NET 7
 
@@ -96,3 +94,9 @@ Remove all the CSS content from the **Shared/MainLayout.razor.css** file.
 1. [Blazor Bootstrap - Blazor Empty WebAssembly App](https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyAppEmpty)
 
    <img src="https://i.imgur.com/CBEoZ6P.png" alt="Blazor Bootstrap - Blazor Empty WebAssembly App" />
+
+### .NET 6
+
+1. [Blazor Bootstrap - Blazor WebAssembly App](https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET6.BlazorWebAssemblyApp)
+
+   <img src="https://i.imgur.com/aRV3rJm.png" alt="Blazor Bootstrap - Blazor WebAssembly App" />