feat(theme-default): enhance header dropdown experience (#736)

vuepress · Mar 17, 2022 · ad530e7 · ad530e7
1 parent 85819c3
commit ad530e7
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/packages/@vuepress/theme-default/src/client/components/Navbar.vue b/packages/@vuepress/theme-default/src/client/components/Navbar.vue
@@ -67,7 +67,7 @@ function getCssValue(el: HTMLElement | null, property: string): number {
 
     <div class="navbar-items-wrapper" :style="linksWrapperStyle">
       <slot name="before" />
-      <NavbarItems class="can-hide" />
+      <NavbarItems class="can-hide" is-header />
       <slot name="after" />
       <ToggleDarkModeButton v-if="enableDarkMode" />
       <NavbarSearch />

diff --git a/packages/@vuepress/theme-default/src/client/components/NavbarDropdown.vue b/packages/@vuepress/theme-default/src/client/components/NavbarDropdown.vue
@@ -11,6 +11,10 @@ const props = defineProps({
     type: Object as PropType<Exclude<ResolvedNavbarItem, NavbarItem>>,
     required: true,
   },
+  isHeader: {
+    type: Boolean,
+    required: true,
+  },
 })
 
 const { item } = toRefs(props)
@@ -38,7 +42,7 @@ watch(
  */
 const handleDropdown = (e): void => {
   const isTriggerByTab = e.detail === 0
-  if (isTriggerByTab) {
+  if (isTriggerByTab || props.isHeader) {
     open.value = !open.value
   } else {
     open.value = false
@@ -50,18 +54,25 @@ const isLastItemOfArray = (item: unknown, arr: unknown[]): boolean =>
 </script>
 
 <template>
-  <div class="navbar-dropdown-wrapper" :class="{ open }">
+  <div
+    class="navbar-dropdown-wrapper"
+    :class="{ open }"
+    @mouseleave="open = false"
+  >
     <button
+      v-if="isHeader"
       class="navbar-dropdown-title"
       type="button"
       :aria-label="dropdownAriaLabel"
       @click="handleDropdown"
+      @mouseenter="open = true"
     >
       <span class="title">{{ item.text }}</span>
       <span class="arrow down" />
     </button>
 
     <button
+      v-else
       class="navbar-dropdown-title-mobile"
       type="button"
       :aria-label="dropdownAriaLabel"
@@ -72,7 +83,7 @@ const isLastItemOfArray = (item: unknown, arr: unknown[]): boolean =>
     </button>
 
     <DropdownTransition>
-      <ul v-show="open" class="navbar-dropdown">
+      <ul v-show="isHeader ? true : open" class="navbar-dropdown">
         <li
           v-for="child in item.children"
           :key="child.text"

diff --git a/packages/@vuepress/theme-default/src/client/components/NavbarItems.vue b/packages/@vuepress/theme-default/src/client/components/NavbarItems.vue
@@ -10,6 +10,14 @@ import type { NavbarGroup, NavbarItem, ResolvedNavbarItem } from '../../shared'
 import { useNavLink, useThemeLocaleData } from '../composables'
 import { resolveRepoType } from '../utils'
 
+defineProps({
+  isHeader: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+
 /**
  * Get navbar config of select language dropdown
  */
@@ -147,7 +155,7 @@ const navbarLinks = computed(() => [
 <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" :is-header="isHeader" />
       <AutoLink v-else :item="item" />
     </div>
   </nav>

diff --git a/packages/@vuepress/theme-default/src/client/styles/navbar-dropdown.scss b/packages/@vuepress/theme-default/src/client/styles/navbar-dropdown.scss
@@ -154,18 +154,16 @@
   .navbar-dropdown-wrapper {
     height: 1.8rem;
 
-    &:hover .navbar-dropdown,
     &.open .navbar-dropdown {
-      // override the inline style.
-      display: block !important;
-    }
-
-    &.open:blur {
-      display: none;
+      opacity: 1;
+      transform: none;
     }
 
     .navbar-dropdown {
-      display: none;
+      display: block;
+      opacity: 0;
+      transform: translateY(-0.5rem);
+      transition: opacity 0.3s ease, transform 0.3s ease;
       // Avoid height shaked by clicking
       height: auto !important;
       box-sizing: border-box;