Header changes for NHS Design System v 9

Author: kevwhitt-hee

DigitalLearningSolutions.Web/Views/Frameworks/Shared/_NavMenuItems.cshtml

@@ -5,32 +5,27 @@
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Dashboard)">
   <a class="nhsuk-header__navigation-link" asp-controller="Frameworks" asp-action="Index">
     Dashboard
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Frameworks)">
   <a class="nhsuk-header__navigation-link" asp-controller="Frameworks" asp-action="ViewFrameworks" asp-route-tabname="Mine">
     Frameworks
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <feature name="@(FeatureFlags.WorkforceManagerInterface)">
   <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.RolesProfiles)">
     <a class="nhsuk-header__navigation-link" asp-controller="RoleProfiles" asp-action="ViewRoleProfiles" asp-route-tabname="Mine">
       Role Profiles
-      <partial name="_NhsChevronRight" />
     </a>
   </li>
 </feature>
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Support)">
   <a class="nhsuk-header__navigation-link" asp-controller="Support" asp-action="Index" asp-route-dlsSubApplication="@DlsSubApplication.Frameworks.UrlSegment">
     Support
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.MyAccount)">
   <a class="nhsuk-header__navigation-link" asp-controller="MyAccount" asp-action="Index" asp-route-dlsSubApplication="@DlsSubApplication.Frameworks.UrlSegment">
     My account
-    <partial name="_NhsChevronRight" />
   </a>
 </li>

DigitalLearningSolutions.Web/Views/LearningMenu/Shared/_NavMenuItems.cshtml

@@ -2,12 +2,10 @@
 <li class="nhsuk-header__navigation-item">
   <a class="nhsuk-header__navigation-link" asp-controller="LearningMenu" asp-action="Close">
     Learning portal
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item">
   <a class="nhsuk-header__navigation-link" asp-controller="MyAccount" asp-action="Index" asp-route-dlsSubApplication="@DlsSubApplication.LearningPortal.UrlSegment">
     My account
-    <partial name="_NhsChevronRight" />
   </a>
 </li>

DigitalLearningSolutions.Web/Views/LearningPortal/Shared/_NavMenuItems.cshtml

@@ -3,24 +3,20 @@
 <li class="nhsuk-header__navigation-item @Html.IsSelected("Current")">
   <a class="nhsuk-header__navigation-link" asp-controller="LearningPortal" asp-action="Current">
     Current activities
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.IsSelected("Completed")">
   <a class="nhsuk-header__navigation-link" asp-controller="LearningPortal" asp-action="Completed">
     Completed activities
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.IsSelected("Available")">
   <a class="nhsuk-header__navigation-link" asp-controller="LearningPortal" asp-action="Available">
     Available activities
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.IsSelected(controller: "MyAccount", action: "Index")">
   <a class="nhsuk-header__navigation-link" asp-controller="MyAccount" asp-action="Index" asp-route-dlsSubApplication="@DlsSubApplication.LearningPortal.UrlSegment">
     My account
-    <partial name="_NhsChevronRight" />
   </a>
 </li>

DigitalLearningSolutions.Web/Views/Shared/_Layout.cshtml

@@ -66,7 +66,7 @@
         @await Html.PartialAsync("~/Views/Shared/_GoogleTagManagerBodyTagJs.cshtml")
     }
     <div id="pagewrapper">
-        <header>
+        <header class="nhsuk-header nhsuk-header--organisation nhsuk-header--white" role="banner">
             <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
             <partial name="_CookieConsentPartial" />
             <a class="nhsuk-skip-link" href="#maincontent">Skip to main content</a>
@@ -80,7 +80,6 @@
                     </div>
                 </div>
             }
-            <div class="nhsuk-header nhsuk-header--organisation nhsuk-header--white">
                 <div class="nhsuk-width-container nhsuk-header__container">
                     <div class="nhsuk-header__logo">
                         <a class="nhsuk-header__link nhsuk-header__link--service"
@@ -117,15 +116,9 @@
 
                 @if ((bool?)ViewData[LayoutViewDataKeys.DoNotDisplayNavBar] != true)
                 {
+                   <div class="nhsuk-navigation-container">
                     <nav class="nhsuk-header__navigation" id="header-navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
                         <div class="nhsuk-width-container">
-                            <p class="nhsuk-header__navigation-title">
-                                <span id="label-navigation">Menu</span>
-                                <button class="nhsuk-header__navigation-close" id="close-menu">
-                                    <partial name="_NhsChevronRight" />
-                                    <span class="nhsuk-u-visually-hidden">Close menu</span>
-                                </button>
-                            </p>
                             <ul class="nhsuk-header__navigation-list">
                                 @if (IsSectionDefined("NavMenuItems"))
                                 {
@@ -143,15 +136,24 @@
                                          <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.SwitchApplication)">
                                             <a class="nhsuk-header__navigation-link" asp-controller="ApplicationSelector" asp-action="Index">
                                                 Switch application
-                                                <partial name="_NhsChevronRight" />
                                             </a>
                                         </li>
                                     }
 
                                 }
+                                <li class="nhsuk-mobile-menu-container">
+                                    <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
+                                        <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                                            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
+                                        </svg>
+                                    </button>
+                                </li>
                             </ul>
                         </div>
                     </nav>
+                    </div>
                 }
 
                 @{
@@ -162,7 +164,6 @@
                 <feature name="@(FeatureFlags.UserFeedbackBar)">
                     <partial name="_UserFeedbackBarPartial" model=@(userResearchUrl) />
                 </feature>
-            </div>
 
             @RenderSection("NavBreadcrumbs", false)
         </header>

DigitalLearningSolutions.Web/Views/Shared/_NavMenuItems.cshtml

@@ -7,21 +7,18 @@
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Welcome)">
   <a class="nhsuk-header__navigation-link" asp-controller="Home" asp-action="Index">
     Welcome
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.FindYourCentre)">
   <a class="nhsuk-header__navigation-link" asp-controller="FindYourCentre" asp-action="Index">
     Find your centre
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 @if (Configuration.IsPricingPageEnabled())
 {
   <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Pricing)">
     <a class="nhsuk-header__navigation-link" asp-controller="Pricing" asp-action="Index">
       Pricing
-      <partial name="_NhsChevronRight" />
     </a>
   </li>
 }
@@ -30,7 +27,6 @@
   <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.MyAccount)">
     <a class="nhsuk-header__navigation-link" asp-controller="MyAccount" asp-action="Index">
       My account
-      <partial name="_NhsChevronRight" />
     </a>
   </li>
 }
@@ -39,13 +35,11 @@ else
   <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.LogIn)">
     <a class="nhsuk-header__navigation-link" asp-controller="Login" asp-action="Index">
       Log in
-      <partial name="_NhsChevronRight" />
     </a>
   </li>
   <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Register)">
     <a class="nhsuk-header__navigation-link" asp-controller="Register" asp-action="Start">
       Register
-      <partial name="_NhsChevronRight" />
     </a>
   </li>
 }

DigitalLearningSolutions.Web/Views/SuperAdmin/Shared/_NavMenuItems.cshtml

@@ -5,30 +5,25 @@
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Admins)">
   <a class="nhsuk-header__navigation-link" asp-controller="Users" asp-action="Index">
     Users
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Centres)">
   <a class="nhsuk-header__navigation-link" asp-controller="Centres" asp-action="Index">
     Centres
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Reports)">
     <a class="nhsuk-header__navigation-link" asp-controller="PlatformReports" asp-action="Index">
     Reports
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.System)">
   <a class="nhsuk-header__navigation-link" asp-controller="SuperAdminFaqs" asp-action="Index">
     System
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.MyAccount)">
   <a class="nhsuk-header__navigation-link" asp-controller="MyAccount" asp-action="Index" asp-route-dlsSubApplication="@DlsSubApplication.SuperAdmin.UrlSegment">
     My account
-    <partial name="_NhsChevronRight" />
   </a>
 </li>

DigitalLearningSolutions.Web/Views/Supervisor/Shared/_NavMenuItems.cshtml

@@ -4,26 +4,22 @@
 <li class="nhsuk-header__navigation-item @Html.IsSelected(controller: "Supervisor", action: "Index")">
   <a class="nhsuk-header__navigation-link" asp-controller="Supervisor" asp-action="Index">
     Dashboard
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.IsSelected("MyStaffList")">
   <a class="nhsuk-header__navigation-link" asp-controller="Supervisor" asp-action="MyStaffList">
     My Staff
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <feature name="@(FeatureFlags.SupervisorProfileAssessmentInterface)">
   <li class="nhsuk-header__navigation-item @Html.IsSelected("SelfAssessments")">
     <a class="nhsuk-header__navigation-link" asp-controller="Supervisor" asp-action="SelfAssessments">
       Self Assessments
-      <partial name="_NhsChevronRight" />
     </a>
   </li>
 </feature>
 <li class="nhsuk-header__navigation-item @Html.IsSelected(controller: "MyAccount", action: "Index")">
   <a class="nhsuk-header__navigation-link" asp-controller="MyAccount" asp-action="Index" asp-route-dlsSubApplication="@DlsSubApplication.Supervisor.UrlSegment">
     My account
-    <partial name="_NhsChevronRight" />
   </a>
 </li>

DigitalLearningSolutions.Web/Views/TrackingSystem/Shared/_NavMenuItems.cshtml

@@ -8,31 +8,26 @@
   <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Centre)">
     <a class="nhsuk-header__navigation-link" asp-controller="Dashboard" asp-action="Index">
       Centre
-      <partial name="_NhsChevronRight" />
     </a>
   </li>
   <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Delegates)">
     <a class="nhsuk-header__navigation-link" asp-controller="AllDelegates" asp-action="Index">
       Delegates
-      <partial name="_NhsChevronRight" />
     </a>
   </li>
   <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.CourseSetup)">
     <a class="nhsuk-header__navigation-link" asp-controller="CourseSetup" asp-action="Index">
       Course setup
-      <partial name="_NhsChevronRight" />
     </a>
   </li>
 }
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Support)">
   <a class="nhsuk-header__navigation-link" asp-controller="Support" asp-action="Index" asp-route-dlsSubApplication="@DlsSubApplication.TrackingSystem.UrlSegment">
     Support
-    <partial name="_NhsChevronRight" />
   </a>
 </li>
 <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.MyAccount)">
   <a class="nhsuk-header__navigation-link" asp-controller="MyAccount" asp-action="Index" asp-route-dlsSubApplication="@DlsSubApplication.TrackingSystem.UrlSegment">
     My account
-    <partial name="_NhsChevronRight" />
   </a>
 </li>