@xingwangzhe/stalux 1.21.2 → 1.21.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.21.2",
+    "version": "1.21.3",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/components/stalux/layout/navs.astro

@@ -15,7 +15,7 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
 const navs = navsConfig?.items ?? [];
 ---
 
-<nav aria-label="Main navigation" transition:persist-props>
+<nav aria-label={t("nav.main")} transition:persist-props>
     <!-- 汉堡菜单按钮 (仅窄屏显示) -->
     <button
         data-ref="stalux-nav-toggle"
@@ -140,17 +140,17 @@ const navs = navsConfig?.items ?? [];
         if (!navList || !btnLeft || !btnRight) return;
 
         function updateButtons() {
-            const hasOverflow = navList.scrollWidth > navList.clientWidth;
-            const atStart = navList.scrollLeft <= 4;
-            const atEnd = navList.scrollLeft >= navList.scrollWidth - navList.clientWidth - 4;
-
-            if (hasOverflow) {
-                btnLeft.classList.toggle("visible", !atStart);
-                btnRight.classList.toggle("visible", !atEnd);
-            } else {
-                btnLeft.classList.remove("visible");
-                btnRight.classList.remove("visible");
+            const maxScrollLeft = Math.max(0, navList.scrollWidth - navList.clientWidth);
+            const hasOverflow = maxScrollLeft > 4;
+            const scrollLeft = Math.min(Math.max(navList.scrollLeft, 0), maxScrollLeft);
+
+            if (navList.scrollLeft !== scrollLeft) {
+                navList.scrollLeft = scrollLeft;
             }
+
+            navList.toggleAttribute("data-overflow", hasOverflow);
+            btnLeft.classList.toggle("visible", hasOverflow && scrollLeft > 4);
+            btnRight.classList.toggle("visible", hasOverflow && scrollLeft < maxScrollLeft - 4);
         }
 
         btnLeft.addEventListener("click", () => {
@@ -167,6 +167,9 @@ const navs = navsConfig?.items ?? [];
         // 用 ResizeObserver 监听容器尺寸变化（窗口缩窄/变宽时重新判断）
         const ro = new ResizeObserver(updateButtons);
         ro.observe(navList);
+        if (navList.parentElement) ro.observe(navList.parentElement);
+        window.addEventListener("resize", updateButtons, { passive: true });
+        window.addEventListener("load", updateButtons, { once: true });
 
         // 初始检测
         updateButtons();

package/src/i18n/en.json

@@ -1,6 +1,7 @@
 {
     "nav": {
         "menu": "Open navigation menu",
+        "main": "Main navigation",
         "scrollLeft": "Scroll navigation left",
         "scrollRight": "Scroll navigation right",
         "search": "Search"

package/src/i18n/zh-CN.json

@@ -1,6 +1,7 @@
 {
     "nav": {
         "menu": "打开导航菜单",
+        "main": "主导航",
         "scrollLeft": "向左滚动导航",
         "scrollRight": "向右滚动导航",
         "search": "搜索"

package/src/styles/components/layout/navs.module.css

@@ -2,8 +2,10 @@
 .navContainer {
     position: relative;
     width: 100%;
+    min-width: 0;
     max-width: 100%;
     overflow: hidden;
+    box-sizing: border-box;
 }
 
 .navList {
@@ -11,6 +13,9 @@
     gap: 2rem;
     align-items: center;
     justify-content: center;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
     transition: transform 0.3s ease;
     /* 当导航项总宽度超过视口时允许横向滚动，防止右侧项被裁剪 */
     overflow-x: auto;
@@ -21,6 +26,11 @@
     -ms-overflow-style: none;
 }
 
+.navList[data-overflow] {
+    justify-content: flex-start;
+    padding-inline: 44px;
+}
+
 .navList::-webkit-scrollbar {
     display: none;
 }
@@ -204,7 +214,7 @@
         position: fixed;
         top: 0;
         right: 0;
-        width: 220px;
+        width: min(220px, calc(100vw - 1rem));
         height: 100vh;
         background: var(--black-20p);
         backdrop-filter: blur(20px);