Reimplementationof sidebar, now using blazor-state

Author: sjefvanleeuwen

src/Blazor.AdminLte/SideBar/SideBar.razor

@@ -1,14 +1,8 @@
 @namespace Blazor.AdminLte
-@inject IJSRuntime JS 
 <div class="sidebar">
     @ChildContent
 </div>
 @code {
     [Parameter]
     public RenderFragment ChildContent { get; set; }
-
-    protected override void OnAfterRender(bool firstRender)
-    {
-        base.OnAfterRender(firstRender);
-    }
 }

src/Blazor.AdminLte/SideBar/SideBarMenu.razor

@@ -1,27 +1,31 @@
 @namespace Blazor.AdminLte
+@implements IDisposable
 @inject IJSRuntime JS
-
+@inject NavigationManager nav
+@inherits BlazorState.BlazorStateComponent
 <!-- Sidebar Menu -->
 <nav class="mt-2">
-    <ul @ref="widget" class="nav nav-pills nav-sidebar flex-column" role="menu">
-        @*data-widget="treeview" role="menu" data-accordion="false"*@
-        <!-- Add icons to the links using the .nav-icon class
-        with font-awesome or any other icon font library -->
+    <ul class="nav nav-pills nav-sidebar flex-column" role="menu">
         @ChildContent
     </ul>
 </nav>
 <!-- /.sidebar-menu -->
 @code {
     [Parameter]
     public RenderFragment ChildContent { get; set; }
-    ElementReference widget { get; set; }
 
-    protected override Task OnAfterRenderAsync(bool firstRender)
+    protected override void OnInitialized()
+    {
+        nav.LocationChanged += LocationChanged;
+        base.OnInitialized();
+    }
+    void LocationChanged(object sender, LocationChangedEventArgs e)
+    {
+        Mediator.Send(new SideBarState.SelectMenuItemAction() { Id = "" }); ;
+    }
+    void IDisposable.Dispose()
     {
-        if (firstRender)
-        {
-            JS.InvokeVoidAsync("addClass", widget, "data-widget='treeview'");
-        }
-        return base.OnAfterRenderAsync(firstRender);
+        // Unsubscribe from the event when our component is disposed
+        nav.LocationChanged -= LocationChanged;
     }
 }

src/Blazor.AdminLte/SideBar/SideBarMenuItem.razor

@@ -1,56 +1,52 @@
 @namespace Blazor.AdminLte
+@inject NavigationManager nav;
 @implements IDisposable
-@inject NavigationManager Nav
+@inherits BlazorState.BlazorStateComponent
 <li class="nav-item">
-    <a href="@Link" class="nav-link @navLinkState">
+    <a href="@Link" class="nav-link @(State.GetState(Id).GetDescription<StyleAttribute>())" @onclick="Click" @onclick:preventDefault>
         <i class="nav-icon @Icon"></i>
         <p>
             @ChildContent
         </p>
     </a>
 </li>
 @code {
+
+    private string Id = Guid.NewGuid().ToString();
+
     [Parameter]
     public string Icon { get; set; }
     [Parameter]
     public string Link { get; set; } = "javascript:void(0)";
     [Parameter]
     public RenderFragment ChildContent { get; set; }
-    [Parameter]
-    public NavLinkState NavLinkState { get; set; }
 
-    private string navLinkState { get; set; }
+    private SideBarState State => GetState<SideBarState>();
 
-    private void LocationChanged(object sender, LocationChangedEventArgs args)
-    {
-        updateNavLinkState();
-    }
+    private SideBarState.SelectMenuItemAction action;
 
-    private void updateNavLinkState() {
-        if (Link.StartsWith("javascript"))
-            return;
-        NavLinkState = new Uri(Nav.Uri).PathAndQuery.Trim('/') == Link.Trim('/') ? NavLinkState.Active : NavLinkState.Inactive;
-        navLinkState = NavLinkState.GetDescription<StyleAttribute>();
-        StateHasChanged();
+    private void Click()
+    {
+        nav.NavigateTo(Link);
     }
 
-    protected override Task OnInitializedAsync()
+    protected override void OnInitialized()
     {
-        Nav.LocationChanged += LocationChanged;
-        return base.OnInitializedAsync();
+        // Subscribe to the event
+        nav.LocationChanged += LocationChanged;
+        base.OnInitialized();
     }
 
-    void IDisposable.Dispose()
+    void LocationChanged(object sender, LocationChangedEventArgs e)
     {
-        Nav.LocationChanged -= LocationChanged;
+        if (new Uri(nav.Uri).PathAndQuery.Trim('/') != Link.Trim('/'))
+            return;
+        Mediator.Send(new SideBarState.SelectMenuItemAction() { Id = Id }); ;
     }
 
-    protected override void OnAfterRender(bool firstRender)
+    void IDisposable.Dispose()
     {
-        if (firstRender)
-        {
-            updateNavLinkState();
-        }
-        base.OnAfterRender(firstRender);
+        // Unsubscribe from the event when our component is disposed
+        nav.LocationChanged -= LocationChanged;
     }
-}
+}

src/Blazor.AdminLte/SideBar/SideBarTreeView.razor

@@ -1,7 +1,7 @@
 @namespace Blazor.AdminLte
 @inject IJSRuntime JS  
 <li class="nav-item has-treeview menu-@(menuState)">
-    <a @ref="menu" href="javascript:void(0);" class='nav-link' @onclick="OnClick" >
+    <a @ref="menu" href="javascript:void(0);" class='nav-link' @onclick="OnClick">
         <i class="nav-icon @Icon"></i>
         <p>
             @Title
@@ -35,7 +35,7 @@
 
     public void SetActive()
     {
-        JS.InvokeVoidAsync("activateSideMenu", menu);
+       // JS.InvokeVoidAsync("activateSideMenu", menu);
     }
 
     private string menuState => MenuState.GetDescription<StyleAttribute>();

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

@@ -11,13 +11,8 @@ function hideMenu(el) {
 }
 
 function toggleSideMenu(el) {
-    if (el != prevMenu) {
-        $(prevMenu).slideToggle('fast');
-        prevMenu = el;
-    }
     $(el).slideToggle('fast');
-   
-}
+   }
 
 var prevActiveMenu = null;