From 3b464a9b46127f0e08601066d087afe905f46910 Mon Sep 17 00:00:00 2001
From: qiuchenghui <243852877@qq.com>
Date: Tue, 7 Jul 2026 13:03:58 +0800
Subject: [PATCH] fix: navbar layout and styles

---
 package.json                       |  3 ++-
 src/css/custom.css                 | 23 +++++++++++++++++++++++
 src/theme/Navbar/Content/index.tsx |  2 +-
 src/theme/Navbar/Layout/index.tsx  |  2 +-
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 7303078..0bdeba3 100644
--- a/package.json
+++ b/package.json
@@ -92,5 +92,6 @@
     "npm": "please-use-yarn",
     "node": ">=20.0.0",
     "yarn": ">=1.22"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index d41feae..b21f0b8 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -16,6 +16,7 @@
 @import './types.css';
 
 :root {
+  --ifm-navbar-height: 4.5rem; /* matches nav-h (72px) */
   --ifm-color-primary: theme(colors.light-accent-1);
   --ifm-color-primary-dark: #3c64dc;
   --ifm-color-primary-darker: #355bc8;
@@ -297,11 +298,33 @@ html:has(.theme-doc-markdown) {
   @apply !p-0;
 }
 
+/* navbar background via ::before so nav itself does NOT create a stacking context
+   (backdrop-filter on the element itself would trap position:fixed children like navbar-sidebar) */
+.navbar-custom::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  background-color: rgba(255, 255, 255, 0.95);
+}
+
+[data-theme='dark'] .navbar-custom::before {
+  background-color: rgba(19, 19, 19, 0.95);
+}
+
 .navbar-sidebar {
+  height: 100vh;
   transform: translate3d(100%, 0, 0);
   left: auto;
   right: 0;
 }
+
+.navbar-sidebar__backdrop {
+  height: 100vh;
+}
+
 .theme-doc-markdown {
   @apply !body-2 flex flex-col space-y-6;
 }
diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx
index b88a132..c9374cd 100644
--- a/src/theme/Navbar/Content/index.tsx
+++ b/src/theme/Navbar/Content/index.tsx
@@ -50,7 +50,7 @@ export default function NavbarContent(): ReactNode {
     <div
       className={clsx(
         'navbar__inner',
-        'site-max-width w-full min-h-nav-h flex flex-row items-center rounded-large border border-light-surface-3 bg-light-surface-1/95 px-4 py-3 shadow-light-short backdrop-blur dark:border-dark-surface-3 dark:bg-dark-surface-1/95 dark:shadow-dark-short sm:px-5',
+        'site-max-width w-full min-h-nav-h flex flex-row items-center px-4 py-3 sm:px-5',
       )}
     >
       <Link
diff --git a/src/theme/Navbar/Layout/index.tsx b/src/theme/Navbar/Layout/index.tsx
index abd75d9..c81c0d5 100644
--- a/src/theme/Navbar/Layout/index.tsx
+++ b/src/theme/Navbar/Layout/index.tsx
@@ -30,7 +30,7 @@ export default function NavbarLayout({ children }: Props): ReactNode {
         'navbar',
         'navbar--fixed-top',
         // Custom styling
-        'fixed left-0 right-0 z-nav flex w-screen justify-center bg-transparent px-4 pt-4 sm:px-6',
+        'navbar-custom fixed left-0 right-0 z-nav flex w-screen justify-center border-b border-light-surface-3 dark:border-dark-surface-3',
         hideOnScroll && [styles.navbarHideable, !isNavbarVisible && styles.navbarHidden],
         {
           'navbar--dark': style === 'dark',