From f9b244af0e76c5d6a7e0a18412bc009e896eb35e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E4=BA=91=E8=8B=8D=E7=8B=97?= <admin@imalun.com>
Date: Tue, 28 May 2024 19:06:36 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=88=20style:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E8=8F=9C=E5=8D=95=E5=B1=85=E4=B8=AD=20#122?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../source/css/_components/menu.less          | 118 +++++++++---------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/packages/hexo-theme-async/source/css/_components/menu.less b/packages/hexo-theme-async/source/css/_components/menu.less
index bbd940b1..16a96abb 100644
--- a/packages/hexo-theme-async/source/css/_components/menu.less
+++ b/packages/hexo-theme-async/source/css/_components/menu.less
@@ -49,10 +49,10 @@
 					pointer-events: none;
 					background-color: var(--theme-bg-color, #fcfcfe);
 					opacity: 0;
-					transform: translateY(20px);
+					transform: translateY(20px) translateX(-50%);
 					height: auto;
 					top: 80px;
-					left: -10px;
+					left: 50%;
 					border-radius: 0 0 10px 10px;
 					box-shadow: var(--box-shadow);
 					position: absolute;
@@ -81,7 +81,7 @@
 					ul {
 						pointer-events: all;
 						opacity: 1;
-						transform: translateY(0);
+						transform: translateY(0) translateX(-50%);
 					}
 				}
 
@@ -94,6 +94,60 @@
 	}
 }
 
+.trm-menu-btn {
+	transform: scale(1.3);
+	margin-top: 2px;
+	padding: 8px 7px;
+	width: 30px;
+	height: 30px;
+	cursor: pointer;
+	display: none;
+	justify-content: center;
+	text-align: center;
+
+	span {
+		position: relative;
+		margin: 5px 0 0;
+
+		&:before {
+			position: absolute;
+			top: -5px;
+		}
+
+		&:after {
+			position: absolute;
+			top: 5px;
+		}
+	}
+
+	&.trm-active {
+		span {
+			transform: rotate(45deg);
+
+			&:before {
+				transform: translate(0px, 5px) rotate(-90deg);
+			}
+
+			&:after {
+				transform: translate(0px, -5px) rotate(-90deg);
+			}
+		}
+	}
+
+	span,
+	span:after,
+	span:before {
+		content: "";
+		display: block;
+		width: 15px;
+		height: 0.15em;
+		border-radius: 1px;
+		background: var(--theme-color, #00283a);
+		backface-visibility: hidden;
+		.transition-mixin();
+	}
+}
+
 @media (max-width: 1200px) {
 	.trm-menu {
 		text-align: center;
@@ -157,68 +211,14 @@
 		pointer-events: all;
 		max-height: 0;
 		box-shadow: var(--box-shadow);
+		transform: translateY(20px);
 	}
 
 	.trm-menu nav ul li:hover ul {
 		max-height: 300px;
-	}
-}
-
-.trm-menu-btn {
-	transform: scale(1.3);
-	margin-top: 2px;
-	padding: 8px 7px;
-	width: 30px;
-	height: 30px;
-	cursor: pointer;
-	display: none;
-	justify-content: center;
-	text-align: center;
-
-	span {
-		position: relative;
-		margin: 5px 0 0;
-
-		&:before {
-			position: absolute;
-			top: -5px;
-		}
-
-		&:after {
-			position: absolute;
-			top: 5px;
-		}
+		transform: translateY(0);
 	}
 
-	&.trm-active {
-		span {
-			transform: rotate(45deg);
-
-			&:before {
-				transform: translate(0px, 5px) rotate(-90deg);
-			}
-
-			&:after {
-				transform: translate(0px, -5px) rotate(-90deg);
-			}
-		}
-	}
-
-	span,
-	span:after,
-	span:before {
-		content: "";
-		display: block;
-		width: 15px;
-		height: 0.15em;
-		border-radius: 1px;
-		background: var(--theme-color, #00283a);
-		backface-visibility: hidden;
-		.transition-mixin();
-	}
-}
-
-@media (max-width: 1200px) {
 	.trm-menu-btn {
 		display: flex;
 	}