From efa17caf5e5c8946bd3d7e60af60c6864cb7a7a1 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Fri, 8 Mar 2024 04:14:20 +0900
Subject: [PATCH] fix: consistent hover highlight styling in mobile bottom
 navigation menus (#2661)

---
 components/nav/NavSideItem.vue | 18 ++++++++++++++----
 composables/screen.ts          |  1 +
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index 99cb5506..c1c5b02a 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -57,11 +57,21 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
       <div
         class="item"
         flex items-center gap4
-        w-fit rounded-3
-        px2 mx3 sm:mxa
         xl="ml0 mr5 px5 w-auto"
-        transition-100
-        elk-group-hover="bg-active" group-focus-visible:ring="2 current"
+        :class="isSmallScreen
+          ? `
+            w-full
+            px5 sm:mxa
+            transition-colors duration-200 transform
+            hover-bg-gray-100 hover-dark:(bg-gray-700 text-white)
+          ` : `
+            w-fit rounded-3
+            px2 mx3 sm:mxa
+            transition-100
+            elk-group-hover-bg-active
+            group-focus-visible:ring-2
+            group-focus-visible:ring-current
+          `"
       >
         <slot name="icon">
           <div :class="icon" text-xl />
diff --git a/composables/screen.ts b/composables/screen.ts
index fc2544be..8e72d634 100644
--- a/composables/screen.ts
+++ b/composables/screen.ts
@@ -2,5 +2,6 @@ import { breakpointsTailwind } from '@vueuse/core'
 
 export const breakpoints = useBreakpoints(breakpointsTailwind)
 
+export const isSmallScreen = breakpoints.smallerOrEqual('sm')
 export const isMediumOrLargeScreen = breakpoints.between('sm', 'xl')
 export const isExtraLargeScreen = breakpoints.smallerOrEqual('xl')