<div style="max-width: 40%;">
    <Menu>
        <MenuList>
            <MenuItem>
                <MenuLink >一级菜单1</MenuLink>
                <MenuList>
                    <MenuItem>
                        <MenuLink>二级菜单1</MenuLink>
                    </MenuItem>
                    <MenuItem>
                        <MenuLink>二级菜单2</MenuLink>
                        <MenuList>
                            <MenuItem>
                                <MenuLink>三级菜单1</MenuLink>
                            </MenuItem>
                            <MenuItem>
                                <MenuLink>三级菜单2</MenuLink>
                            </MenuItem>
                        </MenuList>
                    </MenuItem>
                    <MenuItem>
                        <MenuLink>二级菜单3</MenuLink>
                    </MenuItem>
                </MenuList>
            </MenuItem>
            <MenuItem>
                <MenuLink>一级菜单2</MenuLink>
                <MenuList>
                    <MenuItem>
                        <MenuLink>二级菜单2-1</MenuLink>
                    </MenuItem>
                    <MenuItem>
                        <MenuLink>二级菜单2-2</MenuLink>
                        <MenuList>
                            <MenuItem>
                                <MenuLink>三级菜单2-2-1</MenuLink>
                            </MenuItem>
                            <MenuItem>
                                <MenuLink>三级菜单2-2-2</MenuLink>
                            </MenuItem>
                        </MenuList>
                    </MenuItem>
                    <MenuItem>
                        <MenuLink>二级菜单3</MenuLink>
                    </MenuItem>
                </MenuList>
            </MenuItem>
            <MenuItem>
                <MenuLink >一级菜单3</MenuLink>
            </MenuItem>
        </MenuList>
    </Menu>
</div>

@inject NavigationManager nm
@inject IJSRuntime js

<div style="max-width: 40%;">
    <Input @ref="kwInput" class="@B.MB2" placeholder="Enter for search" @bind-Value="kw" @onkeypress="inputHandle">
    <Menu OnItemClick="OnMenuClick">
        @foreach (var item in MenuData)
        {
            <MenuLabel>@item.Label</MenuLabel>
            <MenuList>
                @foreach (var sub in item.Children)
                {
                    var flag = string.IsNullOrEmpty(kw) || ( !string.IsNullOrEmpty(kw) && (sub.Keywords.Contains(kw.ToLower()) || item.Keywords.Contains(kw.ToLower())));
                    var cls = (flag ? "" : B.Hidden);
                    <MenuItem class="@cls">
                    <MenuLink href="@sub.Href">@sub.Label</MenuLink>
                    </MenuItem>
                }
            </MenuList>
        }
    </Menu>
</div>

@code {

    class MItem
    {
        public string Label { get; set; }
        public string Href { get; set; }
        public HashSet<string> Keywords { get; set; }
        public List<MItem> Children { get; set; }

        public MItem(string label, string href = "", string kws = "")
        {
            Label = label;
            Href = href;
            Keywords = new HashSet<string>(kws.Split(',', StringSplitOptions.RemoveEmptyEntries));
        }
    }

    void inputHandle(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            kw = kwInput.Value;
        }
    }

    string kw = "";
    Input<string> kwInput;


    private List<MItem> MenuData = new()
    {
        new MItem("概述(Overview)", "", "start,开始,概述")
        {
            Children = new List<MItem>()
            {
                new MItem("开始使用", "/docs/overview/start", ""),
                new MItem("Helpers", "/docs/overview/commons", "common,helper,color,size,颜色,尺寸"),
            }
        },
        new MItem("组件(Components)", "", "组件,com,component")
        {
            Children = new List<MItem>()
            {
                new MItem("数据表(DataTable)", "/docs/components/datatable", "table,data,datatable,表格"),
                new MItem("面包屑(Breadcrumb)", "/docs/components/breadcrumb", "breadcrumb,面包屑,导航"),
                new MItem("菜单(Menu)", "/docs/components/menu", "menu,菜单"),
                new MItem("消息(Message)", "/docs/components/message", "message,消息"),
                new MItem("对话框(Modal)", "/docs/components/modal", "modal,对话框"),
                new MItem("导航(Navbar)", "/docs/components/navbar", "navbar,导航"),
                new MItem("面板(Panel)", "/docs/components/panel", "panel,面板"),
            }
        },
    };


    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private async Task OnMenuClick(MenuItem item)
    {
        @* var ele = await JSInterop.GetElementById("layoutContent"); *@
        @* await JSInterop.ScrollTo(ele, 0, 0); *@
        await js.InvokeVoidAsync("docScrollTop");
    }

}