Hi all,

I'm creating a sideNav using the partial view which comes with Umbraco, I've added an if statement to my code so if it has children to use another css class to generate the drop down, else use normal css.

My issue is the css works with my if statement, but I'm getting 2 lots of Navigation;

Here is my code

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web


@*
    This snippet creates links for every single page (no matter how deep) below
    the page currently being viewed by the website visitor, displayed as nested unordered HTML lists.
*@

<div data-collapse="medium" data-animation="default" data-duration="400" class="sidenavbar w-nav">
    <nav role="navigation" class="side-nav w-clearfix w-nav-menu">

        @{ var selection = Model.AncestorsOrSelf().FirstOrDefault(a => a.Level == 2).Children.Where(x => x.IsVisible()); }

        @* Ensure that the Current Page has children *@
        @if (selection.Count() > 0)
        {
            @* Get the first page in the children, where the property umbracoNaviHide is not True *@
            var naviCount = selection.FirstOrDefault()?.Level;



            @* Loop through the selection *@
            foreach (var item in selection)
            {
                var nochildren = item.Children.Where(x => x.IsVisible()).ToArray();
                var haschildren = item.Children.Where(x => x.IsVisible()).ToArray();
                if (nochildren.Length < 1)
                {
                    <a href="@item.Url" class="sub-menu-link w-nav-link">@item.Name</a>
                }
                else
                {
                    <div data-delay="0" class="sub-nav-drop-down w-dropdown">
                        <div class="sub-menu-drop-down-toggle sub-menu-drop-link w-dropdown-toggle">
                            <div class="w-icon-dropdown-toggle"></div>
                            <div>@item.Name</div>
                        </div>
                        <nav class="dropdown-list sub-menu w-dropdown-list">
                            @ChildPages(haschildren)
                        </nav>
                    </div>
                }

                @* if this child page has any children, where the property umbracoNaviHide is not True *@
                {
                    var children = item.Children.Where(x => x.IsVisible()).ToArray();
                    if (children.Length > 0)
                    {
                        @* Call our helper to display the children *@
                        @ChildPages(children)
                    }
                }

            }

        }

        @helper ChildPages(IPublishedContent[] selection)
        {
            @* Ensure that we have a collection of pages *@
            if (selection.Length > 0)
            {
                @* Get the first page in pages and get the level *@
                var naviCount = selection[0].Level;

                foreach (var item in selection)
                {

                    <a class="sub-menu-link w-nav-link" href="@item.Url">@item.Name</a>

                    @* if the page has any children, where the property umbracoNaviHide is not True *@
                    {
                        var children = item.Children.Where(x => x.IsVisible()).ToArray();
                        if (children.Length < 3)
                        {
                            @* Recurse and call our helper to display the children *@
                            @ChildPages(children)
                        }
                    }
                }
            }
        }
    </nav>
    <div data-ix="simple-menu-button" class="simple-menu-button w-nav-button">
        <div class="line-1 simple"></div>
        <div class="line-2 simple"></div>
        <div class="line-3 simple"></div>
    </div>
</div>

See image below, test 3 and test 4 are children of test 2 and are inside the dropdown as well as outside the drop down.