Make Hamburger menu tabbable

_includes/header.html

@@ -45,14 +45,11 @@ See also:
                 The search button shall always be visible.
             {% endcomment %}
             <a href="{{ 'search' | relative_url }}" class="outer-nav-item"><i class="fas fa-search"></i></a>
+            <button onclick="toggleMenu();scrollableHeader()" type="button" class="nav_toggle" id="menu-button">
+                <i class="fas fa-bars"></i>
+            </button>
 
-            {% comment %}
-                The following button shall be always minimized (hamburger menu).
-            {% endcomment %}
-            <input type="checkbox" id="mobile_toggle" class="d-none">
-            <label for="mobile_toggle" class="nav_toggle" onclick="scrollableHeader()"></label>
-
-            <nav>
+            <nav id="menu">
                 <ul class="nav-grid">
                     {% for category in site.data.navigation.header %}
                     <li class="nav-first-level">

_sass/common/_header.scss

@@ -105,27 +105,9 @@
         &:focus {
             color: $color-helmholtz-bright-blue;
         }
-
-        &:before {
-            font:           var(--fa-font-solid);
-            content:        "\f0c9";
-        }
-    }
-
-    /*
-    This SCSS part is used to mimic the behavior, previously implemented
-    via Javascript, in pure CSS using a technique called "Checkbox Hack"
-    https://css-tricks.com/the-checkbox-hack/. This works by connecting
-    a <label> with <input type="checkbox"> and hiding the <label>.
-    Clicking on the label toggles the :checked state of this ID and allows
-    for applying different style.
-    */
-    #mobile_toggle:checked ~ .nav_toggle::before {
-        content:        "\f00d";
-        color:          $color-helmholtz-blue;
     }
 
-    #mobile_toggle:checked ~ nav {
+    .nav-expanded {
 
         display:            flex;
         flex-direction:     column;

assets/js/header.js

@@ -21,3 +21,15 @@ function scrollableHeader() {
     document.getElementById("header").classList.toggle("scrollable-header");
     document.body.classList.toggle("no-scroll");
 }
+
+function toggleMenu() {
+    document.getElementById("menu").classList.toggle("nav-expanded");
+    menuIconClassList = document.getElementById("menu-button").firstElementChild.classList;
+    if (menuIconClassList.contains("fa-bars")) {
+        menuIconClassList.remove("fa-bars");
+        menuIconClassList.add("fa-x");
+    } else {
+        menuIconClassList.remove("fa-x");
+        menuIconClassList.add("fa-bars");
+    }
+}