Refactored menu buttons.

components/common/DropDown.js

@@ -15,6 +15,7 @@ export default function DropDown({
 }) {
   const [showMenu, setShowMenu] = useState(false);
   const ref = useRef();
+  const selectedOption = options.find(e => e.value === value);
 
   function handleShowMenu() {
     setShowMenu(state => !state);
@@ -40,7 +41,13 @@ export default function DropDown({
         <Icon icon={<Chevron />} className={styles.icon} size="small" />
       </div>
       {showMenu && (
-        <Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" />
+        <Menu
+          className={menuClassName}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float="bottom"
+        />
       )}
     </div>
   );

components/common/Menu.js

@@ -33,7 +33,8 @@ export default function Menu({
             <div
               key={value}
               className={classNames(styles.option, optionClassName, customClassName, {
-                [selectedClassName]: selectedOption === value,
+                [selectedClassName]: selectedOption === option,
+                [styles.selected]: selectedOption === option,
                 [styles.divider]: divider,
               })}
               onClick={e => onSelect(value, e)}

components/common/Menu.module.css

@@ -44,3 +44,7 @@
 .divider {
   border-top: 1px solid var(--gray300);
 }
+
+.selected {
+  font-weight: 600;
+}

components/common/MenuButton.js

@@ -0,0 +1,58 @@
+import React, { useState, useRef } from 'react';
+import classNames from 'classnames';
+import Menu from 'components/common/Menu';
+import Button from 'components/common/Button';
+import useDocumentClick from 'hooks/useDocumentClick';
+import styles from './MenuButton.module.css';
+
+export default function MenuButton({
+  icon,
+  value,
+  options,
+  menuPosition = 'bottom',
+  menuAlign = 'right',
+  onSelect,
+  renderValue,
+}) {
+  const [showMenu, setShowMenu] = useState(false);
+  const ref = useRef();
+  const selectedOption = options.find(e => e.value === value);
+
+  function handleSelect(value) {
+    onSelect(value);
+    setShowMenu(false);
+  }
+
+  function toggleMenu() {
+    setShowMenu(state => !state);
+  }
+
+  useDocumentClick(e => {
+    if (!ref.current.contains(e.target)) {
+      setShowMenu(false);
+    }
+  });
+
+  return (
+    <div className={styles.container} ref={ref}>
+      <Button
+        icon={icon}
+        className={classNames({ [styles.open]: showMenu })}
+        onClick={toggleMenu}
+        variant="light"
+      >
+        <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
+      </Button>
+      {showMenu && (
+        <Menu
+          className={styles.menu}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float={menuPosition}
+          align={menuAlign}
+        />
+      )}
+    </div>
+  );
+}

components/common/MenuButton.module.css

@@ -4,18 +4,14 @@
   cursor: pointer;
 }
 
-.username {
-  border-bottom: 1px solid var(--gray500);
-}
-
-.username:hover {
-  background: var(--gray50);
-}
-
 .menu {
   z-index: 100;
 }
 
+.text {
+  font-size: var(--font-size-small);
+}
+
 .open {
   background: var(--gray200);
 }

components/common/UserButton.js

@@ -1,74 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
-import { useRouter } from 'next/router';
-import Menu from './Menu';
-import Icon from './Icon';
-import Button from './Button';
-import useDocumentClick from 'hooks/useDocumentClick';
-import User from 'assets/user.svg';
-import Chevron from 'assets/chevron-down.svg';
-import styles from './UserButton.module.css';
-import classNames from 'classnames';
-
-export default function UserButton() {
-  const [showMenu, setShowMenu] = useState(false);
-  const user = useSelector(state => state.user);
-  const ref = useRef();
-  const router = useRouter();
-
-  const menuOptions = [
-    {
-      label: (
-        <FormattedMessage
-          id="label.logged-in-as"
-          defaultMessage="Logged in as {username}"
-          values={{ username: <b>{user.username}</b> }}
-        />
-      ),
-      value: 'username',
-      className: styles.username,
-    },
-    { label: <FormattedMessage id="label.profile" defaultMessage="Profile" />, value: 'profile' },
-    { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
-  ];
-
-  function handleSelect(value) {
-    setShowMenu(false);
-
-    if (value === 'logout') {
-      router.push('/logout');
-    } else if (value === 'profile') {
-      router.push('/settings/profile');
-    }
-  }
-
-  useDocumentClick(e => {
-    if (!ref.current.contains(e.target)) {
-      setShowMenu(false);
-    }
-  });
-
-  return (
-    <div ref={ref} className={styles.container}>
-      <Button
-        icon={<User />}
-        className={classNames({ [styles.open]: showMenu })}
-        onClick={() => setShowMenu(state => !state)}
-        size="large"
-        variant="light"
-      >
-        <Icon icon={<Chevron />} size="small" />
-      </Button>
-      {showMenu && (
-        <Menu
-          className={styles.menu}
-          options={menuOptions}
-          onSelect={handleSelect}
-          float="bottom"
-          align="right"
-        />
-      )}
-    </div>
-  );
-}