From 2580aacbe5da52caab473344248cb2122ecac436 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Sun, 3 Apr 2022 16:39:05 +0800
Subject: [PATCH] fix(docs): documentation layout issue

- Update documentation layout to align with design
---
 .../components/sidebar/vp-sidebar-link.vue    |  3 +-
 .../vitepress/components/vp-navbar.vue        |  3 +-
 .../vitepress/components/vp-sponsors.vue      |  2 +-
 docs/.vitepress/vitepress/styles/navbar.scss  |  7 +++--
 docs/.vitepress/vitepress/styles/sidebar.scss | 31 ++-----------------
 docs/.vitepress/vitepress/styles/vars.scss    |  2 +-
 6 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue b/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue
index a21b6fd228..fc8a09a63d 100644
--- a/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue
+++ b/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue
@@ -42,10 +42,9 @@ const route = useRoute()
 }
 
 .link {
-  padding: 0.625rem 2rem 0.625rem 1.5rem;
+  padding: 9px 16px;
   line-height: 1.5;
   font-size: 0.9rem;
-  margin: 0 8px;
   border-radius: 8px;
 
   .link-text {
diff --git a/docs/.vitepress/vitepress/components/vp-navbar.vue b/docs/.vitepress/vitepress/components/vp-navbar.vue
index 4762fcc4e1..e474c76c30 100644
--- a/docs/.vitepress/vitepress/components/vp-navbar.vue
+++ b/docs/.vitepress/vitepress/components/vp-navbar.vue
@@ -33,7 +33,7 @@ const currentLink = computed(() => {
 
 <template>
   <div class="navbar-wrapper">
-    <div class="container">
+    <div class="header-container">
       <div class="logo-container">
         <a :href="currentLink">
           <img
@@ -70,7 +70,6 @@ const currentLink = computed(() => {
   }
   .logo {
     position: relative;
-    width: 100%;
     height: 100%;
   }
 }
diff --git a/docs/.vitepress/vitepress/components/vp-sponsors.vue b/docs/.vitepress/vitepress/components/vp-sponsors.vue
index ef4a70aea9..9fd9d57d7b 100644
--- a/docs/.vitepress/vitepress/components/vp-sponsors.vue
+++ b/docs/.vitepress/vitepress/components/vp-sponsors.vue
@@ -19,7 +19,7 @@ const sponsor = computed(() => sponsorLocale[lang.value])
 
 <style lang="scss" scoped>
 .sponsors {
-  padding: 0.35rem 1.5rem 0.35rem 1.25rem;
+  padding-bottom: 0.35rem;
   .sponsors-title {
     color: var(--text-color-lighter);
     font-weight: 300;
diff --git a/docs/.vitepress/vitepress/styles/navbar.scss b/docs/.vitepress/vitepress/styles/navbar.scss
index bf1b651876..542e8ef88d 100644
--- a/docs/.vitepress/vitepress/styles/navbar.scss
+++ b/docs/.vitepress/vitepress/styles/navbar.scss
@@ -20,11 +20,10 @@
     padding: 0 32px;
   }
 
-  .container {
+  .header-container {
     display: flex;
     justify-content: space-between;
     margin: 0 auto;
-    max-width: var(--vp-screen-max-width);
 
     .content {
       display: flex;
@@ -32,6 +31,10 @@
       align-items: center;
       flex-grow: 1;
     }
+
+    @include respond-to('xxl') {
+      max-width: var(--vp-screen-max-width);
+    }
   }
 
   @include respond-to('md') {
diff --git a/docs/.vitepress/vitepress/styles/sidebar.scss b/docs/.vitepress/vitepress/styles/sidebar.scss
index d0da03b3e5..6fe7783952 100644
--- a/docs/.vitepress/vitepress/styles/sidebar.scss
+++ b/docs/.vitepress/vitepress/styles/sidebar.scss
@@ -9,6 +9,7 @@
   z-index: var(--sidebar-z-index);
   width: var(--sidebar-width-xs);
   background-color: var(--bg-color);
+  padding: 47px 32px 0;
   overflow-y: auto;
   transform: translate(-100%);
   transition: background-color 0.5s, opacity 0.25s,
@@ -18,37 +19,11 @@
     transform: translate(0);
   }
 
-  // .nav.sponsors {
-  //   padding: 2rem 1.5rem 0 1.5rem;
-
-  //   .sponsors-list {
-  //     display: flex;
-  //     align-items: center;
-  //     padding: 0;
-  //     margin: 0;
-  //   }
-
-  //   .sponsors-title {
-  //     margin-top: 0;
-  //     color: #777;
-  //     font-weight: 300;
-  //     font-size: 0.9rem;
-  //   }
-
-  //   .sponsor-item {
-  //     margin-right: 0.5rem;
-  //   }
-
-  //   img {
-  //     width: 2.2rem;
-  //   }
-  // }
-
   .sidebar-groups {
     padding: 0.75rem 0 5rem;
 
     .sidebar-group__title {
-      padding: 0.35rem 1.5rem 0.35rem 1.25rem;
+      padding: 0.35rem 0;
       font-size: 1rem;
       font-weight: 700;
       margin: 0;
@@ -75,7 +50,7 @@
   }
 
   @include respond-to('xxl') {
-    padding: 0 32px 96px calc((100% - var(--vp-screen-max-width)) / 2.2);
+    padding: 0 32px 96px calc((100% - var(--vp-screen-max-width)) / 2);
     width: calc(
       (100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)
     );
diff --git a/docs/.vitepress/vitepress/styles/vars.scss b/docs/.vitepress/vitepress/styles/vars.scss
index 8fb31984d2..3fbc7a98cb 100644
--- a/docs/.vitepress/vitepress/styles/vars.scss
+++ b/docs/.vitepress/vitepress/styles/vars.scss
@@ -1,6 +1,6 @@
 // SCSS variables
 // breakpoints
-$breakpoint-xxl: 1440px !default;
+$breakpoint-xxl: 1680px !default;
 $breakpoint-xlg: 1280px !default;
 $breakpoint-lg: 960px !default;
 $breakpoint-md: 768px !default;