<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Meanu_Sample._Default" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.48" Namespace="C1.Web.Wijmo.Controls.C1Menu" TagPrefix="wijmo" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <style>
        /*put space between icon and text*/
        .wijmo-wijmenu-icon-left {
            margin-right: 8px;
        }

        /*add icon using image from a physical folder*/
        .item3-icn {
            width: 15px;
            height: 15px;
            display: inline-block;
            background-image: url("/Images/gear.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        /*put the triangle drop-down icon to the right-most
            The easiest way is to make the menu link a flex container and push the triangle to the right with margin-left: auto.
        */
        .wijmo-wijmenu-link {
            display: flex !important;
            align-items: center;
            width: 100%;
        }

        .wijmo-wijmenu-link > .wijmo-wijmenu-text {
            flex: 1;
        }

        .wijmo-wijmenu-link > .ui-icon {
            margin-left: auto;
        }
    </style>
    <wijmo:C1Menu ID="Menu" runat="server">
        <Items>
            <%-- using icon from bootstrap "bi bi-house-fill" --%>
            <wijmo:C1MenuItem Text="Menu" CssClass="menu-item" IconClass="bi bi-house-fill"> 
                <Items>
                    <wijmo:C1MenuItem Text="item1" CssClass="menu-item"/>
                    <wijmo:C1MenuItem Text="item2" CssClass="menu-item"/>
                    <wijmo:C1MenuItem Text="item3" IconClass="item3-icn">
                        <Items>
                            <wijmo:C1MenuItem Text="item6" CssClass="menu-item"/>
                            <wijmo:C1MenuItem Text="item7" CssClass="menu-item"/>
                            <wijmo:C1MenuItem Text="item8" CssClass="menu-item">
                                <Items>
                                    <wijmo:C1MenuItem Text="item9" CssClass="menu-item"/>
                                    <wijmo:C1MenuItem Text="item10" CssClass="menu-item"/>
                                </Items>
                            </wijmo:C1MenuItem>
                        </Items>
                    </wijmo:C1MenuItem>
                    <wijmo:C1MenuItem Text="item4" CssClass="menu-item"/>
                    <wijmo:C1MenuItem Text="item5" CssClass="menu-item"/>
                </Items>
            </wijmo:C1MenuItem>
        </Items>
    </wijmo:C1Menu>

</asp:Content>
