problem display NavItem

[walidmasa]

I have a problem with the SideBar component: the NavItem is not displayed.
I work with:

• Maui Blazor Hybrid .Net7.
• balzorBootstrap v1.11.

`@inherits LayoutComponentBase
@Inject CultureService CultureService
@Inject GlobalVariableService GlobalVariableService
@Inject IStringLocalizer localizer

@using Microsoft.AspNetCore.Components.Authorization;
@using System.Globalization;

@* *@ @* *@

About

    <article class="content px-4">
        <LoadingPanel />
        @Body
    </article>
</main>

@code {
Sidebar sidebar = default!;
IEnumerable? navItems;
protected override void OnInitialized()
{

    CultureHelper.SetCurrentCultureInfo(Preferences.Get("language", "fr-FR"));
    // CultureService.ChangeCulture(Preferences.Get("language", "fr-FR"));
    CultureInfo.CurrentCulture.ClearCachedData();
    CultureInfo.CurrentUICulture.ClearCachedData();

    base.OnInitialized();
    this.StateHasChanged();

}
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"},
         new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
    };

    return navItems;
}
private void ToogleSidebar() => sidebar.ToggleSidebar();

}I did everything in order according to the documentation. CSS references and script references in wwwroot/index.html

<title>MauiSalesPoint</title>

<link href="MauiSalesPoint.styles.css" rel="stylesheet" />

<!--blazor.bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="css/LoadingStyle.css" rel="stylesheet" />

<script src="_framework/blazor.webview.js" autostart="false"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script> ` Register services in MauiProgram.cs ` builder.Services.AddBlazorBootstrap();`

Register tag helpers in _Imports.razor
@using BlazorBootstrap

and I also remove the default refecence

[ryrysmiley]

I had the same issue any answers?

[walidmasa]

I got around the problem with JavaScripts.I hope it helps you.

`var navMenuElement;
var buttonToggler;
let isCollapsed = false;

function initializeLayoutVar() {
navMenuElement = document.querySelector(".bb-sidebar-content.nav-scrollable.bb-scrollbar");
buttonToggler = document.querySelector(".navbar-toggler.px-2");
isCollapsed = navMenuElement.classList.contains("collapse");
}
function ToggelSideBar() {
var buttonToogleSideBar = document.getElementById("buttonToogleSideBar");
buttonToogleSideBar.click();
}
function handleResize() {
const windowWidth = window.innerWidth;
isCollapsed = navMenuElement.classList.contains("collapse");
if (windowWidth < 641 && !isCollapsed) {
buttonToggler.click();
} else if (windowWidth >= 641 && isCollapsed) {
buttonToggler.click();
}
}

// Observe changes to the DOM and call initializeLayoutVar when the navMenu is added
const observer = new MutationObserver((mutationsList, observer) => {
for (let mutation of mutationsList) {
if (mutation.addedNodes.length) {
for (let node of mutation.addedNodes) {
if (node.classList && node.classList.contains("bb-sidebar-content") && node.classList.contains("nav-scrollable") && node.classList.contains("bb-scrollbar")) {
observer.disconnect();
initializeLayoutVar();
handleResize();
window.addEventListener('resize', handleResize);
}
}
}
}
});`