This is an automated email from the ASF dual-hosted git repository. acassis pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/nuttx-website.git
commit b1507ae9ecb72301b36d9800ed8fa46788f0b1f7 Author: Abhishek Mishra <[email protected]> AuthorDate: Tue Feb 24 13:33:21 2026 +0530 hamburger menu on right --- _includes/themes/apache/_navigation.html | 29 ++++++++++++++----- _includes/themes/apache/default.html | 16 ++++++----- assets/themes/apache/css/modern.css | 49 ++++++++++++++++++++++++++++++-- 3 files changed, 77 insertions(+), 17 deletions(-) diff --git a/_includes/themes/apache/_navigation.html b/_includes/themes/apache/_navigation.html index 031ccfc05e..05930949dc 100644 --- a/_includes/themes/apache/_navigation.html +++ b/_includes/themes/apache/_navigation.html @@ -5,12 +5,6 @@ <span class="logo-text">Apache NuttX®</span> </a> - <button class="mobile-toggle" id="mobileToggle" aria-label="Menu"> - <span class="hamburger-line"></span> - <span class="hamburger-line"></span> - <span class="hamburger-line"></span> - </button> - <div class="navbar-nav" id="navbarNav"> <div class="nav-item"> <button class="nav-btn" type="button"> @@ -71,9 +65,30 @@ <a href="https://www.apache.org/foundation/thanks.html"; target="_blank">Thanks</a> </div> </div> + + <div class="mobile-theme-item"> + <button class="theme-btn mobile-theme-btn" id="themeBtn" aria-label="Toggle theme"> + <span class="theme-label">Theme</span> + <svg class="sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> + <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/> + <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> + <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/> + <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> + </svg> + <svg class="moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> + <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> + </svg> + </button> + </div> </div> - <button class="theme-btn" id="themeBtn" aria-label="Toggle theme"> + <button class="mobile-toggle" id="mobileToggle" aria-label="Menu"> + <span class="hamburger-line"></span> + <span class="hamburger-line"></span> + <span class="hamburger-line"></span> + </button> + + <button class="theme-btn desktop-theme-btn" id="desktopThemeBtn" aria-label="Toggle theme"> <svg class="sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> diff --git a/_includes/themes/apache/default.html b/_includes/themes/apache/default.html index 616dac94f8..bf05dd173d 100644 --- a/_includes/themes/apache/default.html +++ b/_includes/themes/apache/default.html @@ -56,7 +56,7 @@ <script> // Theme Toggle with System Preference (function() { - const themeBtn = document.getElementById('themeBtn'); + const themeBtns = document.querySelectorAll('[id*="themeBtn"]'); // Both desktop and mobile buttons const html = document.documentElement; // Check for saved theme preference or default to system preference @@ -72,12 +72,14 @@ html.setAttribute('data-theme', currentTheme); - if (themeBtn) { - themeBtn.addEventListener('click', function() { - const theme = html.getAttribute('data-theme'); - const newTheme = theme === 'dark' ? 'light' : 'dark'; - html.setAttribute('data-theme', newTheme); - localStorage.setItem('theme', newTheme); + if (themeBtns.length > 0) { + themeBtns.forEach(function(btn) { + btn.addEventListener('click', function() { + const theme = html.getAttribute('data-theme'); + const newTheme = theme === 'dark' ? 'light' : 'dark'; + html.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + }); }); } })(); diff --git a/assets/themes/apache/css/modern.css b/assets/themes/apache/css/modern.css index a72da7a608..56fa434aad 100644 --- a/assets/themes/apache/css/modern.css +++ b/assets/themes/apache/css/modern.css @@ -262,6 +262,18 @@ body { order: 3; } +.desktop-theme-btn { + display: flex; +} + +.mobile-theme-btn { + display: none; +} + +.mobile-theme-item { + display: none; +} + .theme-btn:hover { background: rgba(59, 130, 246, 0.1); border-color: var(--accent-primary); @@ -326,9 +338,40 @@ body { order: 2; } - .theme-btn { - order: 3; - margin-left: 0.5rem; + .desktop-theme-btn { + display: none; + } + + .mobile-theme-btn { + display: flex; + } + + .mobile-theme-item { + display: flex; + align-items: center; + border-bottom: 1px solid var(--border-color); + padding: 16px 20px; + gap: 0.5rem; + } + + .mobile-theme-btn { + width: 100%; + border: none; + padding: 0; + justify-content: space-between; + align-items: center; + font-size: 14px; + font-weight: 500; + color: var(--text-primary); + } + + .mobile-theme-btn:hover { + background: var(--bg-card); + } + + .theme-label { + display: inline; + flex: 1; } .navbar-nav.active {
