User-720202620 posted
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:
- 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?
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
