@page "/panelmenu"
@page "/docs/guides/components/panelmenu.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    PanelMenu
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>PanelMenu</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos display hierarchical navigation menus with expandable panels and nested items, showing both statically declared items and programmatically created menus with expanded state binding and customizable display styles.
</RadzenText>

<RadzenText Anchor="panelmenu#panelmenu-static" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Statically declared items
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Create a collapsible menu by statically declaring <code>RadzenPanelMenuItem</code> components in markup.
</RadzenText>
<RadzenExample ComponentName="PanelMenu" Example="PanelMenuStatic">
     <PanelMenuStatic />
</RadzenExample>

<RadzenText Anchor="panelmenu#panelmenu-programmatic" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Programmatically created items with Expanded binding
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Generate menu items dynamically from data and control expansion state with two-way binding.
</RadzenText>
<RadzenExample ComponentName="PanelMenu" Example="PanelMenuProgrammatic">
     <PanelMenuProgrammatic />
</RadzenExample>

<RadzenText Anchor="panelmenu#panelmenu-display-style" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Set the display style of menu items
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Customize the visual style of menu items using the <code>DisplayStyle</code> property for different appearance options.
</RadzenText>
<RadzenExample ComponentName="PanelMenu" Example="PanelMenuDisplayStyle">
    <PanelMenuDisplayStyle />
</RadzenExample>

<RadzenText Anchor="panelmenu#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor PanelMenu component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a PanelMenu." },
        new KeyboardShortcut { Key = "DownArrow", Action = "Focus next PanelMenu item." },
        new KeyboardShortcut { Key = "UpArrow", Action = "Focus previous PanelMenu item." },
        new KeyboardShortcut { Key = "Space or Enter on an expandable item", Action = "Change the state of a focused PanelMenu item switching between expanded and collapsed." },
        new KeyboardShortcut { Key = "Space or Enter on a non-expandable item", Action = "Navigate." }
    };
}
