fix(theme): sidebar alignment when scrollbar is there on page

closes #5027

src/client/theme-default/components/VPContent.vue

@@ -88,8 +88,8 @@ const { isHome, hasSidebar } = useLayout()
 
 @media (min-width: 1440px) {
   .VPContent.has-sidebar {
-    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-right: calc((100% - var(--vp-layout-max-width)) / 2);
+    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 </style>

src/client/theme-default/components/VPLocalNav.vue

@@ -98,12 +98,6 @@ const classes = computed(() => {
   }
 }
 
-@media (min-width: 1440px) {
-  .VPLocalNav.has-sidebar {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
-  }
-}
-
 .container {
   display: flex;
   justify-content: space-between;

src/client/theme-default/components/VPNavBar.vue

@@ -171,20 +171,14 @@ watchPostEffect(() => {
     position: relative;
     z-index: 1;
     padding-left: var(--vp-sidebar-width);
-  }
-
-  .VPNavBar.has-sidebar .content-body {
     padding-right: 32px;
   }
 }
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .content {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
-  }
-
-  .VPNavBar.has-sidebar .content-body {
-    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
+    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-right: calc((100% - var(--vp-layout-max-width)) / 2 + 32px);
   }
 }
 
@@ -193,6 +187,8 @@ watchPostEffect(() => {
   justify-content: flex-end;
   align-items: center;
   height: var(--vp-nav-height);
+  margin-right: -100vw;
+  padding-right: 100vw;
   transition: background-color 0.5s;
 }
 
@@ -252,7 +248,7 @@ watchPostEffect(() => {
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .divider {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 

src/client/theme-default/components/VPSidebar.vue

@@ -111,8 +111,8 @@ watch(
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    padding-left: max(32px, calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2));
-    width: calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
 }