shoc-backend/SeaHavenIndustries/Components/Pages/Header.razor

<nav class="navbar navbar-main navbar-expand-lg position-sticky mt-4 top-1 bg-gradient-dark px-0 shadow-none border-radius-xl z-index-sticky"
     id="navbarBlur" data-scroll="true">
    <div class="container-fluid py-1 px-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                <li class="breadcrumb-item text-sm">
                    <span>@((MarkupString)icon)</span>
                </li>
                <h6 class="font-weight-bolder mb-0" style="color: none !important;opacity: 0.5;"> @pagename</h6>
            </ol>
        </nav>
        <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none">
            <a href="javascript:;" class="nav-link text-body p-0" @onclick="ToggleSidebar">
                <div class="sidenav-toggler-inner">
                    <i class="sidenav-toggler-line"></i>
                    <i class="sidenav-toggler-line"></i>
                    <i class="sidenav-toggler-line"></i>
                </div>
            </a>
        </div>
        <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
            <div class="ms-md-auto pe-md-1 d-flex align-items-center">
                <div class="mt-2 d-flex">
                    <h6 class="mb-0">Dark/Light</h6>
                    <div class="form-check form-switch ps-2 ms-auto my-auto">
                        <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version" onclick="darkMode(this)">
                    </div>
                </div>
            </div>
           @*  <div class="vr"></div> *@
            <ul class="navbar-nav justify-content-end">               
               @*  <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                    <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
                        <div class="sidenav-toggler-inner">
                            <i class="sidenav-toggler-line"></i>
                            <i class="sidenav-toggler-line"></i>
                            <i class="sidenav-toggler-line"></i>
                        </div>
                    </a>
                </li>
                <li class="nav-item dropdown pt-4">
                    <a href="javascript:;" class="nav-link text-body p-0 position-relative" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="material-icons cursor-pointer">
                            notifications
                        </i>

                        <span class="position-absolute top-5 start-100 translate-middle badge rounded-pill bg-danger border border-white small py-1 px-1">
                            <span class="small">11</span>
                            <span class="visually-hidden">unread notifications</span>
                        </span>
                    </a>
                </li> *@
                <span class="vr ms-2"></span>
               @*  <li class="nav-item dropdown">
                    <span class="ps-1 font-weight-bold text-xs">John Doe </span><img src="/assets/img/team-3.jpg" class="avatar ms-1">
                </li> *@
            </ul>
        </div>
        <ul class="navbar-nav justify-content-end me-3">
            <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                <a href="javascript: (void);" class="nav-link text-body p-0" @onclick="ToggleSidebar">
                    <div class="sidenav-toggler-inner">
                        <i class="sidenav-toggler-line"></i>
                        <i class="sidenav-toggler-line"></i>
                        <i class="sidenav-toggler-line"></i>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</nav>
@inject IJSRuntime JSRuntime
@code {
    [Parameter]
    public string? pagename { get; set; }
    [Parameter]
    public string? icon { get; set; }
    private async Task ToggleSidebar()
    {
        await JSRuntime.InvokeVoidAsync("toggleSidebar");
    }
}