arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 16:00:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(NavigationMenu): handle disabled through variants + isolate list + use separator instead of divide

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-15 15:21:25 +02:00
parent cd214f91db
commit f664f69097
3 changed files with 77 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/theme/navigation-menu.ts
View File

@@ -1,25 +1,26 @@
export default {
slots: {
root: 'relative',
list: '',
root: 'relative flex gap-1.5',
list: 'isolate',
item: '',
link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400',
linkLeadingIcon: 'shrink-0 size-5',
linkLeadingAvatar: 'shrink-0',
linkLabel: 'truncate',
linkTrailing: 'ms-auto',
linkTrailingBadge: 'shrink-0 rounded'
linkTrailingBadge: 'shrink-0 rounded',
separator: 'px-2'
},
variants: {
orientation: {
horizontal: {
root: 'w-full flex items-center justify-between',
root: 'w-full items-center justify-between',
list: 'flex items-center min-w-0',
item: 'min-w-0',
link: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full'
},
vertical: {
root: 'flex flex-col *:py-1.5 first:*:pt-0 last:*:pb-0 divide-y divide-gray-200 dark:divide-gray-800',
root: 'flex-col',
link: 'px-2.5 py-1.5 before:inset-px'
}
},
@@ -32,6 +33,11 @@ export default {
link: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
linkLeadingIcon: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
}
},
disabled: {
true: {
link: 'cursor-not-allowed opacity-75'
}
}
},
compoundVariants: [{