fix: context menu and dialog didn't play nice

src/Avatar.tsx

@@ -10,9 +10,10 @@ export default function Avatar() {
   const { user, onLogout } = useSession();
   const [contextMenu, setContextMenu] = useState<{
     open: boolean;
+    allowOpen: boolean;
     mouseX: number;
     mouseY: number;
-  }>({ open: false, mouseX: 0, mouseY: 0 });
+  }>({ open: false, allowOpen: true, mouseX: 0, mouseY: 0 });
   const contextMenuRef = createRef<HTMLUListElement>();
   const avatarRef = createRef<HTMLDivElement>();
 
@@ -22,13 +23,16 @@ export default function Avatar() {
   ];
 
   const handleMenuClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    if (!contextMenu.allowOpen) return;
     event.preventDefault();
     setContextMenu({
       open: !contextMenu.open,
+      allowOpen: false,
       mouseX: event.clientX + 4,
       mouseY: event.clientY + 2,
     });
   };
+
   useEffect(() => {
     if (contextMenu.open) {
       document.addEventListener("click", handleCloseContextMenuOutside);
@@ -41,6 +45,7 @@ export default function Avatar() {
   const handleMenuClose = () => {
     setContextMenu({ ...contextMenu, open: false });
   };
+
   const handleCloseContextMenuOutside: (event: MouseEvent) => void = (ev) => {
     if (
       !(
@@ -57,9 +62,10 @@ export default function Avatar() {
 
   function handleViewProfile() {
     handleMenuClose();
+    setContextMenu({ ...contextMenu, allowOpen: false });
     dialogRef.current?.showModal();
     setDialog(
-      <ul>
+      <ul style={{ listStyle: "none" }}>
         <li>username: {user?.username}</li>
       </ul>
     );
@@ -113,6 +119,7 @@ export default function Avatar() {
         ref={dialogRef}
         onClick={(event) => {
           event.currentTarget.close();
+          setContextMenu({ ...contextMenu, allowOpen: true });
         }}
       >
         {dialog}