From 6e1992f81108276455ef8d72b0c7ff5c8b4aee2c Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 2 Mar 2025 00:06:56 +0800
Subject: [PATCH] fix(theme): incorrect toc display in 1200px screen (#500)

---
 theme/src/client/components/VPDoc.vue      | 10 ++++++----
 theme/src/client/components/VPLocalNav.vue | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
index fa1fc48f..b2a8f411 100644
--- a/theme/src/client/components/VPDoc.vue
+++ b/theme/src/client/components/VPDoc.vue
@@ -255,15 +255,17 @@ watch(
   }
 }
 
+@media (min-width: 1120px) {
+  .vp-doc-container .aside {
+    display: block;
+  }
+}
+
 @media (min-width: 1280px) {
   .vp-doc-container .container {
     display: flex;
     justify-content: center;
   }
-
-  .vp-doc-container .aside {
-    display: block;
-  }
 }
 
 @media (min-width: 1440px) {
diff --git a/theme/src/client/components/VPLocalNav.vue b/theme/src/client/components/VPLocalNav.vue
index f8efa9a9..5112f656 100644
--- a/theme/src/client/components/VPLocalNav.vue
+++ b/theme/src/client/components/VPLocalNav.vue
@@ -38,7 +38,7 @@ const classes = computed(() => {
     'vp-local-nav': true,
     'fixed': empty.value,
     'reached-top': y.value >= navHeight.value,
-    'is-blog': isBlogPost,
+    'is-blog': isBlogPost.value,
     'with-outline': !props.showOutline,
   }
 })
@@ -96,10 +96,6 @@ const showLocalNav = computed(() => {
 }
 
 @media (min-width: 960px) {
-  .vp-local-nav.is-blog {
-    display: none;
-  }
-
   .vp-local-nav {
     top: var(--vp-nav-height);
     width: calc(100% - var(--vp-sidebar-width));
@@ -107,6 +103,11 @@ const showLocalNav = computed(() => {
     border-top: none;
   }
 
+  .vp-local-nav.is-blog {
+    width: 100%;
+    margin-left: 0;
+  }
+
   .vp-local-nav .menu {
     visibility: hidden;
   }
@@ -116,6 +117,12 @@ const showLocalNav = computed(() => {
   }
 }
 
+@media (min-width: 1120px) {
+  .vp-local-nav.is-blog {
+    display: none;
+  }
+}
+
 @media (min-width: 1280px) {
   .vp-local-nav {
     display: none;