🌈 Sync 2026-09-24 15:19:50

luci-theme-argon/htdocs/luci-static/resources/menu-argon.js

@@ -16,6 +16,15 @@ const SlideAnimations = {
 		slow: 600
 	},
 
+	getDuration: function(duration) {
+		if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+			return 0;
+
+		return typeof duration === 'string' ?
+			(this.durations[duration] || this.durations.normal) :
+			(duration || this.durations.normal);
+	},
+
 	/**
 	 * Map to track running animations and their cleanup functions
 	 */
@@ -37,9 +46,7 @@ const SlideAnimations = {
 		this.stop(element);
 		
 		// Convert duration string to milliseconds
-		const animDuration = typeof duration === 'string' ? 
-			this.durations[duration] || this.durations.normal : 
-			(duration || this.durations.normal);
+		const animDuration = this.getDuration(duration);
 		
 		// Store original styles
 		const originalStyles = {
@@ -103,9 +110,7 @@ const SlideAnimations = {
 		this.stop(element);
 		
 		// Convert duration string to milliseconds
-		const animDuration = typeof duration === 'string' ? 
-			this.durations[duration] || this.durations.normal : 
-			(duration || this.durations.normal);
+		const animDuration = this.getDuration(duration);
 		
 		// Store original styles
 		const originalStyles = {
@@ -222,7 +227,7 @@ return baseclass.extend({
 		}
 
 		// Attach event listeners for sidebar toggle functionality
-		var sidebarToggle = document.querySelector('a.showSide');
+		var sidebarToggle = document.querySelector('.showSide');
 		var darkMask = document.querySelector('.darkMask');
 		
 		if (sidebarToggle) {
@@ -231,6 +236,12 @@ return baseclass.extend({
 		if (darkMask) {
 			darkMask.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
 		}
+		document.addEventListener('keydown', function(ev) {
+			if (ev.key === 'Escape' && sidebarToggle && sidebarToggle.classList.contains('active')) {
+				sidebarToggle.click();
+				sidebarToggle.focus();
+			}
+		});
 	},
 
 	/**
@@ -415,12 +426,8 @@ return baseclass.extend({
 			container.style.display = '';
 
 			// Recursively render nested tab menus if there's an active node
-			if (activeNode) {
-				var nestedTabs = this.renderTabMenu(activeNode, url + '/' + activeNode.name, currentLevel);
-				if (nestedTabs.children.length > 0) {
-					container.appendChild(nestedTabs);
-				}
-			}
+			if (activeNode)
+				this.renderTabMenu(activeNode, url + '/' + activeNode.name, currentLevel);
 		}
 
 		return tabContainer;
@@ -432,7 +439,7 @@ return baseclass.extend({
 	 * @param {Event} ev - Click event from sidebar toggle button or dark mask
 	 */
 	handleSidebarToggle: function (ev) {
-		var showSideButton = document.querySelector('a.showSide');
+		var showSideButton = document.querySelector('.showSide');
 		var sidebar = document.querySelector('#mainmenu');
 		var darkMask = document.querySelector('.darkMask');
 		var scrollbarArea = document.querySelector('.main-right');
@@ -447,12 +454,14 @@ return baseclass.extend({
 		if (showSideButton.classList.contains('active')) {
 			// Close sidebar
 			showSideButton.classList.remove('active');
+			showSideButton.setAttribute('aria-expanded', 'false');
 			sidebar.classList.remove('active');
 			scrollbarArea.classList.remove('active');
 			darkMask.classList.remove('active');
 		} else {
 			// Open sidebar
 			showSideButton.classList.add('active');
+			showSideButton.setAttribute('aria-expanded', 'true');
 			sidebar.classList.add('active');
 			scrollbarArea.classList.add('active');
 			darkMask.classList.add('active');