mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 12:13:27 +00:00
feat: Allow Dropdown component to have alignment (#303)
* feat: Allow Dropdown component to have alignment * fix: Align quick actions dropdown * fix: content width of dropdown items Co-authored-by: kaj <40004347+KAJdev@users.noreply.github.com> Co-authored-by: kajdev <zekewotring@gmail.com>
This commit is contained in:
parent
020ee02a7f
commit
7cb6e4f574
|
@ -117,6 +117,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
|
|||
<div className="flex mr-3 space-x-2">
|
||||
<Dropdown
|
||||
// className="absolute block h-6 w-44 top-2 right-4"
|
||||
align="right"
|
||||
items={[
|
||||
[
|
||||
{
|
||||
|
|
|
@ -21,6 +21,7 @@ export interface DropdownProps {
|
|||
className?: string;
|
||||
itemsClassName?: string;
|
||||
itemButtonClassName?: string;
|
||||
align?: 'left' | 'right';
|
||||
}
|
||||
|
||||
export const Dropdown: React.FC<DropdownProps> = (props) => {
|
||||
|
@ -49,8 +50,10 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
|
|||
|
||||
<Menu.Items
|
||||
className={clsx(
|
||||
'absolute z-50 min-w-[100px] w-full bg-white border divide-y divide-gray-100 rounded-md shadow-xl top-full dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none',
|
||||
props.itemsClassName
|
||||
'absolute z-50 min-w-fit w-full bg-white border divide-y divide-gray-100 rounded shadow-xl top-full dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none',
|
||||
props.itemsClassName,
|
||||
{ 'left-0': props.align === 'left' },
|
||||
{ 'right-0': props.align === 'right' }
|
||||
)}
|
||||
>
|
||||
{props.items.map((item, index) => (
|
||||
|
@ -61,7 +64,7 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
|
|||
<button
|
||||
onClick={button.onPress}
|
||||
className={clsx(
|
||||
'text-sm group flex rounded items-center w-full px-2 py-1 dark:hover:bg-gray-500',
|
||||
'text-sm group flex grow shrink-0 rounded items-center w-full whitespace-nowrap px-2 py-1 mb-[2px] dark:hover:bg-gray-500',
|
||||
{
|
||||
'bg-gray-300 dark:!bg-gray-500 dark:hover:bg-gray-500': button.selected
|
||||
// 'text-gray-900 dark:text-gray-200': !active
|
||||
|
|
Loading…
Reference in a new issue