init

scratch-gui/static/js/nav-responsive.js

@@ -0,0 +1,55 @@
+// 响应式导航（home / ai / competition_list / aboutus 共用）：
+// 页面在 header 内放置 <button class="nav-toggle">，≤960px 时显示汉堡按钮，
+// 点击切换 header.nav-open，CSS 控制折叠面板与 .nav-backdrop 遮罩。
+(function () {
+    function initNavResponsive() {
+        var toggles = document.querySelectorAll('.nav-toggle');
+        if (!toggles.length) return;
+
+        function syncBody() {
+            document.body.classList.toggle('nav-open', !!document.querySelector('header.nav-open'));
+        }
+
+        function setOpen(header, btn, open) {
+            header.classList.toggle('nav-open', open);
+            btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+            btn.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
+            syncBody();
+        }
+
+        toggles.forEach(function (btn) {
+            var header = btn.closest('header');
+            if (!header || header.dataset.navReady) return;
+            header.dataset.navReady = '1';
+
+            var backdrop = document.createElement('div');
+            backdrop.className = 'nav-backdrop';
+            header.appendChild(backdrop);
+
+            btn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                setOpen(header, btn, !header.classList.contains('nav-open'));
+            });
+            backdrop.addEventListener('click', function () {
+                setOpen(header, btn, false);
+            });
+            header.addEventListener('click', function (e) {
+                if (e.target.closest('.nav__links a, .nav-list a, .navbar-collapse a, .navbar-logout')) {
+                    setOpen(header, btn, false);
+                }
+            });
+            document.addEventListener('keydown', function (e) {
+                if (e.key === 'Escape') setOpen(header, btn, false);
+            });
+            window.addEventListener('resize', function () {
+                if (window.innerWidth > 960) setOpen(header, btn, false);
+            });
+        });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initNavResponsive);
+    } else {
+        initNavResponsive();
+    }
+})();