Merge pull request #1294 from TechnologyEnhancedLearning/Develop/Features/TD-5863-header-breadcrumb

TD-5863 header breadcrumb changes

Author: OluwatobiAwe

LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss

@@ -9,6 +9,21 @@ body {
     padding: 0 px2rem(32);
 }
 
+.nhsuk-hero {
+    background-color: $color_nhsuk-blue;
+    color: #fff;
+    position: relative;
+}
+
+.nhsuk-hero a,
+.nhsuk-hero a:visited,
+.nhsuk-hero a:hover,
+.nhsuk-hero a:active,
+.nhsuk-hero i {
+    color: $color_nhsuk-white;
+}
+
+
 .nhsuk-width-container.app-width-container {
     max-width: px2rem(1208);
     margin: 0 auto;

LearningHub.Nhs.WebUI/Views/MyAccount/Index.cshtml

@@ -4,6 +4,25 @@
    ViewData["Title"] = "My account details";
   var isgeneralUser = User.IsInRole("BasicUser");
 }
+@section NavBreadcrumbs {
+
+    <section class="nhsuk-hero">
+        <div class="nhsuk-width-container app-width-container">
+            <div class="nhsuk-grid-row">
+                <div class="nhsuk-grid-column-full">
+
+                    <div class="nhsuk-u-padding-top-3 nhsuk-u-padding-bottom-3">
+                        <a href="/">Home</a>
+                        <i class="fa-solid fa-chevron-right nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-1 nhsuk-u-padding-left-2 nhsuk-u-padding-right-2"></i>
+                    </div>
+                    <div class="nhsuk-u-padding-top-4 nhsuk-u-padding-bottom-7">
+                        <h1 class="nhsuk-heading-xl">My account</h1>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+}
 <div class="bg-white nhsuk-u-padding-bottom-9">
     <div class="nhsuk-width-container app-width-container">
         <div class="nhsuk-u-reading-width">

LearningHub.Nhs.WebUI/Views/MyLearning/Index.cshtml

@@ -17,6 +17,27 @@
     <link rel="stylesheet" type="text/css" href="~/css/nhsuk/pages/mylearning.css" asp-append-version="true" />
 
 }
+
+@section NavBreadcrumbs {
+
+    <section class="nhsuk-hero">
+        <div class="nhsuk-width-container app-width-container">
+            <div class="nhsuk-grid-row">
+                <div class="nhsuk-grid-column-full">
+
+                    <div class="nhsuk-u-padding-top-3 nhsuk-u-padding-bottom-3">
+                        <a href="/">Home</a>
+                        <i class="fa-solid fa-chevron-right nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-1 nhsuk-u-padding-left-2 nhsuk-u-padding-right-2"></i>
+                    </div>
+                    <div class="nhsuk-u-padding-top-4 nhsuk-u-padding-bottom-7">
+                        <h1 class="nhsuk-heading-xl">My learning activity</h1>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+}
+
 <div class="my-learning">
     <div class="nhsuk-width-container app-width-container">
         <div class="nhsuk-grid-row nhsuk-u-padding-top-9 nhsuk-u-padding-bottom-9">
@@ -25,7 +46,7 @@
                 {
                     <vc:error-summary order-of-property-names="@(new[] { nameof(Model) })" />
                 }
-                <h1 class="nhsuk-heading-xl">My learning</h1>
+               @*  <h1 class="nhsuk-heading-xl">My learning</h1> *@
                 <p class="nhsuk-body-l">
                     You can use this page to search and filter learning resources you've accessed, download certificates and generate a report
                     of your activity.

LearningHub.Nhs.WebUI/Views/Shared/Tenant/LearningHub/_Layout.cshtml

@@ -88,6 +88,7 @@
         @RenderSection("NavBreadcrumbs", false)
     </div>
 
+
     <div class="nhsuk-width-container app-width-container--full">
         <main role="main" id="maincontent" class="nhsuk-main-wrapper app-main-wrapper--no-padding nhsuk-bg-white">
             @* This print header HAS to be within the main component and not in the header component otherwise there is a problem when