improving side bar #24

Author: sjefvanleeuwen

src/Blazor.AdminLte.Site.Shared/MainLayout.razor

@@ -72,23 +72,23 @@
 </NavBar>
 <SideBarContainer>
     <BrandLogo Link="https://adminlte.io/" Logo="_content/Blazor.AdminLte.Site.Shared/dist/img/AdminLTELogo.png">AdminLTE 3</BrandLogo>
-    <SideBar IsFixed="true">
+    <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 MenuState="MenuState.Closed" Icon="fas fa-copy">
+        <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 MenuState="MenuState.Open" Icon="fas fa-tachometer-alt">
+        <SideBarTreeView Icon="fas fa-tachometer-alt">
             <Title>Starter Pages</Title>
             <Items>
                 <SideBarMenuItem Icon="far fa-circle" Link="starter-pages/active-page">
@@ -99,7 +99,7 @@
                 </SideBarMenuItem>
             </Items>
         </SideBarTreeView>
-        <SideBarTreeView MenuState="MenuState.Open" Icon="fas fa-tachometer-alt">
+        <SideBarTreeView  Icon="fas fa-tachometer-alt">
             <Title>Content Injections</Title>
             <Items>
                 <SideBarMenuItem Icon="far fa-circle" Link="injections/navbar-left">
@@ -110,7 +110,7 @@
                 </SideBarMenuItem>
             </Items>
         </SideBarTreeView>
-        <SideBarTreeView MenuState="MenuState.Closed" Icon="fas fa-tree">
+        <SideBarTreeView Icon="fas fa-tree">
             <Title>UI Elements</Title>
             <Items>
                 <SideBarMenuItem Icon="far fa-circle" Link="ui/general">
@@ -124,7 +124,7 @@
                 </SideBarMenuItem>
             </Items>
         </SideBarTreeView>
-        <SideBarTreeView MenuState="MenuState.Closed" Icon="fas fa-edit">
+        <SideBarTreeView Icon="fas fa-edit">
             <Title>Forms</Title>
             <Items>
                 <SideBarMenuItem Icon="far fa-circle" Link="forms/general">
@@ -135,15 +135,15 @@
                 </SideBarMenuItem>
             </Items>
         </SideBarTreeView>
-        <SideBarTreeView MenuState="MenuState.Closed" Icon="fas fa-table">
+        <SideBarTreeView  Icon="fas fa-table">
             <Title>Tables</Title>
             <Items>
                 <SideBarMenuItem Icon="far fa-circle" Link="simple-tables">
                     Simple Tables
                 </SideBarMenuItem>
             </Items>
         </SideBarTreeView>
-        <SideBarTreeView MenuState="MenuState.Closed" Icon="far fa-plus-square">
+        <SideBarTreeView Icon="far fa-plus-square">
             <Title>Extras</Title>
             <Items>
                 <SideBarMenuItem Icon="far fa-circle" Link="lockscreen">
@@ -183,8 +183,7 @@
         // no override; reset default to show parent menu content items.
         navBarLeftInjectableMenu.SetContent(null, false);
     }
-}
-@code {
+
     private DateTime dt = DateTime.Now;
 
     private void SeeAllMessages(Tuple<IDropdownFooter, MouseEventArgs> args)
@@ -197,4 +196,11 @@
         NavigationManager.NavigateTo("messages/see-all-notifications");
     }
 
+    protected override void OnAfterRender(bool isFirstRender)
+    {
+        JS.InvokeVoidAsync("sideBarFixed", true);
+        JS.InvokeVoidAsync("navBarFixed", true);
+        JS.InvokeVoidAsync("footerFixed", true);
+        base.OnAfterRender(isFirstRender);
+    }
 }

src/Blazor.AdminLte/SideBar/SideBar.razor

@@ -7,28 +7,8 @@
     [Parameter]
     public RenderFragment ChildContent { get; set; }
 
-    private bool _isFixed;
-
-    [Parameter]
-    public bool IsFixed
-    {
-        get
-        {
-            return _isFixed;
-        }
-        set
-        {
-            _isFixed = value;
-            JS.InvokeVoidAsync("sideBarFixed", _isFixed);
-        }
-    }
-
     protected override void OnAfterRender(bool firstRender)
     {
-        if (firstRender)
-        {
-            JS.InvokeVoidAsync("sideBarFixed", _isFixed);
-        }
         base.OnAfterRender(firstRender);
     }
 }

src/Blazor.AdminLte/SideBar/SideBarTreeView.razor

@@ -1,39 +1,56 @@
 @namespace Blazor.AdminLte
 @inject IJSRuntime JS  
 <li class="nav-item has-treeview menu-@(menuState)">
-    <a href="@Link" class="nav-link active" @onclick="OnClick">
+    <a @ref="menu" href="javascript:void(0);" class='nav-link' @onclick="OnClick" >
         <i class="nav-icon @Icon"></i>
         <p>
             @Title
             <i class="right fas @chevron"></i>
         </p>
     </a>
-    <ul @ref="ul" class="nav nav-treeview">
+    <ul @ref="ul" class="nav nav-treeview" @onclick="SetActive">
         @Items
     </ul>
 </li>
 @code {
-    [Parameter]
-    public string Link { get; set; } = "javascript:void(0)";
     [Parameter]
     public string Icon { get; set; }
     [Parameter]
     public RenderFragment Title { get; set; }
     [Parameter]
     public RenderFragment Items { get; set; }
 
-    [Parameter]
-    public MenuState MenuState { get; set; }
+    private MenuState _menuState { get; set; }
+
+    private MenuState MenuState {
+        get {
+            return _menuState;
+        } set {
+            if (_menuState == value)
+                return;
+            JS.InvokeVoidAsync("toggleSideMenu", ul);
+            _menuState = value;
+        }
+    }
+
+    public void SetActive()
+    {
+        JS.InvokeVoidAsync("activateSideMenu", menu);
+    }
 
     private string menuState => MenuState.GetDescription<StyleAttribute>();
     private string chevron { get; set; } = "fa-angle-left";
 
     private ElementReference ul { get; set; }
-    private bool Visible { get; set; }
+    private ElementReference menu { get; set; }
 
     private void OnClick()
     {
         MenuState = MenuState == MenuState.Open ? MenuState.Closed : MenuState.Open;
-        JS.InvokeVoidAsync("toggleSideMenu", ul);
+    }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
     }
 }

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

@@ -1,4 +1,8 @@
-function toggleMenu(el) {
+
+
+var prevMenu = null;
+
+function toggleMenu(el) {
     $(el).next().slideToggle('fast');
 }
 
@@ -7,10 +11,31 @@ function hideMenu(el) {
 }
 
 function toggleSideMenu(el) {
+    if (el != prevMenu) {
+        $(prevMenu).slideToggle('fast');
+        prevMenu = el;
+    }
     $(el).slideToggle('fast');
-    
+   
+}
+
+var prevActiveMenu = null;
+
+function activateSideMenu(el) {
+    if (el == prevActiveMenu)
+        return;
+     $(prevActiveMenu).removeClass("active");
+     $(el).addClass("active");
+     prevActiveMenu = el;
 }
 
+
+function deactivateSideMenu() {
+    $('aside').find("li").each(function () { $(this).find("a").removeClass("active") });
+}
+
+
+
 function addClass(el, _class) {
     $(el).addClass(_class);
   //  $(el).collapse();
@@ -74,3 +99,21 @@ function sideBarFixed(isFixed)
     else
         $("body").removeClass("layout-fixed");
 }
+
+function navBarFixed(isFixed) {
+    if (isFixed) {
+        $("body").addClass("layout-navbar-fixed");
+        $("body").trigger("resize");
+    }
+    else
+        $("body").removeClass("layout-navbar-fixed");
+}
+
+function footerFixed(isFixed) {
+    if (isFixed) {
+        $("body").addClass("layout-footer-fixed");
+        $("body").trigger("resize");
+    }
+    else
+        $("body").removeClass("layout-footer-fixed");
+}