fix(theme): incorrect toc display in 1200px screen (#500)

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) {

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;