Dear,
the blazor menu UI adapt it self for hamburguer menu when mobile?
best,
Jeff
---
ADMIN EDIT
I have attached to this post a sample implementation that you can use as base. Another option is to add more conditional markup to remove the menu altogether and replace it with another structure for small screens. A third option is to use the Drawer component as it collapses anyway (see here and here).
----
At the moment, when you click a menu item it does not hide.
A method can be exposed to hide the expanded items that can be invoked from the OnClick handler.
---
ADMIN EDIT
Here is a potential workaround - when the menu item is clicked, we use a little bit of JS to go over the menu items at the root and make the browser think that the user moved the mouse away from them which is the signal for the menu dropdowns to hide. Do test this carefully before using in production, though.
@inject IJSRuntime _js
@* Move this script together with other scripts in the project, it is here to make the snippet shorter *@
<script suppress-error="BL9992">
function closeMenu() {
setTimeout(function () {
var mouseLeaveEvent = new Event('mouseleave');
var rootNodes = document.querySelectorAll("li.k-menu-item");
rootNodes.forEach(function (elem) { elem.dispatchEvent(mouseLeaveEvent); })
}, 30);
}
</script>
<TelerikMenu Data="@MenuItems"
ItemsField="@nameof(MenuItem.SubSectionList)"
TextField="@nameof(MenuItem.Section)"
UrlField="@nameof(MenuItem.Page)"
OnClick="@((MenuItem item) => OnClickHandler(item))">
</TelerikMenu>
@code {
public List<MenuItem> MenuItems { get; set; }
async Task OnClickHandler(MenuItem item)
{
await _js.InvokeVoidAsync("closeMenu");
}
public class MenuItem
{
public string Section { get; set; }
public string Page { get; set; }
public List<MenuItem> SubSectionList { get; set; }
}
protected override void OnInitialized()
{
MenuItems = new List<MenuItem>()
{
new MenuItem()
{
Section = "fetchdata",
Page = "fetchdata"
},
new MenuItem()
{
Section = "counter",
Page = "counter"
},
// sample URLs for SPA navigation
new MenuItem()
{
Section = "Company",
SubSectionList = new List<MenuItem>()
{
new MenuItem()
{
Section = "Overview",
Page = "fetchdata"
},
new MenuItem()
{
Section = "Events",
Page = "fetchdata"
},
new MenuItem()
{
Section = "Careers",
Page = "counter"
}
}
},
// sample URLs for external navigation
new MenuItem()
{
Section = "Services",
SubSectionList = new List<MenuItem>()
{
new MenuItem()
{
Section = "Consulting",
Page = "counter"
},
new MenuItem()
{
Section = "Education",
Page = "fetchdata"
}
}
},
new MenuItem()
{
Section = "Contact",
Page = "counter"
}
};
base.OnInitialized();
}
}
---