@using System.Text
@using Abp.Application.Navigation
@using Abp.Collections.Extensions
@using WePlatform.Views
@model WePlatform.Models.Layout.SideBarNavViewModel
@{
    var pageTitleStr = "";
    var calculateMenuUrl = new Func<string, string>((url) =>
    {
        if (string.IsNullOrEmpty(url))
        {
            return ApplicationPath;
        }

        if (UrlChecker.IsRooted(url))
        {
            return url;
        }

        return ApplicationPath + url;
    });

    string MenuHtml(UserMenuItem menuItem)
    {
        if (menuItem==null)
        {
            return "";
        }
        StringBuilder sb = new StringBuilder();
        var active = Model.ActiveNames == null ? "" : (Model.ActiveNames.Contains(menuItem.Name) ? "active" : "");
        sb.AppendFormat("<li class=\"{0}\">", active);
        sb.AppendLine();
        string iconHtml = string.IsNullOrWhiteSpace(menuItem.Icon) ? "" : " <i class=\"iconfont " + menuItem.Icon + "\"></i>";
        if (menuItem.Items.IsNullOrEmpty())
        {
            sb.AppendFormat("<a href=\"{0}\">{1}<span>{2}</span> </a>", calculateMenuUrl(menuItem.Url), iconHtml, menuItem.DisplayName);
            sb.AppendLine();
        }
        else
        {
            sb.AppendFormat("<a href=\"javascript:void(0);\" class=\"menu-toggle\">{0}<span>{1}</span> </a>", iconHtml, menuItem.DisplayName);
            sb.AppendLine();
            sb.Append("<ul class=\"ml-menu\">");
            sb.AppendLine();
            foreach (var childItem in menuItem.Items)
            {
                sb.Append(MenuHtml(childItem));
                sb.AppendLine();
            }
            sb.Append("</ul>");
            sb.AppendLine();
        }
        sb.Append("</li>");
        sb.AppendLine();
        return sb.ToString();
    }

}
<div class="menu">
    <ul class="list">
        @foreach (var menuItem in Model.MainMenu.Items)
        {
            @Html.Raw(MenuHtml(menuItem))
        }
    </ul>
</div>
@if (Model != null && Model.PageTitles.Any())
{
    foreach (var pageTitle in Model.PageTitles)
    {
        pageTitleStr += "<li class=\"m-nav__separator\">></li><li class=\"m-nav__item\" style=\"padding:0 10px\"><a href=\"javascript:;\" class=\"m-nav__link\"><span class=\"m-nav__link-text\"><i class=\"iconfont " + pageTitle.Icon + "\"></i>" + pageTitle.Name + "</span></a></li>";
    }
}
<script>
    var pageTitle = '@Html.Raw(pageTitleStr)';
</script>
@*<div class="menu">
        <ul class="list">
            @foreach (var menuItem in Model.MainMenu.Items)
            {
                <li class="@(Model.ActiveMenuItemName == menuItem.Name ? "active" : "")">
                    @if (menuItem.Items.IsNullOrEmpty())
                    {
                        <a href="@calculateMenuUrl(menuItem.Url)">
                            @if (!string.IsNullOrWhiteSpace(menuItem.Icon))
                            {
                               <i class="iconfont @menuItem.Icon"></i>

                            }
                            <span>@menuItem.DisplayName</span>
                        </a>
                    }
                    else
                    {
                        <a href="javascript:void(0);" class="menu-toggle">
                            @if (!string.IsNullOrWhiteSpace(menuItem.Icon))
                            {
                                <i class="iconfont @menuItem.Icon"></i>
                            }
                            <span>@menuItem.DisplayName</span>
                        </a>
                        <ul class="ml-menu">
                            @foreach (var subMenuItem in menuItem.Items)
                            {
                                <li class="@(Model.ActiveMenuItemName == subMenuItem.Name ? "active" : "")">
                                    @if (subMenuItem.Items.IsNullOrEmpty())
                                    {
                                        <a href="@calculateMenuUrl(subMenuItem.Url)">
                                            @if (!string.IsNullOrWhiteSpace(subMenuItem.Icon))
                                            {
                                                <i class="iconfont @subMenuItem.Icon"></i>
                                            }
                                            <span>@subMenuItem.DisplayName</span>
                                        </a>
                                    }
                                    else
                                    {
                                        <a href="javascript:void(0);" class="menu-toggle">
                                            @if (!string.IsNullOrWhiteSpace(subMenuItem.Icon))
                                            {
                                                <i class="iconfont @menuItem.Icon"></i>
                                            }
                                            <span>@subMenuItem.DisplayName</span>
                                        </a>
                                        <ul class="ml-menu">
                                            @foreach (var subSubMenuItem in subMenuItem.Items)
                                            {
                                                <li class="@(Model.ActiveMenuItemName == subSubMenuItem.Name ? "active" : "")">
                                                    <a href="@calculateMenuUrl(subSubMenuItem.Url)">
                                                        @if (!string.IsNullOrWhiteSpace(subSubMenuItem.Icon))
                                                        {
                                                            <i class="iconfont @subSubMenuItem.Icon"></i>
                                                        }
                                                        @subSubMenuItem.DisplayName
                                                    </a>
                                                </li>
                                            }
                                        </ul>
                                    }
                                </li>
                            }
                        </ul>
                    }
                </li>
            }
        </ul>
    </div>*@
@*<div class="menu">
        <ul class="list">
            @foreach (var menuItem in Model.MainMenu.Items)
            {
                <li class="@(Model.ActiveMenuItemName == menuItem.Name ? "active" : "")">
                    @if (menuItem.Items.IsNullOrEmpty())
                    {
                        <a href="@calculateMenuUrl(menuItem.Url)">
                            @if (!string.IsNullOrWhiteSpace(menuItem.Icon))
                            {
                                <i class="material-icons">@menuItem.Icon</i>
                            }
                            <span>@menuItem.DisplayName</span>
                        </a>
                    }
                    else
                    {
                        <a href="javascript:void(0);" class="menu-toggle">
                            @if (!string.IsNullOrWhiteSpace(menuItem.Icon))
                            {
                                <i class="material-icons">@menuItem.Icon</i>
                            }
                            <span>@menuItem.DisplayName</span>
                        </a>
                        <ul class="ml-menu">
                            @foreach (var subMenuItem in menuItem.Items)
                            {
                                <li class="@(Model.ActiveMenuItemName == subMenuItem.Name ? "active" : "")">
                                    @if (subMenuItem.Items.IsNullOrEmpty())
                                    {
                                        <a href="@calculateMenuUrl(subMenuItem.Url)">
                                            @if (!string.IsNullOrWhiteSpace(subMenuItem.Icon))
                                            {
                                                <i class="material-icons">@subMenuItem.Icon</i>
                                            }
                                            <span>@subMenuItem.DisplayName</span>
                                        </a>
                                    }
                                    else
                                    {
                                        <a href="javascript:void(0);" class="menu-toggle">
                                            @if (!string.IsNullOrWhiteSpace(subMenuItem.Icon))
                                            {
                                                <i class="material-icons">@subMenuItem.Icon</i>
                                            }
                                            <span>@subMenuItem.DisplayName</span>
                                        </a>
                                        <ul class="ml-menu">
                                            @foreach (var subSubMenuItem in subMenuItem.Items)
                                            {
                                                <li class="@(Model.ActiveMenuItemName == subSubMenuItem.Name ? "active" : "")">
                                                    <a href="@calculateMenuUrl(subSubMenuItem.Url)">
                                                        @subSubMenuItem.DisplayName
                                                    </a>
                                                </li>
                                            }
                                        </ul>
                                    }
                                </li>
                            }
                        </ul>
                    }
                </li>
            }
        </ul>
    </div>*@