feat: 添加移动端汉堡菜单支持并优化响应式布局

src/app.css

@@ -245,6 +245,102 @@ a:hover {
 	color: var(--header-text-hover);
 }
 
+/* Mobile Hamburger Menu */
+.mobile-menu-btn {
+	display: none;
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 10px;
+	z-index: 1100;
+}
+
+.mobile-menu-btn span {
+	display: block;
+	width: 25px;
+	height: 3px;
+	background-color: var(--header-text);
+	margin: 5px 0;
+	transition: all 0.3s;
+	border-radius: 2px;
+}
+
+.mobile-menu-btn.open span:nth-child(1) {
+	transform: rotate(45deg) translate(5px, 6px);
+}
+
+.mobile-menu-btn.open span:nth-child(2) {
+	opacity: 0;
+}
+
+.mobile-menu-btn.open span:nth-child(3) {
+	transform: rotate(-45deg) translate(5.5px, -6.5px);
+}
+
+@media screen and (max-width: 767px) {
+	.header .container {
+		justify-content: space-between;
+	}
+	.header .brand {
+		position: static;
+		z-index: 1100;
+	}
+	.mobile-menu-btn {
+		display: block;
+	}
+	.header nav {
+		position: absolute;
+		top: 58px;
+		left: 0;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		flex-direction: column;
+		background-color: var(--header-bg);
+		transition: height 0.3s ease;
+		justify-content: flex-start;
+	}
+	@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
+		.header nav {
+			background-color: var(--header-bg-blur);
+			backdrop-filter: blur(10px);
+			-webkit-backdrop-filter: blur(10px);
+		}
+	}
+	.header nav.open {
+		height: calc(100vh - 58px);
+		overflow-y: auto;
+	}
+	.header nav a,
+	.header nav .nav-dropdown-trigger {
+		width: 100%;
+		padding: 15px 20px;
+		font-size: 1.1rem;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+		justify-content: flex-start;
+	}
+	.header nav .nav-dropdown {
+		flex-direction: column;
+		align-items: flex-start;
+		width: 100%;
+		height: auto;
+	}
+	.header nav .dropdown-menu {
+		position: static;
+		width: 100%;
+		box-shadow: none;
+		border: none;
+		background-color: rgba(255, 255, 255, 0.05);
+		opacity: 1;
+		pointer-events: auto;
+		transform: none;
+		display: none;
+	}
+	.header nav .nav-dropdown:hover .dropdown-menu {
+		display: block;
+	}
+}
+
 /* DoIt Style Home Profile */
 .home-profile {
 	text-align: center;
@@ -1174,9 +1270,11 @@ footer section p:first-child {
 	transition: 0.3s;
 }
 
-.ctrler-item a:hover {
+@media (hover: hover) {
+	.ctrler-item a:hover {
 		background-color: var(--accent-color);
 		opacity: 1;
+	}
 }
 
 /* ========== VOID 风格 TOC (侧栏目录) ========== */
@@ -1364,8 +1462,10 @@ footer section p:first-child {
 	color: #cececf;
 }
 
-#toggle-toc:hover {
+@media (hover: hover) {
+	#toggle-toc:hover {
 		background-color: var(--accent-color);
+	}
 }
 
 #toggle-toc svg,
@@ -1386,6 +1486,15 @@ footer section p:first-child {
 	}
 }
 
+/* 移动端默认不显示目录 */
+@media screen and (max-width: 767px) {
+	#toggle-toc,
+	.TOC,
+	.toc-mask {
+		display: none !important;
+	}
+}
+
 /* Tags Styling (VOID style) */
 .tags {
 	margin: 1.5rem 0;

src/routes/+layout.svelte

@@ -8,6 +8,7 @@
 
 	let scrolled = $state(false);
 	let uptimeText = $state('');
+	let isMobileMenuOpen = $state(false);
 
 	function calcUptime(launchDate: string): string {
 		if (!launchDate) return '';
@@ -55,31 +56,50 @@
 	{@render children()}
 {:else}
 	<div class="frontend-layout">
-		<header class="header {scrolled ? 'scrolled' : ''}">
+		<header
+			class="header {scrolled ? 'scrolled' : ''} {isMobileMenuOpen ? 'mobile-menu-open' : ''}"
+		>
 			<div class="container wide">
-				<a href={resolve('/')} class="brand">{$page.data.site?.title || 'BlogFlare'}</a>
+				<a href={resolve('/')} class="brand" onclick={() => (isMobileMenuOpen = false)}
-				<nav>
+					>{$page.data.site?.title || 'BlogFlare'}</a
-					<a href={resolve('/')} class={$page.url.pathname === '/' ? 'active' : ''}>首页</a>
+				>
+				<button
+					class="mobile-menu-btn {isMobileMenuOpen ? 'open' : ''}"
+					onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
+					aria-label="Toggle menu"
+				>
+					<span></span>
+					<span></span>
+					<span></span>
+				</button>
+				<nav class={isMobileMenuOpen ? 'open' : ''}>
+					<a
+						href={resolve('/')}
+						class={$page.url.pathname === '/' ? 'active' : ''}
+						onclick={() => (isMobileMenuOpen = false)}>首页</a
+					>
 					<a
 						href={resolve('/archive')}
 						class={$page.url.pathname.startsWith('/posts') ||
 						$page.url.pathname.startsWith('/archive')
 							? 'active'
-							: ''}>{$page.data.aliases?.post || '文章'}</a
+							: ''}
+						onclick={() => (isMobileMenuOpen = false)}>{$page.data.aliases?.post || '文章'}</a
 					>
 					<a
 						href={resolve('/categories')}
 						class={$page.url.pathname.startsWith('/categories') ? 'active' : ''}
-						>{$page.data.aliases?.category || '分类'}</a
+						onclick={() => (isMobileMenuOpen = false)}>{$page.data.aliases?.category || '分类'}</a
 					>
 					<a
 						href={resolve('/series')}
 						class={$page.url.pathname.startsWith('/series') ? 'active' : ''}
-						>{$page.data.aliases?.series || '系列'}</a
+						onclick={() => (isMobileMenuOpen = false)}>{$page.data.aliases?.series || '系列'}</a
 					>
 					<a
 						href={resolve('/about')}
-						class={$page.url.pathname.startsWith('/about') ? 'active' : ''}>关于</a
+						class={$page.url.pathname.startsWith('/about') ? 'active' : ''}
+						onclick={() => (isMobileMenuOpen = false)}>关于</a
 					>
 				</nav>
 			</div>