Automatically collapse the side bar on click. #34

Author: sjefvanleeuwen

src/Blazor.AdminLte/NavBar/NavBarMenuItem.razor.cs

@@ -1,11 +1,16 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
+using Microsoft.JSInterop.Implementation;
 using System;
+using System.Dynamic;
 
 namespace Blazor.AdminLte
 {
     public partial class NavBarMenuItem : INavBarMenuItem
     {
+        [Inject]
+        public Microsoft.JSInterop.IJSRuntime JS { get; set; }
         [Parameter]
         public string Link { get; set; } = "";
         [Parameter]

src/Blazor.AdminLte/SideBar/SideBarMenuItem.razor

@@ -2,6 +2,7 @@
 @inject NavigationManager nav;
 @implements IDisposable
 @inherits BlazorState.BlazorStateComponent
+@inject IJSRuntime JS;
 <li class="nav-item">
     <a href="@Link" class="nav-link @(State.GetState(Id).GetDescription<StyleAttribute>())" @onclick="Click" @onclick:preventDefault>
         <i class="nav-icon @Icon"></i>
@@ -24,6 +25,7 @@
     private void Click()
     {
         nav.NavigateTo(Link);
+        JS.InvokeVoidAsync("toggleAside");
     }
 
     protected override void OnInitialized()

src/Blazor.AdminLte/wwwroot/js/interop.js

@@ -29,7 +29,11 @@ function deactivateSideMenu() {
     $('aside').find("li").each(function () { $(this).find("a").removeClass("active") });
 }
 
-
+function toggleAside() {
+    $('#sidebar-overlay').click();
+    //console.log("hi");
+    //$('aside').slideToggle();
+}
 
 function addClass(el, _class) {
     $(el).addClass(_class);