From d6fc734956f78ae672ac2a60cbdb9ed81c204791 Mon Sep 17 00:00:00 2001 From: totocalcio Date: Mon, 14 Oct 2024 02:54:37 +0900 Subject: [PATCH 1/5] fix/ replace hamburger menu with dialog element --- apps/web/app/components/GlobalHeader.vue | 56 +++++++++++++++++----- packages/ui/components/common/SpHeader.vue | 11 +++++ 2 files changed, 54 insertions(+), 13 deletions(-) diff --git a/apps/web/app/components/GlobalHeader.vue b/apps/web/app/components/GlobalHeader.vue index 4fe68fe8..cd6c022f 100644 --- a/apps/web/app/components/GlobalHeader.vue +++ b/apps/web/app/components/GlobalHeader.vue @@ -17,6 +17,7 @@ const onSwitchLocale = () => { const { width } = useWindowSize() const { orientation } = useScreenOrientation() const shouldShowSpHeader = ref() +const dialogRef = ref() onMounted(() => { shouldShowSpHeader.value = width.value <= 1200 }) @@ -27,6 +28,11 @@ watch([width, orientation], () => { const showMenu = ref(false) const toggleMenu = () => { + if (showMenu.value) { + dialogRef.value!.close() + } else { + dialogRef.value!.show() + } showMenu.value = !showMenu.value } @@ -48,6 +54,9 @@ const getAnchorPath = computed( class="navigation-mobile-toggle" name="menu" :class="{ 'isOpened': showMenu }" + :aria-expanded="showMenu" + aria-controls="navigation-mobile-menu-trigger" + :aria-label="showMenu ? 'メニューを閉じる' : 'メニューを開く'" @click="toggleMenu" > @@ -55,19 +64,23 @@ const getAnchorPath = computed( - -
-
-
    -
  • - - {{ link.text }} - -
    • -
-
-
- + + + +
    +
  • + + {{ link.text }} + +
    • +
+
@@ -95,6 +108,7 @@ const getAnchorPath = computed( align-items: center; gap: calc(var(--unit) * 2); margin-right: 27px; + z-index: 10; } .navigation-mobile-menu { @@ -104,6 +118,22 @@ const getAnchorPath = computed( width: 100vw; text-align: center; background-color: var(--color-white); + z-index: 1; + + width: 100%; + border: 0; + transition: + translate 0.6s cubic-bezier(0.4, 0, 0.2, 1), + display 0.6s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete; + translate: 0 -100%; + + &[open] { + translate: 0 0; + + @starting-style { + translate: 0 -100%; + } + } & > div { padding: calc(var(--unit) * 5) 0; diff --git a/packages/ui/components/common/SpHeader.vue b/packages/ui/components/common/SpHeader.vue index 13374937..8899ea91 100644 --- a/packages/ui/components/common/SpHeader.vue +++ b/packages/ui/components/common/SpHeader.vue @@ -39,9 +39,20 @@ header { display: flex; align-items: center; justify-content: space-between; + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--color-white); + z-index: 5; + } } .link { line-height: 0; + z-index: 10; } .logo { height: 32px; From e6aedfdf7b976086d3f44ea8ec6f6bca596e7669 Mon Sep 17 00:00:00 2001 From: totocalcio Date: Mon, 14 Oct 2024 03:04:45 +0900 Subject: [PATCH 2/5] Refactor GlobalHeader.vue styles --- apps/web/app/components/GlobalHeader.vue | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/apps/web/app/components/GlobalHeader.vue b/apps/web/app/components/GlobalHeader.vue index cd6c022f..d47e3318 100644 --- a/apps/web/app/components/GlobalHeader.vue +++ b/apps/web/app/components/GlobalHeader.vue @@ -118,14 +118,13 @@ const getAnchorPath = computed( width: 100vw; text-align: center; background-color: var(--color-white); - z-index: 1; - - width: 100%; + padding: calc(var(--unit) * 5) 0; border: 0; transition: translate 0.6s cubic-bezier(0.4, 0, 0.2, 1), display 0.6s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete; translate: 0 -100%; + z-index: 1; &[open] { translate: 0 0; @@ -135,10 +134,6 @@ const getAnchorPath = computed( } } - & > div { - padding: calc(var(--unit) * 5) 0; - } - ul { padding: 0; display: flex; From 0e6b7664dbcc11f36aa52594928c773a9d4f4ed1 Mon Sep 17 00:00:00 2001 From: totocalcio Date: Mon, 14 Oct 2024 03:23:55 +0900 Subject: [PATCH 3/5] fix: element that use autofocus --- apps/web/app/components/GlobalHeader.vue | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/apps/web/app/components/GlobalHeader.vue b/apps/web/app/components/GlobalHeader.vue index d47e3318..91d5d607 100644 --- a/apps/web/app/components/GlobalHeader.vue +++ b/apps/web/app/components/GlobalHeader.vue @@ -64,18 +64,21 @@ const getAnchorPath = computed(
- -
    -
  • - +
  • + + + {{ link.text }}
    • From 9324547ba887e0d1913b006a0a8177d042b8c186 Mon Sep 17 00:00:00 2001 From: totocalcio Date: Mon, 14 Oct 2024 03:58:11 +0900 Subject: [PATCH 4/5] Refactor GlobalHeader.vue styles: Update translate values for smooth animation --- apps/web/app/components/GlobalHeader.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/app/components/GlobalHeader.vue b/apps/web/app/components/GlobalHeader.vue index 91d5d607..f1ed18ad 100644 --- a/apps/web/app/components/GlobalHeader.vue +++ b/apps/web/app/components/GlobalHeader.vue @@ -126,14 +126,14 @@ const getAnchorPath = computed( transition: translate 0.6s cubic-bezier(0.4, 0, 0.2, 1), display 0.6s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete; - translate: 0 -100%; + translate: 0 -100dvh; z-index: 1; &[open] { translate: 0 0; @starting-style { - translate: 0 -100%; + translate: 0 -100dvh; } } From 5c2e8d68c8c3c40fed74d2b69dd4791ac836796f Mon Sep 17 00:00:00 2001 From: totocalcio Date: Tue, 15 Oct 2024 23:45:29 +0900 Subject: [PATCH 5/5] - remove aria-label from dialog element. - update transition property. --- apps/web/app/components/GlobalHeader.vue | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/apps/web/app/components/GlobalHeader.vue b/apps/web/app/components/GlobalHeader.vue index f1ed18ad..148510cb 100644 --- a/apps/web/app/components/GlobalHeader.vue +++ b/apps/web/app/components/GlobalHeader.vue @@ -64,12 +64,7 @@ const getAnchorPath = computed( - +
    • @@ -126,7 +121,6 @@ const getAnchorPath = computed( transition: translate 0.6s cubic-bezier(0.4, 0, 0.2, 1), display 0.6s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete; - translate: 0 -100dvh; z-index: 1; &[open] { @@ -137,6 +131,10 @@ const getAnchorPath = computed( } } + &:not([open]) { + translate: 0 -100dvh; + } + ul { padding: 0; display: flex;