Unable to hide sidebar with smallest screensize (Phone)

[Ch4h3d]

Hey,

im having trouble with the sidebar using the template in a PWA application.

At launch the sidebar is open and is not closable with a click in the window or by selecting a link. Sometimes the sidebar closes itself upon selecting a link from the navbar but not always:

MainLayout.razor (from example/blazor wasm template):

@using Blazor.AdminLte
@inherits LayoutComponentBase
@inject NavigationManager NavigationManager
@inject IJSRuntime JS
@inject ILayoutManager layoutManager
@inject NavBarLeftInjectableMenu navBarLeftInjectableMenu

<NavBar>
    <NavBarLeft>
        @if (!navBarLeftInjectableMenu.OverrideParentContent)
        {
            <NavBarMenuItem Link="/">Home</NavBarMenuItem>
            <NavBarMenuItem OnClick="HandleContent">Content</NavBarMenuItem><!-- defaults to # -->
        }
        @navBarLeftInjectableMenu.content <!-- Injectable for custom menu content per page -->
    </NavBarLeft>
    <NavBarSearch></NavBarSearch>
    <NavBarRight>
        <NavBarDropDown>
            <NavBarBadge Color="Color.Danger" Icon="far fa-comments">4</NavBarBadge>
            <NavBarDropDownMenu>
                <NavBarDropDownMenuItem>
                    <UserMessage DateTime="dt.AddMinutes(-2)" ProfilePicture="_content/Blazor.AdminLte.Site.Shared/dist/img/user7-128x128.jpg" Icon="fas fa-star">
                        <UserName>Patricia Maundrell</UserName>
                        <Message>Follow up</Message>
                    </UserMessage>
                </NavBarDropDownMenuItem>
                <DropdownDivider />
                <NavBarDropDownMenuItem>
                    <UserMessage DateTime="dt.AddHours(-4)" ProfilePicture="_content/Blazor.AdminLte.Site.Shared/dist/img/user1-128x128.jpg" Icon="fas fa-star" IconColor="Color.Warning">
                        <UserName>Brad Diesel</UserName>
                        <Message>Call me whenever you can...</Message>
                    </UserMessage>
                </NavBarDropDownMenuItem>
                <DropdownDivider />
                <NavBarDropDownMenuItem>
                    <UserMessage DateTime="dt.AddDays(-8)" ProfilePicture="_content/Blazor.AdminLte.Site.Shared/dist/img/user8-128x128.jpg" Icon="fas fa-star" IconColor="Color.Danger">
                        <UserName>John Pierce</UserName>
                        <Message>I got your message bro</Message>
                    </UserMessage>
                </NavBarDropDownMenuItem>
                <DropdownDivider />
                <NavBarDropDownMenuItem>
                    <UserMessage DateTime="dt.AddDays(-31)" ProfilePicture="_content/Blazor.AdminLte.Site.Shared/dist/img/user3-128x128.jpg" Icon="fas fa-star">
                        <UserName>Nora Silvester</UserName>
                        <Message>The subject goes here</Message>
                    </UserMessage>
                </NavBarDropDownMenuItem>
                <DropdownDivider />
                <DropdownFooter OnClick="SeeAllMessages">See All Messages</DropdownFooter>
            </NavBarDropDownMenu>
        </NavBarDropDown>
        <NavBarDropDown>
            <NavBarBadge Color="Color.Warning" Icon="far fa-bell">15</NavBarBadge>
            <NavBarDropDownMenu>
                <DropdownHeader>15 Notifications</DropdownHeader>
                <DropdownDivider></DropdownDivider>
                <NotificationMessage DateTime="dt.AddMinutes(-3)" Icon="fas fa-envelope mr-2">
                    <Message>4 new messages</Message>
                </NotificationMessage>
                <DropdownDivider></DropdownDivider>
                <NotificationMessage DateTime="dt.AddHours(-12)" Icon="fas fa-users mr-2">
                    <Message>8 friend requests</Message>
                </NotificationMessage>
                <DropdownDivider></DropdownDivider>
                <NotificationMessage DateTime="dt.AddDays(-2)" Icon="fas fa-file mr-2">
                    <Message>3 new reports</Message>
                </NotificationMessage>
                <DropdownDivider></DropdownDivider>
                <DropdownFooter OnClick="SeeAllNotifications">See All Notifications</DropdownFooter>
            </NavBarDropDownMenu>
        </NavBarDropDown>
        <NavBarSideBarControl></NavBarSideBarControl>
    </NavBarRight>
</NavBar>
<SideBarContainer>
    <BrandLogo Link="https://adminlte.io/" Logo="_content/Blazor.AdminLte.Site.Shared/dist/img/AdminLTELogo.png">AdminLTE 3</BrandLogo>
    <SideBar>
        <!-- Sidebar user panel (optional) -->
        <SideBarUserPanel ImageEffect="ImageEffect.Circle" Link="starter-pages/user-page" Elevation="Elevation.Three" UserImage="_content/Blazor.AdminLte.Site.Shared/dist/img/user2-160x160.jpg">Alexander Pierce</SideBarUserPanel>
        @*<SideBarSearch></SideBarSearch>*@
    <SideBarMenu>
        <SideBarMenuItem Link="widgets" Icon="fas fa-th">
            Widgets
        </SideBarMenuItem>
        <SideBarTreeView Icon="fas fa-copy">
            <Title>Layout Options</Title>
            <Items>
                <SideBarMenuItem Icon="far fa-circle" Link="layout/grid-system">
                    Grid System
                </SideBarMenuItem>
            </Items>
        </SideBarTreeView>
        <SideBarTreeView Icon="fas fa-tachometer-alt">
            <Title>Starter Pages</Title>
            <Items>
                <SideBarMenuItem Icon="far fa-circle" Link="starter-pages/active-page">
                    Active Page
                </SideBarMenuItem>
                <SideBarMenuItem Icon="far fa-circle">
                    Inactive Page
                </SideBarMenuItem>
            </Items>
        </SideBarTreeView>
        <SideBarTreeView  Icon="fas fa-tachometer-alt">
            <Title>Content Injections</Title>
            <Items>
                <SideBarMenuItem Icon="far fa-circle" Link="injections/navbar-left">
                    NavBar Left
                </SideBarMenuItem>
                <SideBarMenuItem Icon="far fa-circle" Link="injections/navbar-left-override">
                    NavBar Left Override
                </SideBarMenuItem>
            </Items>
        </SideBarTreeView>
        <SideBarTreeView Icon="fas fa-tree">
            <Title>UI Elements</Title>
            <Items>
                <SideBarMenuItem Icon="far fa-circle" Link="ui/general">
                    General
                </SideBarMenuItem>
                <SideBarMenuItem Icon="far fa-circle" Link="ui/buttons">
                    Buttons
                </SideBarMenuItem>
                <SideBarMenuItem Link="ui/navbar" Icon="far fa-circle">
                    Navbar & Tabs
                </SideBarMenuItem>
            </Items>
        </SideBarTreeView>
        <SideBarTreeView Icon="fas fa-edit">
            <Title>Forms</Title>
            <Items>
                <SideBarMenuItem Icon="far fa-circle" Link="forms/general">
                    General Elements
                </SideBarMenuItem>
                <SideBarMenuItem Icon="far fa-circle" Link="forms/advanced">
                    Advanced Elements
                </SideBarMenuItem>
            </Items>
        </SideBarTreeView>
        <SideBarTreeView  Icon="fas fa-table">
            <Title>Tables</Title>
            <Items>
                <SideBarMenuItem Icon="far fa-circle" Link="simple-tables">
                    Simple Tables
                </SideBarMenuItem>
            </Items>
        </SideBarTreeView>
        <SideBarTreeView Icon="far fa-plus-square">
            <Title>Extras</Title>
            <Items>
                <SideBarMenuItem Icon="far fa-circle" Link="lockscreen">
                    Lockscreen
                </SideBarMenuItem>
                <SideBarMenuItem Icon="far fa-circle" Link="404">
                    Error 404
                </SideBarMenuItem>
                <SideBarMenuItem Icon="far fa-circle" Link="500">
                    Error 500
                </SideBarMenuItem>
            </Items>
        </SideBarTreeView>
        <SideBarMenuItem Link="simple-link" Icon="fas fa-th">
            Simple Link
            <span class="right badge badge-danger">New</span>
        </SideBarMenuItem>
    </SideBarMenu>
    </SideBar>
</SideBarContainer>
<ContentWrapper>
    @Body
</ContentWrapper>
<ControlSideBar>Hello World!</ControlSideBar>
<MainFooter>
    <Default>
        <strong>Copyright &copy; 2014-2020 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
    </Default>
    <Right>
        Blazorized by Sjef van Leeuwen
    </Right>
</MainFooter>
@code {
    protected override void OnParametersSet()
    {
        // content = null; for refreshing custom menu injectables per page.
        // no override; reset default to show parent menu content items.
        navBarLeftInjectableMenu.SetContent(null, false);
    }

    private DateTime dt = DateTime.Now;

    private void SeeAllMessages(Tuple<IDropdownFooter, MouseEventArgs> args)
    {
        NavigationManager.NavigateTo("messages/see-all-messages");
    }

    private void HandleContent(Tuple<INavBarMenuItem, MouseEventArgs> args)
    {
        NavigationManager.NavigateTo("messages/see-all-messages");
    }

    private void SeeAllNotifications(Tuple<IDropdownFooter, MouseEventArgs> args)
    {
        NavigationManager.NavigateTo("messages/see-all-notifications");
    }

    protected override void OnAfterRender(bool isFirstRender)
    {
        layoutManager.IsFooterFixed = true;
        layoutManager.IsNavBarFixed = true;
        layoutManager.IsSideBarFixed = true;
        base.OnAfterRender(isFirstRender);
    }
}

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorDisplayer</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />


    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="_content/Blazorized.AdminLte.Content/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="_content/Blazorized.AdminLte.Content/dist/css/adminlte.min.css">
    <!-- daterange picker -->
    <link rel="stylesheet" href="_content/Blazorized.AdminLte.Content/plugins/daterangepicker/daterangepicker.css">
    <!-- overlay scrollbars -->
    <link type="text/css" href="_content/Blazorized.AdminLte.Content/plugins/overlayScrollbars/css/OverlayScrollbars.min.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
    <script src="_content/Blazorized.AdminLte.Content/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="_content/Blazorized.AdminLte.Content/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="_content/Blazorized.AdminLte.Content/dist/js/adminlte.min.js"></script>
    <script src="_content/Blazorized.AdminLte/js/interop.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
    <script src="_content/Blazorized.AdminLte.Content/plugins/moment/moment-with-locales.js"></script>
    <script src="_content/Blazorized.AdminLte.Content/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- overlay scrollbars -->
    <script src="_content/Blazorized.AdminLte.Content/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
</body>

</html>

program.cs:

using BlazorDisplayer.Client;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using News.Stack.FrontProxy;
using Blazor.AdminLte;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

var baseUrl = builder.Configuration.GetValue<string>("frontendBackendUrl");
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddHttpClient("BlazorDisplayer.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

// Supply HttpClient instances that include access tokens when making requests to the server project
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazorDisplayer.ServerAPI"));

builder.Services.AddScoped<ArticleService>((provider) => new ArticleService(builder.HostEnvironment.BaseAddress, provider.GetService<HttpClient>()));

builder.Services.AddOidcAuthentication(options =>
{                
    //options.ProviderOptions.Authority = "https://localhost:5001/";
    // Configure your authentication provider options here.
    // For more information, see https://aka.ms/blazor-standalone-auth
    builder.Configuration.Bind("oidc", options.ProviderOptions);
});

builder.Services.AddApiAuthorization();
builder.Services.AddAdminLte();
await builder.Build().RunAsync();

Is there something I'm missing? I'll give #53 a try and use a newer Release of AdminLTE.

[daniellor]

Hi,

Try change index.html, add class wrapper.

<body>
  <div class="wrapper">
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
</div>

.....
</body>

[Ch4h3d]

How could I miss that, works like a charm, thank you!