fixed-mobile-hamburger-to-header #2066

assets/sass/layout.scss

@@ -185,10 +185,18 @@ header {
   padding: 1rem 0;
 
   display: grid;
-  grid-template-areas:  "logo tagline search dark";
+  grid-template-areas:  "logo tagline search controls";
   grid-template-columns: auto 1fr     auto   auto;
   align-items: center;
 
+  .header-controls {
+    grid-area: controls;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding-left: 1rem;
+  }
+
   #logo {
     grid-area: logo;
     display: flex;
@@ -507,11 +515,18 @@ table.benchmarks {
 // Mobile
 @media (max-width: $mobile-m) {
   header {
-    grid-template-areas: "logo   tagline dark"
-                         "search search  search";
+    grid-template-areas: "logo tagline controls"
+                        "search search search";
+    padding: 0.5rem 1rem;
+
     #tagline {
       font-size: clamp(0.8rem, 3vw, 1.3rem);
     }
+
+    .header-controls {
+      padding-left: 0;
+      justify-content: flex-end;
+    }
   }
   #masthead {
     .inner { flex-direction: column-reverse; }

assets/sass/sidebar.scss

@@ -35,22 +35,27 @@ aside.sidebar.active {
 }
 .sidebar-btn {
   display: none;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  transition: opacity 0.2s ease;
+  filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(350deg);
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
 }
 
 // Breakpoint ----------------
 @media (max-width: $default) {
   .sidebar-btn {
-    @include background-image-2x($baseurl + "images/icons/sidebar", 24px, 24px, left center);
-    @include border-top-right-radius(5px);
-    @include border-bottom-right-radius(5px);
-    background-color: var(--black-3) !important;
+    @include background-image-2x($baseurl + "images/icons/sidebar", 24px, 24px, center center);
     display: block;
-    position: fixed;
-    padding: 2rem 0rem;
-    z-index: 1;
-    border: none;
-    left: 0;
-    width: 1.6rem;
   }
   .sidebar-btn:focus + .sidebar, .sidebar:focus-within {
     @include responsive-sidebar-ui;

layouts/_default/baseof.html

@@ -68,6 +68,7 @@ <h1>Redirecting&hellip;</h1>
   {{ $style := resources.Get "sass/application.scss" | resources.ExecuteAsTemplate "application.scss" . | css.Sass | resources.Minify | fingerprint }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}"{{ if (hasPrefix .Site.BaseURL "https://") }} integrity="{{ $style.Data.Integrity }}"{{ end }}>
   <script src="{{ relURL "js/modernizr.js" }}"></script>
+  <script src="{{ relURL "js/mobile-nav.js" }}"></script>
   <!--[if (gte IE 6)&(lte IE 8)]>
   <script src="{{ relURL "js/selectivizr-min.js" }}"></script>
   <![endif]-->

layouts/partials/header.html

@@ -21,5 +21,23 @@
     <div id="search-results"></div>
   </div>
   {{ end }}
-  <img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
+  <div class="header-controls">
+    <!-- toggle button for dark mode -->
+    <img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
+
+    <!-- toggle button for sidebar -->
+     {{ $section := .Scratch.Get "section" }}
+    {{ if or 
+      (eq $section "about") 
+      (eq $section "learn") 
+      (eq $section "tools") 
+      (eq $section "docs")
+      (eq $section "install") 
+      (eq $section "community")
+      (eq .Params.Subsection "reference")
+      (eq .Params.Subsection "manual")
+    }}
+      <button class="sidebar-btn" aria-label="Toggle menu"></button>
+    {{ end }}
+  </div>
 </header>

layouts/partials/sidebar.html

@@ -1,5 +1,4 @@
 {{ $section := .Scratch.Get "section" }}
-<div tabindex="1" class="sidebar-btn"></div>
 <aside class="sidebar" id="sidebar">
   <nav>
     <ul>

static/js/mobile-nav.js

@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const sidebarBtn = document.querySelector('.sidebar-btn');
+  const sidebar = document.getElementById('sidebar');
+
+  if (sidebarBtn && sidebar) {
+    // Set initial ARIA state
+    sidebarBtn.setAttribute('aria-expanded', 'false');
+
+    // Toggle sidebar when button is clicked
+    sidebarBtn.addEventListener('click', function() {
+      const isExpanded = this.getAttribute('aria-expanded') === 'true';
+      this.setAttribute('aria-expanded', !isExpanded);
+      sidebar.classList.toggle('active');
+    });
+
+    // Close sidebar when clicking outside
+    document.addEventListener('click', function(e) {
+      if (!sidebar.contains(e.target) && !sidebarBtn.contains(e.target)) {
+        sidebar.classList.remove('active');
+        sidebarBtn.setAttribute('aria-expanded', 'false');
+      }
+    });
+
+    // Close sidebar when pressing Escape key
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && sidebar.classList.contains('active')) {
+        sidebar.classList.remove('active');
+        sidebarBtn.setAttribute('aria-expanded', 'false');
+      }
+    });
+  }
+});