对网页CSS进行重构

website/docs/architecture.html

@@ -16,6 +16,11 @@
 
     <main class="page-docs">
         <header class="docs-header">
+            <button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+            </button>
             <div class="docs-header-title">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
             </div>
         </header>
 
+        <div class="docs-sidebar-overlay" id="docs-overlay"></div>
+
         <div class="docs-layout">
-            <aside class="docs-sidebar">
+            <aside class="docs-sidebar" id="docs-sidebar">
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">入门</div>
                     <a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">快速开始</div>
-                    <a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">插件</div>
@@ -101,5 +107,60 @@
     <script src="../js/particles.js"></script>
     <script src="../js/parallax.js"></script>
     <script src="../js/animations.js"></script>
+    <script>
+    // 汉堡菜单交互逻辑
+    (function() {
+        const hamburger = document.getElementById('docs-hamburger');
+        const sidebar = document.getElementById('docs-sidebar');
+        const overlay = document.getElementById('docs-overlay');
+        
+        if (!hamburger || !sidebar || !overlay) return;
+        
+        function openSidebar() {
+            sidebar.classList.add('is-open');
+            overlay.classList.add('is-visible');
+            hamburger.classList.add('is-active');
+            document.body.style.overflow = 'hidden';
+        }
+        
+        function closeSidebar() {
+            sidebar.classList.remove('is-open');
+            overlay.classList.remove('is-visible');
+            hamburger.classList.remove('is-active');
+            document.body.style.overflow = ''';
+        }
+        
+        function toggleSidebar() {
+            if (sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            } else {
+                openSidebar();
+            }
+        }
+        
+        hamburger.addEventListener('click', toggleSidebar);
+        overlay.addEventListener('click', closeSidebar);
+        
+        sidebar.querySelectorAll('.docs-nav-item).forEach(link => {
+            link.addEventListener('click', closeSidebar);
+        });
+        
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            }
+        });
+        
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+                if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
+                    closeSidebar();
+                }
+            }, 100);
+        });
+    })();
+    </script>
 </body>
 </html>

website/docs/development.html

@@ -16,6 +16,11 @@
 
     <main class="page-docs">
         <header class="docs-header">
+            <button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+            </button>
             <div class="docs-header-title">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
             </div>
         </header>
 
+        <div class="docs-sidebar-overlay" id="docs-overlay"></div>
+
         <div class="docs-layout">
-            <aside class="docs-sidebar">
+            <aside class="docs-sidebar" id="docs-sidebar">
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">入门</div>
                     <a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">快速开始</div>
-                    <a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">插件</div>
@@ -120,5 +126,60 @@ class MyPlugin(Plugin):
     <script src="../js/particles.js"></script>
     <script src="../js/parallax.js"></script>
     <script src="../js/animations.js"></script>
+    <script>
+    // 汉堡菜单交互逻辑
+    (function() {
+        const hamburger = document.getElementById('docs-hamburger');
+        const sidebar = document.getElementById('docs-sidebar');
+        const overlay = document.getElementById('docs-overlay');
+        
+        if (!hamburger || !sidebar || !overlay) return;
+        
+        function openSidebar() {
+            sidebar.classList.add('is-open');
+            overlay.classList.add('is-visible');
+            hamburger.classList.add('is-active');
+            document.body.style.overflow = 'hidden';
+        }
+        
+        function closeSidebar() {
+            sidebar.classList.remove('is-open');
+            overlay.classList.remove('is-visible');
+            hamburger.classList.remove('is-active');
+            document.body.style.overflow = ''';
+        }
+        
+        function toggleSidebar() {
+            if (sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            } else {
+                openSidebar();
+            }
+        }
+        
+        hamburger.addEventListener('click', toggleSidebar);
+        overlay.addEventListener('click', closeSidebar);
+        
+        sidebar.querySelectorAll('.docs-nav-item).forEach(link => {
+            link.addEventListener('click', closeSidebar);
+        });
+        
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            }
+        });
+        
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+                if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
+                    closeSidebar();
+                }
+            }, 100);
+        });
+    })();
+    </script>
 </body>
 </html>

website/docs/index.html

@@ -16,6 +16,11 @@
 
     <main class="page-docs">
         <header class="docs-header">
+            <button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+            </button>
             <div class="docs-header-title">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
             </div>
         </header>
 
+        <div class="docs-sidebar-overlay" id="docs-overlay"></div>
+
         <div class="docs-layout">
-            <aside class="docs-sidebar">
+            <aside class="docs-sidebar" id="docs-sidebar">
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">入门</div>
                     <a href="index.html" class="docs-nav-item active">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">快速开始</div>
-                    <a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">插件</div>
@@ -100,6 +106,63 @@
     <script src="../js/parallax.js"></script>
     <script src="../js/animations.js"></script>
     <script>
+    // 汉堡菜单交互逻辑
+    (function() {
+        const hamburger = document.getElementById('docs-hamburger');
+        const sidebar = document.getElementById('docs-sidebar');
+        const overlay = document.getElementById('docs-overlay');
+        
+        if (!hamburger || !sidebar || !overlay) return;
+        
+        function openSidebar() {
+            sidebar.classList.add('is-open');
+            overlay.classList.add('is-visible');
+            hamburger.classList.add('is-active');
+            document.body.style.overflow = 'hidden';
+        }
+        
+        function closeSidebar() {
+            sidebar.classList.remove('is-open');
+            overlay.classList.remove('is-visible');
+            hamburger.classList.remove('is-active');
+            document.body.style.overflow = '';
+        }
+        
+        function toggleSidebar() {
+            if (sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            } else {
+                openSidebar();
+            }
+        }
+        
+        hamburger.addEventListener('click', toggleSidebar);
+        overlay.addEventListener('click', closeSidebar);
+        
+        // 点击导航链接后关闭侧边栏
+        sidebar.querySelectorAll('.docs-nav-item').forEach(link => {
+            link.addEventListener('click', closeSidebar);
+        });
+        
+        // ESC 键关闭侧边栏
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            }
+        });
+        
+        // 窗口大小改变时重置状态
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+                if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
+                    closeSidebar();
+                }
+            }, 100);
+        });
+    })();
+    
     document.querySelectorAll('pre code').forEach(function(block) {
         if (typeof hljs !== 'undefined') hljs.highlightElement(block);
     });

website/docs/plugins.html

@@ -16,6 +16,11 @@
 
     <main class="page-docs">
         <header class="docs-header">
+            <button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+            </button>
             <div class="docs-header-title">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
             </div>
         </header>
 
+        <div class="docs-sidebar-overlay" id="docs-overlay"></div>
+
         <div class="docs-layout">
-            <aside class="docs-sidebar">
+            <aside class="docs-sidebar" id="docs-sidebar">
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">入门</div>
                     <a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">快速开始</div>
-                    <a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">插件</div>
@@ -86,5 +92,60 @@
     <script src="../js/particles.js"></script>
     <script src="../js/parallax.js"></script>
     <script src="../js/animations.js"></script>
+    <script>
+    // 汉堡菜单交互逻辑
+    (function() {
+        const hamburger = document.getElementById('docs-hamburger');
+        const sidebar = document.getElementById('docs-sidebar');
+        const overlay = document.getElementById('docs-overlay');
+        
+        if (!hamburger || !sidebar || !overlay) return;
+        
+        function openSidebar() {
+            sidebar.classList.add('is-open');
+            overlay.classList.add('is-visible');
+            hamburger.classList.add('is-active');
+            document.body.style.overflow = 'hidden';
+        }
+        
+        function closeSidebar() {
+            sidebar.classList.remove('is-open');
+            overlay.classList.remove('is-visible');
+            hamburger.classList.remove('is-active');
+            document.body.style.overflow = ''';
+        }
+        
+        function toggleSidebar() {
+            if (sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            } else {
+                openSidebar();
+            }
+        }
+        
+        hamburger.addEventListener('click', toggleSidebar);
+        overlay.addEventListener('click', closeSidebar);
+        
+        sidebar.querySelectorAll('.docs-nav-item).forEach(link => {
+            link.addEventListener('click', closeSidebar);
+        });
+        
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            }
+        });
+        
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+                if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
+                    closeSidebar();
+                }
+            }, 100);
+        });
+    })();
+    </script>
 </body>
 </html>

website/docs/quickstart.html

@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>快速开始 - Future OSS 文档</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="../css/main.css" />
-    <link rel="stylesheet" href="../css/dock.css" />
-    <link rel="stylesheet" href="../css/docs.css" />
-</head>
-<body>
-    <canvas id="particles"></canvas>
-    <div id="dock-container"></div>
-
-    <main class="page-docs">
-        <header class="docs-header">
-            <div class="docs-header-title">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
-                </svg>
-                <span>文档中心</span>
-            </div>
-            <div class="docs-header-breadcrumb">快速开始 · 三步运行</div>
-            <div class="docs-header-actions">
-                <a href="https://gitee.com/starlight-apk/feature-oss/wikis" target="_blank" class="docs-wiki-link">完整 Wiki</a>
-            </div>
-        </header>
-
-        <div class="docs-layout">
-            <aside class="docs-sidebar">
-                <div class="docs-nav-section">
-                    <div class="docs-nav-section-title">入门</div>
-                    <a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
-                    <a href="why-python.html" class="docs-nav-item">为什么选择 Python<span class="nav-path">/ 技术选型</span></a>
-                    <a href="architecture.html" class="docs-nav-item">架构设计<span class="nav-path">/ 三层架构</span></a>
-                </div>
-                <div class="docs-nav-section">
-                    <div class="docs-nav-section-title">快速开始</div>
-                    <a href="quickstart.html" class="docs-nav-item active">三步运行<span class="nav-path">/ 安装部署</span></a>
-                </div>
-                <div class="docs-nav-section">
-                    <div class="docs-nav-section-title">插件</div>
-                    <a href="plugins.html" class="docs-nav-item">官方插件列表<span class="nav-path">/ 12+ 插件</span></a>
-                    <a href="development.html" class="docs-nav-item">插件开发指南<span class="nav-path">/ 开发基础</span></a>
-                </div>
-            </aside>
-
-            <div class="docs-content-wrapper">
-                <article class="docs-content">
-                    <h1>🚀 三步运行</h1>
-
-                    <h2>步骤 1：克隆代码</h2>
-                    <pre><code>git clone https://gitee.com/starlight-apk/feature-oss.git
-cd feature-oss</code></pre>
-
-                    <h2>步骤 2：安装依赖</h2>
-                    <pre><code>pip install -r requirements.txt
-pip install -e .</code></pre>
-
-                    <h2>步骤 3：启动服务</h2>
-                    <pre><code>bash start.sh
-# 或 Windows: start.bat</code></pre>
-
-                    <p>启动后访问 <code>http://localhost:8080/</code> 即可看到网站。</p>
-
-                    <h2>系统要求</h2>
-                    <ul>
-                        <li>Python 3.8+</li>
-                        <li>Linux / macOS / Windows</li>
-                        <li>核心依赖：click、pyyaml、websockets</li>
-                    </ul>
-
-                    <h2>常用命令</h2>
-                    <table>
-                        <thead><tr><th>命令</th><th>说明</th></tr></thead>
-                        <tbody>
-                            <tr><td><code>oss serve</code></td><td>启动框架服务</td></tr>
-                            <tr><td><code>oss init</code></td><td>初始化项目配置</td></tr>
-                            <tr><td><code>oss version</code></td><td>查看版本号</td></tr>
-                            <tr><td><code>oss status</code></td><td>查看插件运行状态</td></tr>
-                            <tr><td><code>oss pkg install @{作者}/插件名</code></td><td>安装远程插件</td></tr>
-                            <tr><td><code>oss pkg list</code></td><td>列出已安装插件</td></tr>
-                        </tbody>
-                    </table>
-                </article>
-            </div>
-        </div>
-    </main>
-
-    <a href="https://gitee.com/starlight-apk/feature-oss/wikis" target="_blank" class="docs-wiki-btn">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
-        </svg>
-        <span>获取更多信息</span>
-    </a>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
-    <script src="../js/dock.js"></script>
-    <script src="../js/particles.js"></script>
-    <script src="../js/parallax.js"></script>
-    <script src="../js/animations.js"></script>
-</body>
-</html>

website/docs/why-python.html

@@ -16,6 +16,11 @@
 
     <main class="page-docs">
         <header class="docs-header">
+            <button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+                <span class="docs-hamburger-line"></span>
+            </button>
             <div class="docs-header-title">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
             </div>
         </header>
 
+        <div class="docs-sidebar-overlay" id="docs-overlay"></div>
+
         <div class="docs-layout">
-            <aside class="docs-sidebar">
+            <aside class="docs-sidebar" id="docs-sidebar">
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">入门</div>
                     <a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">快速开始</div>
-                    <a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
                 </div>
                 <div class="docs-nav-section">
                     <div class="docs-nav-section-title">插件</div>
@@ -94,5 +100,60 @@
     <script src="../js/particles.js"></script>
     <script src="../js/parallax.js"></script>
     <script src="../js/animations.js"></script>
+    <script>
+    // 汉堡菜单交互逻辑
+    (function() {
+        const hamburger = document.getElementById('docs-hamburger');
+        const sidebar = document.getElementById('docs-sidebar');
+        const overlay = document.getElementById('docs-overlay');
+        
+        if (!hamburger || !sidebar || !overlay) return;
+        
+        function openSidebar() {
+            sidebar.classList.add('is-open');
+            overlay.classList.add('is-visible');
+            hamburger.classList.add('is-active');
+            document.body.style.overflow = 'hidden';
+        }
+        
+        function closeSidebar() {
+            sidebar.classList.remove('is-open');
+            overlay.classList.remove('is-visible');
+            hamburger.classList.remove('is-active');
+            document.body.style.overflow = ''';
+        }
+        
+        function toggleSidebar() {
+            if (sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            } else {
+                openSidebar();
+            }
+        }
+        
+        hamburger.addEventListener('click', toggleSidebar);
+        overlay.addEventListener('click', closeSidebar);
+        
+        sidebar.querySelectorAll('.docs-nav-item).forEach(link => {
+            link.addEventListener('click', closeSidebar);
+        });
+        
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
+                closeSidebar();
+            }
+        });
+        
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+                if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
+                    closeSidebar();
+                }
+            }, 100);
+        });
+    })();
+    </script>
 </body>
 </html>