feat: Refactor navbar and mobile menu into components for improved organization and maintainability

This commit is contained in:
zhangyuheng
2026-02-28 10:44:44 +08:00
parent 5772fc54c1
commit a3a972a2bc
9 changed files with 147 additions and 219 deletions

View File

@@ -451,42 +451,7 @@
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="nav-content">
<button class="mobile-toggle" id="mobile-toggle" aria-label="菜单">
<i class="fas fa-bars"></i>
</button>
<div class="logo">
<a href="/">
<img src="https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png" alt="白鹿原 Minecraft 服务器 Logo">
</a>
</div>
<div class="nav-links desktop-only">
<a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
<a href="https://mcmap.lunadeer.cn/">地图</a>
<a href="https://mcphoto.lunadeer.cn/">相册</a>
<a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
<a href="/stats.html" style="opacity: 1; font-weight: 600;">数据</a>
<a href="/sponsor.html">赞助</a>
</div>
<div class="nav-cta-container">
<a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439/doc/5yqg5ywl5pyn5yqh5zmo-WE4jkTxRmM" class="nav-cta">加入游戏</a>
</div>
</div>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu" id="mobile-menu">
<div class="mobile-menu-links">
<a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
<a href="https://mcmap.lunadeer.cn/">地图</a>
<a href="https://mcphoto.lunadeer.cn/">相册</a>
<a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
<a href="/stats.html" style="font-weight: 600;">数据</a>
<a href="/sponsor.html">赞助列表</a>
</div>
</div>
<div id="navbar-component"></div>
<!-- Hero Section -->
<header class="hero stats-hero" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/69267755e14e3.png');">
@@ -647,15 +612,9 @@
</div>
</div>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">白鹿原</div>
<p>&copy; 2025 白鹿原 Minecraft 服务器.</p>
</div>
</div>
</footer>
<div id="footer-component"></div>
<script src="components.js"></script>
<script src="stats_script.js"></script>
</body>
</html>