teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
TAKAHASHI Shuuji 2024-03-08 04:14:20 +09:00 committed by GitHub
parent df165f0023
commit efa17caf5e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/nav/NavSideItem.vue
View file

@ -57,11 +57,21 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
<div <div
class="item" class="item"
flex items-center gap4 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 w-fit rounded-3
px2 mx3 sm:mxa px2 mx3 sm:mxa
xl="ml0 mr5 px5 w-auto"
transition-100 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"> <slot name="icon">
<div :class="icon" text-xl /> <div :class="icon" text-xl />

1
composables/screen.ts
View file

@ -2,5 +2,6 @@ import { breakpointsTailwind } from '@vueuse/core'
export const breakpoints = useBreakpoints(breakpointsTailwind) export const breakpoints = useBreakpoints(breakpointsTailwind)
export const isSmallScreen = breakpoints.smallerOrEqual('sm')
export const isMediumOrLargeScreen = breakpoints.between('sm', 'xl') export const isMediumOrLargeScreen = breakpoints.between('sm', 'xl')
export const isExtraLargeScreen = breakpoints.smallerOrEqual('xl') export const isExtraLargeScreen = breakpoints.smallerOrEqual('xl')