From ceb0fa9cd3294d68cfc34f95e5f4bc759b4098b0 Mon Sep 17 00:00:00 2001
From: Billyyyyy3320 <newsbielt703@gmail.com>
Date: Sun, 23 Aug 2020 17:36:09 +0800
Subject: [PATCH] fix($theme-default): overlap navbar dropdown menus (fix
 #2227) (#2365)

---
 .../__snapshots__/DropdownLink.spec.js.snap   |  2 +-
 .../theme-default/components/DropdownLink.vue | 42 ++++++++++++++-----
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
index 35421b2be7..3940e34c0e 100644
--- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
+++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownLink renders dropdown link. 1`] = `
-<div class="dropdown-wrapper"><button type="button" aria-label="Learn More Select" class="dropdown-title"><span class="title">Learn More</span> <span class="arrow right"></span></button>
+<div class="dropdown-wrapper"><button type="button" aria-label="Learn More Select" class="dropdown-title"><span class="title">Learn More</span> <span class="arrow down"></span></button> <button type="button" aria-label="Learn More Select" class="mobile-dropdown-title"><span class="title">Learn More</span> <span class="arrow right"></span></button>
   <ul class="nav-dropdown" style="display: none;" name="dropdown">
     <li class="dropdown-item">
       <!----> <a class="nav-link">
diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 9cddef3b1b..be6563faec 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -7,6 +7,17 @@
       class="dropdown-title"
       type="button"
       :aria-label="dropdownAriaLabel"
+      @click="handleDropdown"
+    >
+      <span class="title">{{ item.text }}</span>
+      <span
+        class="arrow down"
+      />
+    </button>
+    <button
+      class="mobile-dropdown-title"
+      type="button"
+      :aria-label="dropdownAriaLabel"
       @click="setOpen(!open)"
     >
       <span class="title">{{ item.text }}</span>
@@ -105,6 +116,17 @@ export default {
 
     isLastItemOfArray (item, array) {
       return last(array) === item
+    },
+
+    /**
+     * Open the dropdown when user tab and click from keyboard.
+     *
+     * Use event.detail to detect tab and click from keyboard. Ref: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+     * The Tab + Click is UIEvent > KeyboardEvent, so the detail is 0.
+     */
+    handleDropdown () {
+      const isTriggerByTab = event.detail === 0
+      if (isTriggerByTab) this.setOpen(!this.open)
     }
   }
 }
@@ -130,6 +152,13 @@ export default {
       vertical-align middle
       margin-top -1px
       margin-left 0.4rem
+  .mobile-dropdown-title
+    @extends .dropdown-title
+    display none
+    font-weight 600
+    font-size inherit
+      &:hover
+        color $accentColor
   .nav-dropdown
     .dropdown-item
       color inherit
@@ -175,10 +204,9 @@ export default {
     &.open .dropdown-title
       margin-bottom 0.5rem
     .dropdown-title
-      font-weight 600
-      font-size inherit
-      &:hover
-        color $accentColor
+      display: none
+    .mobile-dropdown-title
+      display: block
     .nav-dropdown
       transition height .1s ease-out
       overflow hidden
@@ -203,12 +231,6 @@ export default {
       display block !important
     &.open:blur
       display none
-    .dropdown-title .arrow
-      // make the arrow always down at desktop
-      border-left 4px solid transparent
-      border-right 4px solid transparent
-      border-top 6px solid $arrowBgColor
-      border-bottom 0
     .nav-dropdown
       display none
       // Avoid height shaked by clicking