Add Consoles page (#1085)

_includes/footer.html

@@ -32,6 +32,7 @@
 					<li><a href="/press/">{% t footer.press_kit %}</a></li>
 					<li><a href="/showcase/">{% t footer.showcase %}</a></li>
 					<li><a href="/education/">{% t footer.education %}</a></li>
+					<li><a href="/consoles/">{% t footer.console_support %}</a></li>
 				</ul>
 			</div>
 			<div class="col">

_includes/header.html

@@ -16,11 +16,14 @@
 
 		<nav id="nav">
 			<ul class="left">
-				<li><a href="/features/">{% t header.features %}</a></li>
+				<!-- On hover, opens a dropdown containing the link to console support page -->
+				<li><a href="/features/" data-dropdown="features-dropdown">{% t header.features %}</a></li>
 				<li><a href="/showcase/">{% t header.showcase %}</a></li>
 				<li><a href="/blog/">{% t header.blog %}</a></li>
 				<li><a href="/community/">{% t header.community %}</a></li>
 				<li><a href="https://godotengine.org/asset-library/asset">{% t header.assets %}</a></li>
+				<!-- Show console support link in the mobile hamburger menu -->
+				<li class="mobile-only"><a href="/consoles/">{% t header.console_support %}</a></li>
 			</ul>
 
 			<ul class="right">
@@ -60,6 +63,16 @@
 	{% endcomment %}
 </header>
 
+<!-- Dropdown menu positioned outside header to avoid backdrop-filter nesting issues -->
+<div class="nav-dropdown-menu" id="features-dropdown">
+	<!-- The features link is only visible on high-resolution tablets -->
+	<!-- On desktop we show the dropdown on hover, and the user can navigate to the features page by clicking the link in main menu-->
+	<!-- And on small screens (width < 1200px) we switch to mobile hamburger menu -->
+	<!-- So we need this only to cover the edge case of high-resolution tablets -->
+	<a href="/features/" class="touch-only">{% t header.features %}</a>
+	<a href="/consoles/">{% t header.console_support %}</a>
+</div>
+
 {% if page.localize %}
 <script type="module">
 	let _languageSelector = null;
@@ -210,4 +223,86 @@
 </script>
 {% endif %}
 
+<script>
+	// Open dropdown on hover (desktop) or tap (touch devices)
+	document.addEventListener('DOMContentLoaded', function() {
+		// Detect if device has touch capability
+		const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+		
+		// Find all dropdown triggers
+		const dropdownTriggers = document.querySelectorAll('[data-dropdown]');
+		
+		dropdownTriggers.forEach(trigger => {
+			const dropdownId = trigger.getAttribute('data-dropdown');
+			const dropdownMenu = document.getElementById(dropdownId);
+			
+			if (dropdownMenu) {
+				let hideTimeout;
+
+				function showDropdown() {
+					// Don't show dropdown on small screens (width < 1200px)
+					if (window.innerWidth < 1200) return;
+					clearTimeout(hideTimeout);
+					const rect = trigger.getBoundingClientRect();
+					dropdownMenu.style.top = (rect.bottom) + 'px';
+					dropdownMenu.style.left = (rect.left) + 'px';
+					dropdownMenu.style.display = 'block';
+					trigger.classList.add('dropdown-open');
+				}
+
+				// Hide dropdown after a delay
+				function hideDropdown() {
+					hideTimeout = setTimeout(() => {
+						dropdownMenu.style.display = 'none';
+						trigger.classList.remove('dropdown-open');
+					}, 100);
+				}
+				
+				// Toggle dropdown on high-resolution tablets
+				function toggleDropdown(event) {
+					if (window.innerWidth < 1200) return; 
+					event.preventDefault();
+					const isVisible = dropdownMenu.style.display === 'block';
+					if (isVisible) {
+						dropdownMenu.style.display = 'none';
+						trigger.classList.remove('dropdown-open');
+					} else {
+						showDropdown();
+					}
+				}
+				
+				if (isTouchDevice) {
+					// Touch device: use click/tap to toggle dropdown
+					trigger.addEventListener('click', toggleDropdown);
+				} else {
+					// Desktop: use hover
+					trigger.addEventListener('mouseenter', showDropdown);
+					trigger.addEventListener('mouseleave', hideDropdown);
+					
+					// Keep dropdown visible when hovering over it
+					dropdownMenu.addEventListener('mouseenter', () => clearTimeout(hideTimeout));
+					dropdownMenu.addEventListener('mouseleave', hideDropdown);
+				}
+			}
+		});
+		
+		// Close dropdown when clicking outside (for touch devices)
+		if (isTouchDevice) {
+			document.addEventListener('click', function(event) {
+				dropdownTriggers.forEach(trigger => {
+					const dropdownId = trigger.getAttribute('data-dropdown');
+					const dropdownMenu = document.getElementById(dropdownId);
+					
+					if (dropdownMenu && 
+						!trigger.contains(event.target) && 
+						!dropdownMenu.contains(event.target)) {
+						dropdownMenu.style.display = 'none';
+						trigger.classList.remove('dropdown-open');
+					}
+				});
+			});
+		}
+	});
+</script>
+
 <main>