Transition to modals and popovers

src/UserMenu.jsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useMemo } from "react";
+import { ButtonTooltip, HeaderButton } from "./RoomButton";
+import { Popover, PopoverMenu, PopoverMenuItem } from "./PopoverMenu";
+import { ReactComponent as UserIcon } from "./icons/User.svg";
+import { ReactComponent as LoginIcon } from "./icons/Login.svg";
+import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
+import styles from "./UserMenu.module.css";
+
+export function UserMenu({ userName, signedIn, onLogin, onLogout }) {
+  const onAction = useCallback((value) => {
+    switch (value) {
+      case "user":
+        break;
+      case "logout":
+        onLogout();
+        break;
+      case "login":
+        onLogin();
+        break;
+    }
+  });
+
+  const items = useMemo(() => {
+    if (signedIn) {
+      return [
+        {
+          key: "user",
+          icon: UserIcon,
+          label: userName,
+        },
+        {
+          key: "logout",
+          label: "Sign Out",
+          icon: LogoutIcon,
+        },
+      ];
+    } else {
+      return [
+        {
+          key: "login",
+          label: "Sign In",
+          icon: LoginIcon,
+        },
+      ];
+    }
+  }, [signedIn, userName]);
+
+  return (
+    <PopoverMenu onAction={onAction} placement="bottom right">
+      <HeaderButton>
+        <ButtonTooltip>Profile</ButtonTooltip>
+        <div className={styles.userButton}>
+          <UserIcon />
+          <span>{userName}</span>
+        </div>
+      </HeaderButton>
+      {(props) => (
+        <Popover {...props} label="User menu">
+          {items.map(({ key, icon: Icon, label }) => (
+            <PopoverMenuItem key={key} textValue={label}>
+              <Icon />
+              <span>{label}</span>
+            </PopoverMenuItem>
+          ))}
+        </Popover>
+      )}
+    </PopoverMenu>
+  );
+}