Add text to menu button in header component

CHANGELOG.md

@@ -12,9 +12,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Removed the tabindex on open accordion items
 - Theme selector icons in footer changed to SVGs
+- Updated style of gallery next and previous buttons
+- Header menu button now has text
 
 ### Deprecated
 ### Removed
+
+- Up and down arrows no longer change images within a gallery
+
 ### Fixed
 
 - Pressing `Escape` whilst focused anywhere on the header or global header components will close the menu if it is open

src/nationalarchives/components/header/header.scss

@@ -90,21 +90,21 @@
     width: 2rem;
     height: 0.25rem;
 
-    display: block;
+    display: inline-block;
 
     @include colour.colour-background("font-dark");
 
     &::before,
     &::after {
       content: "";
 
+      width: 2rem;
       height: 0.25rem;
 
       display: block;
 
       position: absolute;
       right: 0;
-      left: 0;
 
       background-color: inherit;
     }
@@ -124,11 +124,15 @@
 
     appearance: none;
 
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 
     position: relative;
 
-    font-size: 0;
+    color: inherit;
+    @include typography.main-font-weight-bold;
+    @include typography.font-size(16);
 
     background: none;
 
@@ -137,6 +141,10 @@
 
     cursor: pointer;
 
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
+
     &--opened {
       .tna-header__hamburger {
         height: 0;
@@ -427,6 +435,7 @@
 
     &__logo.tna-column {
       padding-left: grid.gutter-width-tiny();
+      flex: 1;
     }
 
     .tna-logo {