FruitBank/Presentation/Nop.Web/Views/Shared/Components/TopMenu/Default.cshtml

@model TopMenuModel

@using Nop.Core.Domain.Catalog
@using Nop.Core.Domain.Topics

@functions {
    async Task CategoryLine(TopMenuModel.CategoryLineModel lineModel)
    {
        <li>
            <a href="@(Url.RouteUrl<Category>(new { SeName = lineModel.Category.SeName }))">@lineModel.Category.Name
                @if (lineModel.Category.NumberOfProducts.HasValue)
                {
                    <text> </text>@T("Categories.TotalProducts", lineModel.Category.NumberOfProducts.Value)
                }
            </a>
            @{
                //subcategories
                var subCategories = lineModel.ResponsiveMobileMenu ?
                    //responsive (all categories)
                    lineModel.Category.SubCategories :
                    //standard design (only categories with "IncludeInTopMenu")
                    lineModel.Category.SubCategories.Where(x => x.IncludeInTopMenu).ToList();

                var levelClass = "";
                if (lineModel.Level == 0)
                {
                    levelClass = "first-level";
                }
                if (subCategories.Count > 0)
                {
                    <div class="sublist-toggle"></div>
                    <ul class="sublist @levelClass">
                        @foreach (var subCategory in subCategories)
                        {
                            var categoryLineModel = new TopMenuModel.CategoryLineModel
                            {
                                Category = subCategory,
                                Level = lineModel.Level + 1,
                                ResponsiveMobileMenu = lineModel.ResponsiveMobileMenu
                            };
                            await CategoryLine(categoryLineModel);
                        }
                    </ul>
                }
            }
        </li>
    }
}

<ul class="top-menu notmobile">
    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HeaderMenuBefore, additionalData = Model })
    @if (Model.DisplayHomepageMenuItem)
    {
        <li><a href="@Url.RouteUrl("Homepage")">@T("Homepage")</a></li>
    }
    @if (!Model.UseAjaxMenu)
    {
        var rootCategories = Model.Categories.Where(x => x.IncludeInTopMenu).ToList();
        @foreach (var category in rootCategories)
        {
            var categoryLineModel = new TopMenuModel.CategoryLineModel
            {
                Category = category
            };
            await CategoryLine(categoryLineModel);
        }

    }
    @foreach (var topic in Model.Topics)
    {
        <li><a href="@(Url.RouteUrl<Topic>(new { SeName = topic.SeName }))">@topic.Name</a></li>
    }
    @if (Model.NewProductsEnabled && Model.DisplayNewProductsMenuItem)
    {
        <li><a href="@Url.RouteUrl("NewProducts")">@T("Products.NewProducts")</a></li>
    }
    @if (Model.DisplayProductSearchMenuItem)
    {
        <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a></li>
    }
    @if (Model.DisplayCustomerInfoMenuItem)
    {
        <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
    }
    @if (Model.BlogEnabled && Model.DisplayBlogMenuItem)
    {
        <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
    }
    @if (Model.ForumEnabled && Model.DisplayForumsMenuItem)
    {
        <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
    }
    @if (Model.DisplayContactUsMenuItem)
    {
        <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
    }
    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HeaderMenuAfter, additionalData = Model })
</ul>
@{
    var rootCategoriesResponsive = Model.Categories.ToList();
    //name it "Categories" if we have only categories. Otherwise, "Menu"
    var responsiveMenuTitle = Model.HasOnlyCategories ? T("Categories") : T("Menu");
    <div class="menu-toggle" tabindex="0" role="button" aria-controls="aria-categories-mobile-ul">@responsiveMenuTitle</div>
    <ul class="top-menu mobile">
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.MobHeaderMenuBefore, additionalData = Model })
        @if (Model.DisplayHomepageMenuItem)
        {
            <li><a href="@Url.RouteUrl("Homepage")">@T("Homepage")</a></li>
        }
        @if (!Model.UseAjaxMenu)
        {
            @foreach (var category in rootCategoriesResponsive)
            {
                var categoryLineModel = new TopMenuModel.CategoryLineModel
                {
                    Category = category,
                    ResponsiveMobileMenu = true
                };
                await CategoryLine(categoryLineModel);
            }

        }
        @foreach (var topic in Model.Topics)
        {
            <li><a href="@(Url.RouteUrl<Topic>(new { SeName = topic.SeName }))">@topic.Name</a></li>
        }
        @if (Model.NewProductsEnabled && Model.DisplayNewProductsMenuItem)
        {
            <li><a href="@Url.RouteUrl("NewProducts")">@T("Products.NewProducts")</a></li>
        }
        @if (Model.DisplayProductSearchMenuItem)
        {
            <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a></li>
        }
        @if (Model.DisplayCustomerInfoMenuItem)
        {
            <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
        }
        @if (Model.BlogEnabled && Model.DisplayBlogMenuItem)
        {
            <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
        }
        @if (Model.ForumEnabled && Model.DisplayForumsMenuItem)
        {
            <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
        }
        @if (Model.DisplayContactUsMenuItem)
        {
            <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
        }
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.MobHeaderMenuAfter, additionalData = Model })
    </ul>

    @if (Model.UseAjaxMenu)
    {
        <script asp-location="Footer">
        $(function() {
            $('.menu-toggle').on('click', function () {
                $(this).siblings('.top-menu.mobile').slideToggle('slow');
            });
            $('.menu-toggle').on('keydown', function (event) {
                if (event.keyCode === 13 || event.keyCode === 32) {
                    event.preventDefault();                 
                    $(this).siblings('.top-menu.mobile').slideToggle('slow');
                }
            });
            var localized_data = {
                AjaxFailure: "@T("MainMenu.AjaxFailure")"
            };
            mainMenu.init('@Url.RouteUrl("GetCatalogRoot")', '@Url.RouteUrl("GetCatalogSubCategories")', 'ul.top-menu.notmobile', 'ul.top-menu.mobile', localized_data);
        });
        </script>

        <script src="~/js/public.menu.js" asp-location="Footer"></script>

    }
    else
    {
        <script asp-location="Footer">
            $(function() {
                $('.menu-toggle').on('click', function () {
                    $(this).siblings('.top-menu.mobile').slideToggle('slow');
                });
                $('.menu-toggle').on('keydown', function (event) {
                    if (event.keyCode === 13 || event.keyCode === 32) {
                        event.preventDefault();
                        $(this).siblings('.top-menu.mobile').slideToggle('slow');
                    }
                });
                $('.top-menu.mobile .sublist-toggle').on('click', function () {
                    $(this).siblings('.sublist').slideToggle('slow');
                });
            });
        </script>

    }

}