I want to use Blazor Bootstrap's SideBar.NewLayout.razor:
@inherits LayoutComponentBase<div class="bb-page"><Sidebar2 Href="/" IconName="IconName.BootstrapFill" Title="Blazor Bootstrap" BadgeText="v2.1.0" DataProvider="Sidebar2DataProvider" /><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" style="position: relative;"><div class="py-2"> @Body</div></article></main></div><style> .bb-page { display: flex; width: 100%; height: 100vh; } main { flex: 1; overflow: auto; min-width: 0; }</style>@code { IEnumerable<NavItem>? navItems; private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable<NavItem> GetNavItems() { navItems = new List<NavItem> { new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" }, new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" }, new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, new NavItem { Id = "7", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"}, new NavItem { Id = "701", Href = "/sidebar2", IconName = IconName.Dash, Text = "How to use", ParentId="7"}, new NavItem { Id = "702", Href = "/sidebar2-examples", IconName = IconName.Dash, Text = "Examples", ParentId="7"}, new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" }, new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"}, new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"}, new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"}, new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"}, }; return navItems; }}I want to use it as a new Layout on my Client-side page. But it keep show me that 3 dot loading thing.(https://i.sstatic.net/Jp3jQFK2.png). There is a question about it link but App.razor in server project and it doesnt work for me.
I want to use it as a new Layout on my Client-side page. I found this video link2 as the closest thing to what I want to do, but it runs the pages on the server side.
In order to create "@layout NewLayout", the layout must be on the client-side, but even so, I cannot write @rendermode InteractiveWebAssembly into the layout. gives the following error:
"InvalidOperationException: Cannot pass the parameter 'Body' to component 'NewLayout' with rendermode 'InteractiveWebAssemblyRenderMode'. This is because the parameter is of the delegate type 'Microsoft.AspNetCore.Components.RenderFragment', which is arbitrary code and cannot be serialized."