Unable to hide sidebar with smallest screensize (Phone)
Ch4h3d opened this issue · 2 comments
Ch4h3d commented
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 © 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 commented
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 commented
How could I miss that, works like a charm, thank you!