fix(theme-default): improve responsive layout (#1102)

Author: Mister-Hope

ecosystem/theme-default/src/client/components/Navbar.vue

@@ -32,7 +32,7 @@ onMounted(() => {
     getCssValue(navbar.value, 'paddingLeft') +
     getCssValue(navbar.value, 'paddingRight')
   const handleLinksWrapWidth = (): void => {
-    if (window.innerWidth <= MOBILE_DESKTOP_BREAKPOINT) {
+    if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) {
       linksWrapperMaxWidth.value = 0
     } else {
       linksWrapperMaxWidth.value =

ecosystem/theme-default/src/client/components/NavbarItems.vue

@@ -3,7 +3,7 @@ import AutoLink from '@theme/AutoLink.vue'
 import NavbarDropdown from '@theme/NavbarDropdown.vue'
 import { useRouteLocale, useSiteLocaleData } from '@vuepress/client'
 import { isLinkHttp, isString } from '@vuepress/shared'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 import { useRouter } from 'vue-router'
 import type {
@@ -143,6 +143,7 @@ const useNavbarConfig = (): ComputedRef<ResolvedNavbarItem[]> => {
   return computed(() => (themeLocale.value.navbar || []).map(resolveNavbarItem))
 }
 
+const isMobile = ref(false)
 const navbarConfig = useNavbarConfig()
 const navbarSelectLanguage = useNavbarSelectLanguage()
 const navbarRepo = useNavbarRepo()
@@ -151,12 +152,34 @@ const navbarLinks = computed(() => [
   ...navbarSelectLanguage.value,
   ...navbarRepo.value,
 ])
+
+// avoid overlapping of long title and long navbar links
+onMounted(() => {
+  // TODO: migrate to css var
+  // refer to _variables.scss
+  const MOBILE_DESKTOP_BREAKPOINT = 719
+
+  const handleMobile = (): void => {
+    if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) {
+      isMobile.value = true
+    } else {
+      isMobile.value = false
+    }
+  }
+  handleMobile()
+  window.addEventListener('resize', handleMobile, false)
+  window.addEventListener('orientationchange', handleMobile, false)
+})
 </script>
 
 <template>
   <nav v-if="navbarLinks.length" class="navbar-items">
     <div v-for="item in navbarLinks" :key="item.text" class="navbar-item">
-      <NavbarDropdown v-if="item.children" :item="item" />
+      <NavbarDropdown
+        v-if="item.children"
+        :item="item"
+        :class="isMobile ? 'mobile' : ''"
+      />
       <AutoLink v-else :item="item" />
     </div>
   </nav>

ecosystem/theme-default/src/client/styles/layout.scss

@@ -107,16 +107,17 @@
     }
   }
 }
+.theme-container.no-sidebar {
+  .sidebar {
+    display: none;
 
-@media (min-width: ($MQMobile + 1px)) {
-  .theme-container.no-sidebar {
-    .sidebar {
-      display: none;
+    @media (max-width: $MQMobile) {
+      display: block;
     }
+  }
 
-    .page {
-      padding-left: 0;
-    }
+  .page {
+    padding-left: 0;
   }
 }
 

ecosystem/theme-default/src/client/styles/navbar-dropdown.scss

@@ -108,10 +108,8 @@
       }
     }
   }
-}
 
-@media (max-width: $MQMobile) {
-  .navbar-dropdown-wrapper {
+  &.mobile {
     &.open .navbar-dropdown-title {
       margin-bottom: 0.5rem;
     }
@@ -148,10 +146,8 @@
       }
     }
   }
-}
 
-@media (min-width: ($MQMobile + 1)) {
-  .navbar-dropdown-wrapper {
+  &:not(.mobile) {
     height: 1.8rem;
 
     &:hover .navbar-dropdown,

ecosystem/theme-default/src/client/styles/navbar.scss

@@ -69,7 +69,7 @@
 
     &:hover,
     &.router-link-active {
-      color: var(--c-text-accent);
+      color: var(--c-text);
     }
   }
 
@@ -82,30 +82,36 @@
     &:first-child {
       margin-left: 0;
     }
+
+    > a {
+      &:hover,
+      &.router-link-active {
+        margin-bottom: -2px;
+        border-bottom: 2px solid var(--c-text-accent);
+      }
+    }
   }
 }
 
 @media (max-width: $MQMobile) {
   .navbar-items {
     .navbar-item {
       margin-left: 0;
-    }
-  }
-}
 
-@media (min-width: $MQMobile) {
-  .navbar-items a {
-    &:hover,
-    &.router-link-active {
-      color: var(--c-text);
+      > a {
+        &:hover,
+        &.router-link-active {
+          margin-bottom: 0;
+          border-bottom: none;
+        }
+      }
     }
-  }
 
-  .navbar-item > a {
-    &:hover,
-    &.router-link-active {
-      margin-bottom: -2px;
-      border-bottom: 2px solid var(--c-text-accent);
+    a {
+      &:hover,
+      &.router-link-active {
+        color: var(--c-text-accent);
+      }
     }
   }
 }