Merge pull request #12 from MatheusVSN/main

fix: made the left side bar not overflowing on lower resolutions
brenoepics · Feb 20, 2024 · ce9ab84 · ce9ab84
2 parents 5ba472d + 4517b8b
commit ce9ab84
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 20 deletions.
diff --git a/src/theme/components/VPDoc.vue b/src/theme/components/VPDoc.vue
@@ -2,11 +2,11 @@
 import { useRoute } from 'vitepress'
 import { computed } from 'vue'
 import { useData } from '../composables/data'
+import { useEditLink } from '../composables/edit-link'
 import { useSidebar } from '../composables/sidebar'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
-import { useEditLink } from '../composables/edit-link'
 import VPLink from './VPLink.vue'
 
 const { theme, page, frontmatter } = useData()
@@ -22,7 +22,6 @@ const hasLastUpdated = computed(() => {
 const route = useRoute()
 const { hasSidebar, hasAside, leftAside } = useSidebar()
 
-
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
 )
@@ -35,7 +34,7 @@ const pageName = computed(() =>
   >
     <slot name="doc-top" />
     <div class="container">
-      <div v-if="hasAside" class="aside" :class="{'left-aside': leftAside}">
+      <div v-if="hasAside" class="aside" :class="{ 'left-aside': leftAside }">
         <div class="aside-container">
           <div class="aside-content">
             <VPDocAside>
@@ -69,9 +68,16 @@ const pageName = computed(() =>
               <ul role="list" class="content-ul">
                 <li class="content-box">
                   <a href="#" class="content-box-item" v-if="route.data.title">
-                    <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" class="content-box-icon">
+                    <svg
+                      viewBox="0 0 16 16"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      class="content-box-icon"
+                    >
                       <path
-                        d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path>
+                        d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
+                      ></path>
                     </svg>
                     <span class="content-box-text">{{ route.data.title }}</span>
                   </a>
@@ -84,11 +90,23 @@ const pageName = computed(() =>
               </div>
             </div>
             <div v-if="hasEditLink" class="content-box-item">
-              <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
-                <svg v-if="hasEditLink" role="img" class="content-box-icon box-m-0" viewBox="0 0 16 16"
-                     width="16" height="16" fill="currentColor">
+              <VPLink
+                class="edit-link-button"
+                :href="editLink.url"
+                :no-icon="true"
+              >
+                <svg
+                  v-if="hasEditLink"
+                  role="img"
+                  class="content-box-icon box-m-0"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                >
                   <path
-                    d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path>
+                    d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"
+                  ></path>
                 </svg>
               </VPLink>
             </div>
@@ -144,7 +162,7 @@ const pageName = computed(() =>
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1460px) {
   .VPDoc .container {
     display: flex;
     justify-content: center;
@@ -189,7 +207,10 @@ const pageName = computed(() =>
 .aside-container {
   position: fixed;
   top: 0;
-  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 10px);
+  padding-top: calc(
+    var(--vp-nav-height) + var(--vp-layout-top-height, 0px) +
+      var(--vp-doc-top-height, 0px) + 10px
+  );
   width: 224px;
   height: 100vh;
   overflow-x: hidden;
@@ -204,18 +225,20 @@ const pageName = computed(() =>
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
+  min-height: calc(
+    100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px)
+  );
   padding-bottom: 32px;
 }
 
-
 .content {
   position: relative;
   margin: 0 auto;
   width: 100%;
   border: 1px solid var(--vp-c-border);
   border-radius: 4px;
-  background-color: var(--vp-c-bg)
+  background-color: var(--vp-c-bg);
+  max-width: 768px;
 }
 
 .main {
@@ -250,7 +273,6 @@ const pageName = computed(() =>
   max-width: 100%;
 }
 
-
 @media (min-width: 640px) {
   .content-file {
     display: flex;
@@ -302,8 +324,8 @@ const pageName = computed(() =>
 }
 
 .no-hover {
-  background-color: transparent!important;
-  border-color: transparent!important;
+  background-color: transparent !important;
+  border-color: transparent !important;
 }
 
 .content-box-icon {

diff --git a/src/theme/components/VPLocalNav.vue b/src/theme/components/VPLocalNav.vue
@@ -54,7 +54,9 @@ const classes = computed(() => {
 
 <template>
   <div
-    v-if="frontmatter.layout !== 'home' && (!emptyAndNoSidebar || y >= navHeight)"
+    v-if="
+      frontmatter.layout !== 'home' && (!emptyAndNoSidebar || y >= navHeight)
+    "
     :class="classes"
   >
     <div class="container">
@@ -107,15 +109,17 @@ const classes = computed(() => {
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1460px) {
   .VPLocalNav {
     display: none;
   }
 }
 
 @media (min-width: 1440px) {
   .VPLocalNav.has-sidebar {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-left: calc(
+      (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
+    );
   }
 }