1
0
Fork 0

remove daisy dropdown styling from headless dropdowns

This commit is contained in:
Enoch Riese 2022-07-28 15:19:03 -05:00
parent ff2b48cab2
commit 8fff3b28b2

View file

@ -5,17 +5,17 @@ import Link from 'next/link'
/** an accessible dropdown menu for use by picker components */ /** an accessible dropdown menu for use by picker components */
export const Picker = ({Icon, className, title, ariaLabel, iconOnly=false, children, end}) => { export const Picker = ({Icon, className, title, ariaLabel, iconOnly=false, children, end}) => {
return (<Menu as="div" className={`dropdown w-auto ${end ? 'dropdown-end' : ''}`}> return (<Menu as="div" className={`w-auto relative`}>
<Menu.Button className={iconOnly <Menu.Button className={iconOnly
? `btn btn-sm` ? `btn btn-sm`
: `m-0 btn btn-neutral flex flex-row gap-2 : `m-0 btn btn-neutral flex flex-row gap-2
hover:bg-neutral-content hover:border-neutral-content hover:text-neutral hover:bg-neutral-focus
`} `}
aria-label={ariaLabel}> aria-label={ariaLabel}>
<Icon /> <Icon />
{!iconOnly && <span>{title}</span>} {!iconOnly && <span>{title}</span>}
</Menu.Button> </Menu.Button>
<Menu.Items as="ul" className={`p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 ${className}`}> <Menu.Items as="ul" className={`p-2 shadow menu bg-base-100 rounded-box w-52 ${className} absolute ${end ? 'right-0' : 'left-0'} top-full mt-1`}>
{children} {children}
</Menu.Items> </Menu.Items>
</Menu>) </Menu>)