diff options
Diffstat (limited to 'src/components/user_dropdown_button.tsx')
-rw-r--r-- | src/components/user_dropdown_button.tsx | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/src/components/user_dropdown_button.tsx b/src/components/user_dropdown_button.tsx new file mode 100644 index 0000000..f4148bc --- /dev/null +++ b/src/components/user_dropdown_button.tsx @@ -0,0 +1,32 @@ +import { useEffect } from "react"; +import { PersonCircle } from "react-bootstrap-icons"; +import { Dropdown, DropdownOptions } from 'flowbite'; +import UserAccountDropdownMenu from "./user_account_dropdown_menu"; + +export default function UserDropdownButton() { + useEffect(() => { + const target = document.getElementById("userAccountDropdownMenu"); + const trigger = document.getElementById("userAccountButton"); + const options: DropdownOptions = { + triggerType: 'click', + placement: 'bottom' + }; + const dropdown_menu = new Dropdown(target, trigger, options); + trigger?.addEventListener("click", () => { + if(dropdown_menu.isVisible()) + dropdown_menu.show(); + }); + }, []); + + return ( + <> + <button id="userAccountButton" className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"> + <span className="[&>svg]:w-5"> + <PersonCircle color="#394490" size={32}/> + </span> + </button> + + <UserAccountDropdownMenu/> + </> + ); +}
\ No newline at end of file |