YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: member menu dropdown position (#639)

Browse Source 
* fix: member menu dropdown position

* chore: cleanup

* chore: cleanup
This commit is contained in:
Tiefseemonster
2022-11-30 13:18:39 +01:00
committed by GitHub
parent 6b058cd299
commit 1078132b12
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/Settings/MemberSection.tsx
View File

@ -193,6 +193,7 @@ const PreferencesSection = () => {
) : ( ) : (
<Dropdown <Dropdown
actionsClassName="!w-24" actionsClassName="!w-24"
positionClassName="bottom-full right-0 mb-1"
actions={ actions={
<> <>
<button <button

7
web/src/components/common/Dropdown.tsx
View File

@ -7,10 +7,11 @@ interface Props {
actions?: ReactNode; actions?: ReactNode;
className?: string; className?: string;
actionsClassName?: string; actionsClassName?: string;
positionClassName?: string;
} }
const Dropdown: React.FC<Props> = (props: Props) => { const Dropdown: React.FC<Props> = (props: Props) => {
const { trigger, actions, className, actionsClassName } = props; const { trigger, actions, className, actionsClassName, positionClassName } = props;
const [dropdownStatus, toggleDropdownStatus] = useToggle(false); const [dropdownStatus, toggleDropdownStatus] = useToggle(false);
const dropdownWrapperRef = useRef<HTMLDivElement>(null); const dropdownWrapperRef = useRef<HTMLDivElement>(null);
@ -42,9 +43,9 @@ const Dropdown: React.FC<Props> = (props: Props) => {
</button> </button>
)} )}
<div <div
className={`w-auto mt-1 absolute top-full right-0 flex flex-col justify-start items-start bg-white dark:bg-zinc-700 z-1 p-1 rounded-md shadow ${ className={`w-auto absolute flex flex-col justify-start items-start bg-white dark:bg-zinc-700 z-10 p-1 rounded-md shadow ${
actionsClassName ?? "" actionsClassName ?? ""
} ${dropdownStatus ? "" : "!hidden"}`} } ${dropdownStatus ? "" : "!hidden"} ${positionClassName ?? "top-full right-0 mt-1"}`}
> >
{actions} {actions}
</div> </div>