I am developing a blazor application that has Sub-Menus in the NavMenu.razor page, these work fine but have introduced some issue that i need asssitance with:
How do I collapse a sub menu that is open when i click on another menu item?
How do I get the height of the NavMenu to always be the page height as a minimum or if scroll bars are introduced when you open sub menus to be that height, I tried setting the sidebar height in the site.css file to 100% but when all menu items in the Sidebar
are collapsed the NavMenu height is only 1/2 the page?
Member
8 Points
200 Posts
Blazor Collapse submenus
Jun 25, 2020 03:00 AM|Pztydr|LINK
Hi,
I am developing a blazor application that has Sub-Menus in the NavMenu.razor page, these work fine but have introduced some issue that i need asssitance with:
Content of the Navmenu is below:
<div class="top-row pl-4 navbar navbar-dark"> <a class="navbar-brand" href="">Work-Manager</a> <button class="navbar-toggler" @onclick="ToggleNavMenu"> <span class="navbar-toggler-icon"></span> </button> </div> <div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> <ul class="nav flex-column"> <li class="nav-item px-3"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> @*<span class="oi oi-home" aria-hidden="true"></span> Home*@ <span class="mat material-icons">home</span> Home </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="" @onclick="()=>expandSubMenu= !expandSubMenu"> @*<span class="oi oi-briefcase" aria-hidden="true"></span> Office*@ <span class="mat material-icons">business_center</span> Office </NavLink> @if (expandSubMenu) { //expandTimeSubMenu = !expandSubMenu; <ul class="nav flex-column"> <li class="nav-item px-3"> <NavLink class="nav-link" href="/Office/Calendar"> <span class="oi oi-calendar" aria-hidden="true"></span> Calendar </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="/Office/Contacts"> <span class="mat material-icons">contacts</span> Contacts </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="oi oi-envelope-closed" aria-hidden="true"></span> Email </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="oi oi-paperclip" aria-hidden="true"></span> Notes </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="oi oi-phone" aria-hidden="true"></span> Phone List </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="oi oi-document" aria-hidden="true"></span> Documents </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="oi oi-expand-down" aria-hidden="true"></span> Import Employees </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="oi oi-person" aria-hidden="true"></span> Employee Position </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="oi oi-share-boxed" aria-hidden="true"></span> Resources </NavLink> </li> </ul> } </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="" @onclick="()=>expandTimeSubMenu= !expandTimeSubMenu"> <span class="oi oi-clock" aria-hidden="true"></span> Time Management </NavLink> @if (expandTimeSubMenu) { //expandSubMenu = !expandTimeSubMenu; <ul class="nav flex-column"> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="oi oi-calendar" aria-hidden="true"></span> Leave </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="mat material-icons">schedule</span> Schedule </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="mat material-icons">event_note</span> TimeSheet </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="mat material-icons">more_time</span> Toil </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="mat material-icons">assignment</span> Report Weekly </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="mat material-icons">assignment</span> Report All </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="mat material-icons">assignment</span> Report by Period </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href=""> <span class="mat material-icons">settings</span> Time Options </NavLink> </li> </ul> } </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="counter"> <span class="oi oi-plus" aria-hidden="true"></span> Counter </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="fetchdata"> <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="Administration"> <span class="mat material-icons">people_alt</span> Administration </NavLink> </li> </ul> </div> @code { private bool collapseNavMenu = true; private bool expandSubMenu; private bool expandTimeSubMenu; private string NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } }Regards
Peter
Member
8 Points
200 Posts
Re: Blazor Collapse submenus
Jul 01, 2020 06:17 AM|Pztydr|LINK
Hi,
My issue has been resolved after implementing a version of AshProgHelp's "Load Menu & Sub Menu From Database in Blazor | Blazor Dynamic Menu"
If anyone is interested here's the link https://www.youtube.com/watch?reload=9&v=aGn3oYAmj4w
regards
Peter