@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();
    }
}