Initial commit: peptide-starter theme v1.3.1

assets/js/navigation.js

@@ -0,0 +1,84 @@
+/**
+ * Navigation and Mobile Menu Toggle
+ * Peptide Starter Theme
+ *
+ * Handles:
+ * - Mobile hamburger menu toggle
+ * - Navigation overlay click handling
+ * - Menu state persistence
+ */
+
+(function() {
+	'use strict';
+
+	const menuToggle = document.querySelector('.menu-toggle');
+	const primaryNav = document.querySelector('.primary-navigation');
+	const navOverlay = document.querySelector('.nav-overlay');
+
+	if (!menuToggle || !primaryNav || !navOverlay) {
+		return;
+	}
+
+	/**
+	 * Toggle mobile menu visibility
+	 */
+	function toggleMenu() {
+		const isActive = primaryNav.classList.contains('active');
+
+		if (isActive) {
+			closeMenu();
+		} else {
+			openMenu();
+		}
+	}
+
+	/**
+	 * Open mobile menu
+	 */
+	function openMenu() {
+		primaryNav.classList.add('active');
+		navOverlay.classList.add('active');
+		document.body.style.overflow = 'hidden';
+		menuToggle.setAttribute('aria-expanded', 'true');
+	}
+
+	/**
+	 * Close mobile menu
+	 */
+	function closeMenu() {
+		primaryNav.classList.remove('active');
+		navOverlay.classList.remove('active');
+		document.body.style.overflow = '';
+		menuToggle.setAttribute('aria-expanded', 'false');
+	}
+
+	// Menu toggle button click
+	menuToggle.addEventListener('click', toggleMenu);
+
+	// Overlay click
+	navOverlay.addEventListener('click', closeMenu);
+
+	// Close menu when a nav link is clicked
+	const navLinks = primaryNav.querySelectorAll('a');
+	navLinks.forEach(link => {
+		link.addEventListener('click', closeMenu);
+	});
+
+	// Close menu on Escape key
+	document.addEventListener('keydown', (e) => {
+		if (e.key === 'Escape') {
+			closeMenu();
+		}
+	});
+
+	// Set initial aria-expanded state
+	menuToggle.setAttribute('aria-expanded', 'false');
+
+	// Close menu when window is resized above mobile breakpoint
+	const mediaQuery = window.matchMedia('(min-width: 768px)');
+	mediaQuery.addEventListener('change', (e) => {
+		if (e.matches) {
+			closeMenu();
+		}
+	});
+})();