From dd2a33c213a0bd320d6cd91fb224cccbb6044c83 Mon Sep 17 00:00:00 2001
From: Patrice Chalin <pchalin@gmail.com>
Date: Sat, 6 Apr 2024 06:13:24 -0400
Subject: [PATCH] [Dark-mode] Fixes for mobile

---
 assets/js/dark-mode.js              |  6 ++++--
 assets/scss/_nav.scss               | 23 ++++++++++++++---------
 layouts/partials/navbar.html        |  2 +-
 layouts/partials/theme-toggler.html |  4 +++-
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js
index 48148e9a81..2b480b1c94 100644
--- a/assets/js/dark-mode.js
+++ b/assets/js/dark-mode.js
@@ -54,8 +54,10 @@
     btnToActive.classList.add('active')
     btnToActive.setAttribute('aria-pressed', 'true')
     activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
-    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+    if (themeSwitcherText) {
+      const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+      themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+    }
 
     if (focus) {
       themeSwitcher.focus()
diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index c518f7503e..dde0e276ce 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -92,15 +92,20 @@
     }
   }
 
-  // Support for showLightDarkModeMenu:
-  .bi {
-    width: 1em;
-    height: 1em;
-    vertical-align: -.125em;
-    fill: currentcolor;
-  }
-  .td-navbar .dropdown-menu .active .bi {
-    display: block !important
+  .td-light-dark-menu {
+    .bi {
+      // Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/_default/examples.html
+      width: 1em;
+      height: 1em;
+      vertical-align: -.125em;
+      fill: currentcolor;
+    }
+
+    &.dropdown {
+      @include media-breakpoint-down(lg) {
+        position: unset;
+      }
+    }
   }
 }
 
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 0690aca5d2..3ac3a365d8 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -58,7 +58,7 @@
       </li>
       {{ end -}}
       {{ if .Site.Params.ui.showLightDarkModeMenu -}}
-      <li class="nav-item dropdown">
+      <li class="td-light-dark-menu nav-item dropdown">
         {{ partial "theme-toggler" . }}
       </li>
       {{ end -}}
diff --git a/layouts/partials/theme-toggler.html b/layouts/partials/theme-toggler.html
index ee52aab5f3..2892220472 100644
--- a/layouts/partials/theme-toggler.html
+++ b/layouts/partials/theme-toggler.html
@@ -27,7 +27,9 @@
         {{ if not $isExamples }}data-bs-display="static"{{ end }}
         aria-label="Toggle theme (auto)">
   <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
-  <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
+  {{- /* Disable menu name for Docsy:
+    <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
+  */}}
 </button>
 <ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
   <li>