fix: consistent hover highlight styling in mobile bottom navigation menus (#2661)

components/nav/NavSideItem.vue

@@ -57,11 +57,21 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
       <div
         class="item"
         flex items-center gap4
+        xl="ml0 mr5 px5 w-auto"
+        :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
-        xl="ml0 mr5 px5 w-auto"
             transition-100
-        elk-group-hover="bg-active" group-focus-visible:ring="2 current"
+            elk-group-hover-bg-active
+            group-focus-visible:ring-2
+            group-focus-visible:ring-current
+          `"
       >
         <slot name="icon">
           <div :class="icon" text-xl />

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')