From ad530e78f95ef71077ad0c2d1b1c7c0054a54ef3 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 17 Mar 2022 20:04:09 +0800
Subject: [PATCH] feat(theme-default): enhance header dropdown experience
(#736)
---
.../src/client/components/Navbar.vue | 2 +-
.../src/client/components/NavbarDropdown.vue | 17 ++++++++++++++---
.../src/client/components/NavbarItems.vue | 10 +++++++++-
.../src/client/styles/navbar-dropdown.scss | 14 ++++++--------
4 files changed, 30 insertions(+), 13 deletions(-)
diff --git a/packages/@vuepress/theme-default/src/client/components/Navbar.vue b/packages/@vuepress/theme-default/src/client/components/Navbar.vue
index f40d6ea259..7eed4d5acd 100644
--- 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 {
-
+
diff --git a/packages/@vuepress/theme-default/src/client/components/NavbarDropdown.vue b/packages/@vuepress/theme-default/src/client/components/NavbarDropdown.vue
index 9d31ff539d..065e480874 100644
--- 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
>,
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 =>
-
+
-
+
- [
diff --git a/packages/@vuepress/theme-default/src/client/styles/navbar-dropdown.scss b/packages/@vuepress/theme-default/src/client/styles/navbar-dropdown.scss
index 958329dbdb..526c61a8ad 100644
--- 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;