I am trying to create an application using Blazor. In that application I am using sidebar component of Blazor. I have installed Blazor bootstrap and have given every reference of dependencies which are mentioned in the site https://demos.blazorbootstrap.com/sidebar, yet the side bar is showing loading three dots icon in it. Attaching all the files and codes here.
MainLayout.razor @inherits LayoutComponentBase<div class="bb-page"><Sidebar @ref="sidebar" Href="/" CustomIconName="bi bi-apple" Title="Blazor Bootstrap" BadgeText="v1.3.1" DataProvider="SidebarDataProvider" /><main><div class="bb-top-row px-4 d-flex justify-content-between"><Icon Name="IconName.List" role="button" @onclick="ToggleSidebar" /><a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a></div><article class="content px-4"><div class="py-2">Page content goes here</div></article></main></div>@code { Sidebar sidebar = default!; IEnumerable<NavItem>? navItems; private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest 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", IconColor = IconColor.Primary }, new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success }, 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", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"}, new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger }, 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; } private void ToggleSidebar() => sidebar.ToggleSidebar();}_Import.razor@using System.Net.Http@using System.Net.Http.Json@using Microsoft.AspNetCore.Components.Forms@using Microsoft.AspNetCore.Components.Routing@using Microsoft.AspNetCore.Components.Web@using static Microsoft.AspNetCore.Components.Web.RenderMode@using Microsoft.AspNetCore.Components.Web.Virtualization@using Microsoft.JSInterop@using Sample_Forecast@using Sample_Forecast.Components@using BlazorBootstrap;app.razor<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><base href="/" /><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"><link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" /><link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" /><link rel="stylesheet" href="app.css" /><link rel="stylesheet" href="Sample_Forecast.styles.css" /><link rel="icon" type="image/png" href="favicon.png" /><HeadOutlet /></head><body><Routes /><script src="_framework/blazor.web.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script><script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script></body></html>Program.csusing Sample_Forecast.Components;var builder = WebApplication.CreateBuilder(args);// Add services to the container.builder.Services.AddRazorComponents() .AddInteractiveServerComponents();builder.Services.AddBlazorBootstrap();builder.Services.AddHttpClient();var app = builder.Build();// Configure the HTTP request pipeline.if (!app.Environment.IsDevelopment()){ app.UseExceptionHandler("/Error", createScopeForErrors: true); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts();}app.UseHttpsRedirection();app.UseStaticFiles();app.UseAntiforgery();app.MapRazorComponents<App>() .AddInteractiveServerRenderMode();app.Run();I followed steps mentioned in https://demos.blazorbootstrap.com/sidebar site