Build header component

NHSETELViewComponents/ViewComponents/HeaderViewComponent.cs

@@ -0,0 +1,33 @@
+namespace NHSETELViewComponents.ViewComponents
+{
+    using Microsoft.AspNetCore.Mvc;
+    using NHSETELViewComponents.ViewModels;
+
+    /// <summary>
+    /// A ViewComponent that renders a Header.
+    /// </summary>
+    public class HeaderViewComponent : ViewComponent
+    {
+        public IViewComponentResult Invoke(
+            LinkViewModel homeLink,
+            Dictionary<string, LinkViewModel>? accountLinks = null,
+            List<LinkViewModel>? navigationLinks = null,
+            string? searchFolder = null,
+            string? searchNavView = null,
+            string? searchControllerName = null)
+        {
+            if (accountLinks == null)
+            {
+                accountLinks = new Dictionary<string, LinkViewModel>
+                {
+                    { "logout", new LinkViewModel("Home", "Logout", "Log out", null) },
+                    { "account", new LinkViewModel("myaccount", null, "My account", null) }
+                };
+            }
+
+            var model = new HeaderViewModel(homeLink, accountLinks, navigationLinks, searchFolder, searchNavView, searchControllerName);
+
+            return View(model);
+        }
+    }
+}

NHSETELViewComponents/ViewModels/HeaderViewModel.cs

@@ -0,0 +1,35 @@
+namespace NHSETELViewComponents.ViewModels
+{
+    public class HeaderViewModel
+    {
+        public HeaderViewModel(
+            LinkViewModel homeLink,
+            Dictionary<string, LinkViewModel>? accountLinks,
+            List<LinkViewModel>? navigationLinks,
+            string? searchFolder = null,
+            string? searchNavView = null,
+            string? searchControllerName = null
+            )
+        {
+            HomeLink = homeLink;
+            AccountLinks = accountLinks;
+            NavigationLinks = navigationLinks;
+            SearchFolder = searchFolder;
+            SearchNavView = searchNavView;
+            SearchControllerName = searchControllerName;
+        }
+
+        public LinkViewModel HomeLink { get; set; }
+
+        public Dictionary<string, LinkViewModel>? AccountLinks { get; set; }
+
+        public List<LinkViewModel>? NavigationLinks { get; set; }
+
+        public string? SearchFolder { get; set; }
+
+        public string? SearchNavView { get; set; }
+
+        public string? SearchControllerName { get; set; }
+
+    }
+}

NHSETELViewComponents/Views/Shared/Components/Header/Default.cshtml

@@ -0,0 +1,96 @@
+@using NHSETELViewComponents.ViewModels
+@model HeaderViewModel
+
+
+<header class="nhsuk-header" role="banner" data-module="nhsuk-header">
+    <div class="nhsuk-header__container nhsuk-width-container">
+        <div class="nhsuk-header__service">
+            <a class="nhsuk-header__service-logo" href="/" aria-label="NHS @Model.HomeLink.LinkText homepage">
+                <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS">
+                    <title>NHS</title>
+                    <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
+                </svg>
+                <span class="nhsuk-header__service-name">@Model.HomeLink.LinkText</span>
+            </a>
+        </div>
+
+        @* ------------- SEARCH ------------- *@
+        @if (Model.SearchNavView != null)
+        {
+            @await Component.InvokeAsync(Model.SearchFolder, new { navView = Model.SearchNavView, controllerName = Model.SearchControllerName })
+        }
+        else
+        {
+            <search class="nhsuk-header__search">
+                <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get">
+                    <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS digital service manual</label>
+                    <input class="nhsuk-header__search-input nhsuk-input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
+                    <button class="nhsuk-header__search-submit" type="submit">
+                        <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
+                            <title>Search</title>
+                            <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
+                        </svg>
+
+                    </button>
+                </form>
+            </search>
+        }
+
+        @* ------------- ACCOUNT ------------- *@
+        @if (User.Identity.IsAuthenticated)
+        {
+            <nav class="nhsuk-header__account" aria-label="Account">
+                <ul class="nhsuk-header__account-list">
+                    @if (Model.AccountLinks != null && Model.AccountLinks.ContainsKey("account"))
+                    {
+                        var account = Model.AccountLinks["account"];
+
+                        <li class="nhsuk-header__account-item">
+                            <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                                <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z" />
+                            </svg>
+                            <a class="nhsuk-header__account-link" asp-controller="@account.AspController" asp-action="@account.AspAction">
+                                @account.LinkText
+                            </a>
+                        </li>
+                    }
+                    @if (Model.AccountLinks != null && Model.AccountLinks.ContainsKey("logout"))
+                    {
+                        var logout = Model.AccountLinks["logout"];
+
+                        <li class="nhsuk-header__account-item">
+                            <a class="nhsuk-header__account-link" asp-controller="@logout.AspController" asp-action="@logout.AspAction">
+                                @logout.LinkText
+                            </a>
+                        </li>
+                    }
+                </ul>
+            </nav>
+        }
+
+    </div>
+
+
+    @* ------------- NAVIGATION ------------- *@
+    @if (User.Identity.IsAuthenticated)
+    {
+        <nav class="nhsuk-header__navigation" aria-label="Menu">
+            <div class="nhsuk-header__navigation-container nhsuk-width-container">
+                <ul class="nhsuk-header__navigation-list">
+                    <li class="nhsuk-header__menu" hidden>
+                        <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
+                            <span class="nhsuk-u-visually-hidden">Browse </span>More
+                        </button>
+                    </li>
+
+                    @foreach (var link in Model.NavigationLinks)
+                    {
+                        <li class="nhsuk-header__navigation-item">
+                            <a class="nhsuk-header__navigation-link" asp-controller="@link.AspController" asp-action="@link.AspAction" asp-all-route-data="@link.AspAllRouteData">@link.LinkText</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        </nav>
+    }
+</header>