From ae09416c66dfadd1178b14138d796dfd80613aa3 Mon Sep 17 00:00:00 2001
From: MustafaGood <Mustafa.swedish@gmail.com>
Date: Tue, 25 Aug 2026 18:17:30 +0200
Subject: [PATCH] Make the mobile header menu usable and translated.

Replace the English hamburger labels with gettext and stack nav plus account actions when the menu is open.
---
 app/assets/stylesheets/responsive/custom.scss | 113 +++++++++++++++---
 lib/views/general/_responsive_header.html.erb |   8 +-
 locale-theme/en/app.po                        |   9 ++
 locale-theme/sv/app.po                        |   9 ++
 4 files changed, 123 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/responsive/custom.scss b/app/assets/stylesheets/responsive/custom.scss
index 4da2c7d59..4fdce46dd 100644
--- a/app/assets/stylesheets/responsive/custom.scss
+++ b/app/assets/stylesheets/responsive/custom.scss
@@ -560,29 +560,39 @@ p.locale-list-trigger {
     display: none;
   }
 
-  .rsp_menu_button{
+  .rsp_menu_button {
     position: absolute;
-    top: 5px; // vertically centre the button in the header
-    right: 4px; // 15px for margin minus 9 for background offset
-    @extend .image-replacement;
-    background-image: image-url('hamburger.png');
-    background-repeat: no-repeat;
-    background-position: center 10px;
-    background-size: 28px 26px;
+    top: 50%;
+    right: 8px;
+    transform: translateY(-50%);
     width: 44px;
-    height: 38px;
+    height: 44px;
     padding: 0;
-    /* Make sure clickable area covers image */
+    background-image: none;
+    text-indent: 0;
+    overflow: visible;
+
     a {
-      width: 100%;
-      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      color: $brand_primary;
+      text-decoration: none;
+      &:focus,
+      &:focus-visible {
+        outline: 2px solid $brand_primary;
+        outline-offset: 2px;
+      }
     }
   }
 
   &:target {
     .rsp_menu_button {
-      top: 5px;
-      right: 4px;
+      top: 8px;
+      right: 8px;
+      transform: none;
     }
   }
 }
@@ -1325,6 +1335,81 @@ a.button-tertiary {
   }
 }
 
+// Hamburger icon (CSS bars — no webfont, no raster sprite)
+.rsp_menu_button__bars {
+  display: block;
+  position: relative;
+  width: 22px;
+  height: 2px;
+  background-color: $brand_primary;
+  box-shadow: 0 7px 0 $brand_primary, 0 -7px 0 $brand_primary;
+}
+
+.rsp_menu_button__bars--close {
+  box-shadow: none;
+  transform: rotate(45deg);
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 22px;
+    height: 2px;
+    background-color: $brand_primary;
+    transform: rotate(90deg);
+  }
+}
+
+@media (max-width: $main_menu-mobile_menu_cutoff) {
+  #banner_content.banner_content {
+    position: relative;
+    padding: 12px 56px 12px 16px;
+  }
+
+  #banner:target {
+    #navigation_search.navigation_search,
+    #user_locale_switcher.locale-list {
+      display: block;
+      float: none;
+      width: auto;
+      padding: 12px 16px 0;
+    }
+
+    #topnav.topnav {
+      display: block;
+      padding: 8px 16px 16px;
+    }
+
+    .navigation {
+      display: block;
+      width: auto;
+      max-width: none;
+      margin: 0;
+      > li {
+        display: block;
+        float: none;
+      }
+    }
+
+    .topnav__auth {
+      display: block;
+      margin-top: 16px;
+      #logged_in_bar.logged_in_bar {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+        width: 100%;
+      }
+      .create-account-link,
+      .sign_in_link {
+        width: 100%;
+        text-align: center;
+      }
+    }
+  }
+}
+
 // ---- 3.1 Hero (title / subtitle boxes + CTAs over image) -------------------
 .homepage-hero {
   padding: 4em 0 5em;
diff --git a/lib/views/general/_responsive_header.html.erb b/lib/views/general/_responsive_header.html.erb
index 3987edf8b..a87c1cf29 100644
--- a/lib/views/general/_responsive_header.html.erb
+++ b/lib/views/general/_responsive_header.html.erb
@@ -9,8 +9,12 @@
       </div>
 
       <div class="rsp_menu_button">
-        <a href="#banner" class="open"> <i class="icon-menu"></i> Menu </a>
-        <a href="#" class="close"> <i class="icon-menu"></i> Close </a>
+        <a href="#banner" class="open" aria-label="<%= _('Open menu') %>">
+          <span class="rsp_menu_button__bars" aria-hidden="true"></span>
+        </a>
+        <a href="#" class="close" aria-label="<%= _('Close menu') %>">
+          <span class="rsp_menu_button__bars rsp_menu_button__bars--close" aria-hidden="true"></span>
+        </a>
       </div>
 
       <div id="navigation_search" class="navigation_search">
diff --git a/locale-theme/en/app.po b/locale-theme/en/app.po
index 6f58130da..b9bc7851d 100644
--- a/locale-theme/en/app.po
+++ b/locale-theme/en/app.po
@@ -5,3 +5,12 @@
 #
 # msgid "Make and browse Freedom of Information (FOI) requests"
 # msgstr "Make and browse Right to Know (RTI) requests"
+
+msgid "Open menu"
+msgstr "Open menu"
+
+msgid "Close menu"
+msgstr "Close menu"
+
+msgid "Create account"
+msgstr "Create account"
diff --git a/locale-theme/sv/app.po b/locale-theme/sv/app.po
index 1e69da2ba..ce86a85a3 100644
--- a/locale-theme/sv/app.po
+++ b/locale-theme/sv/app.po
@@ -8,3 +8,12 @@
 
 msgid "Services"
 msgstr "Tjänster"
+
+msgid "Open menu"
+msgstr "Öppna menyn"
+
+msgid "Close menu"
+msgstr "Stäng menyn"
+
+msgid "Create account"
+msgstr "Skapa konto"