Header

        @inherits UmbracoViewPage
        
        @{
            var home = Model.AncestorOrSelf<Home>()!;
            var siteSettings = home.FirstChild<SiteSettings>()!;
            var logo = siteSettings.Value<MediaWithCrops>("logo")!;
        }
        
        <header id="header" class="header d-flex align-items-center position-relative">
            <div class="container-fluid container-xl position-relative d-flex align-items-center justify-content-between">
        
                <a href="@home.Url()" class="logo d-flex align-items-center">
                    <img src="@logo.MediaUrl()" alt="@siteSettings.SiteName" />
                </a>
        
                <nav id="navmenu" class="navmenu">
                    <ul>
                        <li><a href="@home.Url()" class="@(home == Model ? "active" : "")">@home.Name</a></li>
                        @foreach (var item in home.Children.Where(x => !x.IsDocumentType("siteSettings")))
                        {
                            if (!item.IsDocumentType("news") && item.Children.Any())
                            {
                                <li class="dropdown"><a href="@item.Url()" class="@(item.IsAncestorOrSelf(Model) ? "active" : "")"><span>@item.Name</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
                                    <ul>
                                        @foreach (var subItem in item.Children())
                                        {
                                            <li><a href="@subItem.Url()" class="@(subItem.IsAncestorOrSelf(Model) ? "active" : "")">@subItem.Name</a></li>
                                        }
                                    </ul>
                                 </li>
                            }
                            else
                            {
                                <li><a href="@item.Url()" class="@(item.IsAncestorOrSelf(Model) ? "active" : "")">@item.Name</a></li>
                            }
                        }
                    </ul>
                    <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
                </nav>
        
            </div>
        </header>