Hello,

After upgrading from 0.12 to 0.13 (or 0.15 for that matter) I'm getting this error:

AmbiguousMatchException: Ambiguous match found. System.RuntimeType.GetPropertyImpl(string name, BindingFlags bindingAttr, Binder binder, Type returnType, Type[] types, ParameterModifier[] modifiers) System.Type.GetProperty(string name, BindingFlags bindingAttr) Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, string parameterName) Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ref ParameterView parameters, object target) Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(object target) Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters) Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(ref DiffContext diffContext, int frameIndex) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(ref DiffContext diffContext, int frameIndex) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(ref DiffContext diffContext, int oldStartIndex, int oldEndIndexExcl, int newStartIndex, int newEndIndexExcl) Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, int componentId, ArrayRange<RenderTreeFrame> oldTree, ArrayRange<RenderTreeFrame> newTree) Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment) Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry) Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue() Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception) Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue() Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender() Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(int componentId, RenderFragment renderFragment) Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged() Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync() Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync() Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception) Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task) Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters) Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(int componentId, ParameterView initialParameters) Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.CreateInitialRenderAsync(Type componentType, ParameterView initialParameters) Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters) Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext+<>c__11<TResult>+<<InvokeAsync>b__11_0>d.MoveNext() Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType) Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedServerComponentAsync(HttpContext context, ServerComponentInvocationSequence invocationId, Type type, ParameterView parametersCollection) Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, object parameters) Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output) Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, int i, int count) AgriDerby.Pages.Pages__Host.<ExecuteAsync>b__15_1() in _Host.cshtml + <component type="typeof(App)" render-mode="ServerPrerendered" /> Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.SetOutputContentAsync() AgriDerby.Pages.Pages__Host.ExecuteAsync() in _Host.cshtml + Layout = null; Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context) Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, bool invokeViewStarts) Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context) Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode) Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0<TFilter, TFilterAsync>(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext<TFilter, TFilterAsync>(ref State next, ref Scope scope, ref object state, ref bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters() Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync() Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope) Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger) Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context) Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context) Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

If I got back to 0.12 the issue goes away.
As far as I have researched it looks like it is an Identity issue (AspNetCore.Identity).

Do you have any idea what could be the cause of this issue.

Edit:
Removing the SideBar component gets rid of this issue, I think the problem is within this component.

Thanks in advance.

Im getting this error while trying to setup a simple test project.

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot provide a value for property 'navBarLeftInjectableMenu' on type 'Test.Shared.MainLayout'. There is no registered service of type 'Blazor.AdminLte.NavBarLeftInjectableMenu'.
System.InvalidOperationException: Cannot provide a value for property 'navBarLeftInjectableMenu' on type 'Test.Shared.MainLayout'. There is no registered service of type 'Blazor.AdminLte.NavBarLeftInjectableMenu'.
  at Microsoft.AspNetCore.Components.ComponentFactory+<>c__DisplayClass5_0.<CreateInitializer>g__Initialize|2 (System.IServiceProvider serviceProvider, Microsoft.AspNetCore.Components.IComponent component) <0x2cb33f8 + 0x000e6> in <filename unknown>:0

I can see that the servicefactory is adding NavBarLeftInjectableMenu

services.AddScoped<NavBarLeftInjectableMenu>();

Im running a server and a client, should package Blazorized.AdminLte be referenced by both Client and Server?

Hi, I upgrade to 0.1.3 (not the latest as my code doesn't support 5.0 yet) but I'm getting the following error when starting the application

blazor.server.js:19 [2020-11-23T16:12:13.589Z] Error: System.Reflection.AmbiguousMatchException: Ambiguous match found. at System.RuntimeType.GetPropertyImpl(String name, BindingFlags bindingAttr, Binder binder, Type returnType, Type[] types, ParameterModifier[] modifiers) at System.Type.GetProperty(String name, BindingFlags bindingAttr) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, String parameterName) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target) at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target) at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange1 oldTree, ArrayRange1 newTree) at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment) at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry) at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

When I revert back to 0.12 the issue goes away.

I have several other packages in my project e.g.

1. https://github.com/ant-design-blazor/ant-design-blazor
2. Telerik.UI.for.Blazor

Top Nav and Footer should be hidden when going in full overlay mode.

its possible to set the layout to fixed sidebar with admin lte scrollbar ?

Hi @sjefvanleeuwen,

Could you tell me how I can add a css class to the Table element?

Regards,
Jérôme.

Discussion:
Currently the Card Component does not support a Form tag. Some of the dem pages have a Form tag around the card-body and card-footer with form fields in the card-body and a submit button in the Footer.
This feels very content specific so for now you could aencapsulate the entire card with a form tag but perhaps this will be problematic in the future.
tag: enhancement, question

Hi guys,

I'm having a problem only when I publish my app (details below), I think that this is stopping me to "install" the app using PWA, the weird thing is that on my local machine all works fine.

Could you please have any clue that might help me solve the issue?

Failed to find a valid digest in the 'integrity' attribute for resource 'https://***/BlazorWMS/_content/Blazorized.AdminLte.Content/plugins/raphael/.eslintrc.js' with computed SHA-256 integrity '47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='. The resource has been blocked.
Unknown error occurred while trying to verify integrity.
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch

Thanks.

Would really be great if this would allow the user to select a theme when using an app built with these components like the actual AdminLTE. I was able to get the dark them enabled by extracting all the .dark-mode CSS out of the AdminLTE.css file. This still left some issues like the Navbar not being able to select a dark mode that I can figure out. The page title still wanted to be dark because of an !important flag in this component in the .text-dark CSS.

Hello,

is there a way how to apply a skin, like in https://adminlte.io/docs/2.4/layout ?

Thank you.

Hello, do you have an example with WebAssembly running using the package ?
I created the new project, add the Nuget Package but I do not know how to use the components.
Thanks !

SideBarTreeView does not animate chevron when clicked, it should either show up or down (expanded/contracted)

localhost-1605165373725.log

[2020-11-12T07:15:27.856Z] Error: System.Reflection.AmbiguousMatchException: Ambiguous match found.
at System.RuntimeType.GetPropertyImpl(String name, BindingFlags bindingAttr, Binder binder, Type returnType, Type[] types, ParameterModifier[] modifiers)
at System.Type.GetProperty(String name, BindingFlags bindingAttr)
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, String parameterName)
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)
at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target)
at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange1 oldTree, ArrayRange1 newTree)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

Hi,

Can you create a detailed documentation regarding the available components along with simple examples how to use them?

Thanks,
Vladislav

Is just noticed the Column component only supports 1 Size. Usualy to make a website/app responsive you need to be able to set Widths for different Sizes, like so: <div class="col-sm-6 col-md3"> . To be able to use this the current Width and Size parameters are not sufficient. Also I think Bootstrap 4 added generic col-6 type widths as well.
Since responsiveness is important how should we implement this?
I see Blazorise.Bootstrap does not support this type of column style usage either. Is this not a thing anymore?

tag: enhancement

I am a beginner, when following your directions nothing renders with adminlte. I installed both nuget packages and nothing. Then I then added services.AddAdminLte(); to Startup.cs and copied your MainLayout and Host into mine changing the namespaces.

I get an error not finding @Inject NavBarLeftInjectableMenu navBarLeftInjectableMenu.

Can you post a standalone server solution only? or show me how to code the class for injecting navbarleft? Believe me I tried but after 3 hours I am done.

Can we add a link property to the CarouselItem ?

Dear sjefvanleeuwen,
I meant, how to enable fixed sidebar with the adminlte 3.x scrollbar ?
isn't a system scrollbar uses (os-scrollbar)
https://adminlte.io/themes/v3/pages/layout/fixed-sidebar.html

side panel doesn't close in mobile mode in Blazor Server.
How can we fix

@jbennink

Refering to our online discussion.

For bread crumbs the idea right now, is to include a Title Propery as part of a PageBase where all pages inherit from. A global service is injected in startup.cs as part of the Service Collection initialized in the services.AddAdminLte() extension. This has two positive effects:

1. The breadcrumb then shows the /home/{title} of the page.
2. The ContentHeader, as is available in the sample pages, can also reuse the Page Title property from the PageBase

Your thoughts?

Please integrate a custom file upload and javascript interop library that supports progress indication

On the CarouselItem can we add target e.g. target=”_blank” to allow the Link to open in a new window or tab?

For MVP, The date range picker should have at least locale settings in its configuration settings. Default bootstrap only renders US Date formats.

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.

For cohesiveness in application design, i'd like to have layout component rules.

Hi, can we add the Link property to the SideBarUserPanel component? I would like when the user clicks it to display their user details?

Disregard - it was a config issue on my side. All resolved.

Do I need to clone this repo if I want to have the initial look-and-feel of the dashboard? And if yes, in which project do I need to add my pages and controllers?

I have several SideBarMenuItem and they are shown active "Blue" when I click on each item. Now I have a SideBarTreeView and it's menu state is set to open but the color of the item looks active too "Blue" now when I click on one of the sub items under the SideBarTreeView the color of the sub items are gray not "Blue".

Can I change the SideBarTreeView color to gray and its sub items to "Blue" when they are active? This seems more consistent with selected menu items?

Great job in the conversion, just testing and found this annoying difference.

When the side bar is in a collapsed state.

Clicking SideBarMenuItem menu item does not automatically collapse.
It is left for the user to move move away from side bar before the collapse occurs.

This is different behavior to AdminLTE.

Hi, I just have notice that the navbar is no longer sticky even if it's set to layout-navbar-fixed

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

Please advise. Thank you.

Side bar dropdown lists (SideBarTreeView ) fails after update to .NET 5 official release.
The exception is:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Arg_AmbiguousMatchException
System.Reflection.AmbiguousMatchException: Arg_AmbiguousMatchException
at System.RuntimeType.GetPropertyImpl(String name, BindingFlags bindingAttr, Binder binder, Type returnType, Type[] types, ParameterModifier[] modifiers)
at System.Type.GetProperty(String name, BindingFlags bindingAttr)
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, String parameterName)
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)
at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target)
at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.UpdateRetainedChildComponent(DiffContext& diffContext, Int32 oldComponentIndex, Int32 newComponentIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence(DiffContext& diffContext, Int32 oldFrameIndex, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence(DiffContext& diffContext, Int32 oldFrameIndex, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange1 oldTree, ArrayRange1 newTree)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

Although all the button on the Buttons.razor page uses the "btn-block" class to stretch the button to all the available space, when the Button component is used on other pages not always is the 100% stretch desirable.

I propose removing the "btn-block" class and adding it back via some configurable parameter.

It looks the OnMaximize event is not called, but the Refresh event is called instead.

private void DoOnMaximize(MouseEventArgs args)
{
    IsMaximized = !IsMaximized;
    OnRefresh.InvokeAsync(new Tuple<ICardTools, MouseEventArgs>(this, args));
}

Hi, i noticed that in my blazor webassembly project (.Net 5.0) the sidebar fully disappear on every page change even if I open it.

Hello,

Would you please point me to an example which uses this?
Or could you please explain how it should be used? I don't seem to be able to make it work.

Thanks in advance.

Regards.

As seen in the AdminLte template on the widgets page the Chart widget uses a card and places chat specific buttons. Also for my own use I use a card to hold a result list that can be changed with a date picker that I placed the card-tools area.
The card-tools area should be open to more that the standard options shown in the default Cards example

Highlight only selected/active SideBarMenuTree (Blue). This will need some javascript, as the elements within the sidebar are renderfragments.

Cannot change page after submit some file in the General Form

I would like to thank you for your work, however even the best projects do not shine without proper documentation like "starter guide".

So could you provide correct and complete steps assuming user/dev created Blazor solution? What to do next?

Just in case somebody would think I am lazy, I am not, here are my steps, but I doubt they are 100% solid.

• download zip file from https://adminlte.io/
• unpack it
• copy dist and plugins directory to your wwwroot directory (in solution)
• install Blazorized.AdmintLte and Blazorized.AdmintLte.Content
• copy entire content of index.html page as described on the main page
• same thing for MainLayout
• fix all the links removing AdminLte prefix
• in Program.Main of hosting project add

  builder.Services.AddAdminLte();

• donwload interops.js from https://raw.githubusercontent.com/sjefvanleeuwen/blazor-adminlte/master/src/Blazor.AdminLte/wwwroot/js/interop.js
• download site.css from https://raw.githubusercontent.com/sjefvanleeuwen/blazor-adminlte/master/src/Blazor.AdminLte.Site.Shared/wwwroot/css/site.css
• download manifest json from https://raw.githubusercontent.com/sjefvanleeuwen/blazor-adminlte/master/src/Blazor.AdminLte.Wasm/wwwroot/manifest.json
• download icon-512.png from https://raw.githubusercontent.com/sjefvanleeuwen/blazor-adminlte/master/src/Blazor.AdminLte.Wasm/wwwroot/icon-512.png
• donwload service-worker.js https://raw.githubusercontent.com/sjefvanleeuwen/blazor-adminlte/master/src/Blazor.AdminLte.Wasm/wwwroot/service-worker.js -- please note it is placed directly in the wwwroot

At this point solution works without displaying any errors, but I am afraid that considering the amount of manual work I missed some automatic step and thus I had to this.

So in short, start guide would be great addition to this project :-).

Some people experience SHA errors when publishing. For example the .eslintrc.js, which are development configuration files.
https://github.com/sjefvanleeuwen/blazor-adminlte/tree/master/src/Blazor.AdminLte.Content/wwwroot/plugins/raphael

These files can be removed. Preferably leave the .min and .map files in the distribution. See: #40

Also found an issue when setting only the Width. In Bootstrap you can set col-xs-6 or col-6 and the two mean the same. We might want to fix that as no only supplying Width give col--6 and not supplying both give col-- which are both not rendered correctly.

Originally posted by @jbennink in #6 (comment)

"Fluent" as C#/code, not CSS/Bootstrap.

Please provide fluent API -- this would allow easy way to add styling for example. If you take a look at for example FluentColumn this is basically closed class. But with Add/With method one could add extra styling in easy way (or maybe I don't know how to add them easy way ;-) ).

    public FluentColumn Add(string classes) => new FluentColumn(classes+" ",this.ToString());

Such method is not mutable, all other (already existing methods) could be rewritten avoiding mutability problem, and there would be easy way to express extra styling, like:

            var cls = col.xs.auto.Add("align-self-end");

Hello,

Thanks for your work.

I would like to use your project but unfortunately after adding the nuget "Blazorized.AdminLte 0.1.8" the line services.AddAdminLte() is not recognized, ILayoutManager and NavBarLeftInjectableMenu as well.

Could you help me please?

Best Regards,

When you open some item from sidemenu on mobile, after click on menu item, menu remains open, and you must click somewhere to close it. It would be more user friendly if sidemenu close after click?
Do you maybe have some solution for this?
Thanks

How do I set the active SideBarMenuItem ? e.g. when the app loads my default page is abc but I'm not sure how to set the menu item as active? This issue also occurs if you refresh the page on a specific route?

How we can use AdminLte's Toastrs ?

I followed the README to add blazor-adminlte to my Blazor WASM project, but it seems to be missing some CSS and other resources. I believe I would have to add the shared project of the repo, is there a full list of all the resources I have to add?

Use RenderFragments instead of decimal Numbers in infoboxes (dashboard) as some user add content such as: timespans.

I can't insert into NavBarMenuItem a button because it is wrapped with anchor.
Replicate:
<button class="btn btn-link" @OnClick="BeginSignOut">Esci

Suggestion:
NavBarMenuItem can support onclick.