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/UserButton.module.css

@@ -1,25 +0,0 @@
-.container {
-  display: flex;
-  position: relative;
-  cursor: pointer;
-}
-
-.username {
-  border-bottom: 1px solid var(--gray500);
-}
-
-.username:hover {
-  background: var(--gray50);
-}
-
-.menu {
-  z-index: 100;
-}
-
-.open {
-  background: var(--gray200);
-}
-
-.open:hover {
-  background: var(--gray200);
-}

components/layout/Header.js

@@ -3,10 +3,10 @@ import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
-import UserButton from 'components/common/UserButton';
 import Icon from 'components/common/Icon';
 import LanguageButton from 'components/settings/LanguageButton';
 import ThemeButton from 'components/settings/ThemeButton';
+import UserButton from 'components/settings/UserButton';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
 

components/settings/LanguageButton.js

@@ -1,35 +1,17 @@
-import React, { useState, useRef } from 'react';
-import classNames from 'classnames';
+import React from 'react';
 import Head from 'next/head';
-import Menu from 'components/common/Menu';
-import Button from 'components/common/Button';
 import { menuOptions } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
-import useDocumentClick from 'hooks/useDocumentClick';
+import MenuButton from 'components/common/MenuButton';
 import Globe from 'assets/globe.svg';
-import styles from './LanguageButton.module.css';
 
-export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
-  const [showMenu, setShowMenu] = useState(false);
+export default function LanguageButton() {
   const [locale, setLocale] = useLocale();
-  const ref = useRef();
-  const selectedLocale = menuOptions.find(e => e.value === locale)?.display;
 
   function handleSelect(value) {
     setLocale(value);
-    setShowMenu(false);
   }
 
-  function toggleMenu() {
-    setShowMenu(state => !state);
-  }
-
-  useDocumentClick(e => {
-    if (!ref.current.contains(e.target)) {
-      setShowMenu(false);
-    }
-  });
-
   return (
     <>
       <Head>
@@ -46,25 +28,13 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
           />
         )}
       </Head>
-      <div ref={ref} className={styles.container}>
-        <Button
-          icon={<Globe />}
-          className={classNames({ [styles.open]: showMenu })}
-          onClick={toggleMenu}
-          variant="light"
-        >
-          <div className={styles.text}>{selectedLocale}</div>
-        </Button>
-        {showMenu && (
-          <Menu
-            className={styles.menu}
-            options={menuOptions}
-            onSelect={handleSelect}
-            float={menuPosition}
-            align={menuAlign}
-          />
-        )}
-      </div>
+      <MenuButton
+        icon={<Globe />}
+        options={menuOptions}
+        value={locale}
+        renderValue={option => option?.display}
+        onSelect={handleSelect}
+      />
     </>
   );
 }

components/settings/ThemeButton.js

@@ -13,12 +13,12 @@ export default function ThemeButton() {
   const transitions = useTransition(theme, theme => theme, {
     from: {
       opacity: 0,
-      transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
+      transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
     },
     enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
     leave: {
       opacity: 0,
-      transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
+      transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
     },
   });
 

components/settings/UserButton.js

@@ -1,20 +1,15 @@
-import React, { useState, useRef } from 'react';
+import React 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 MenuButton from 'components/common/MenuButton';
+import Icon from 'components/common/Icon';
 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 = [
@@ -34,8 +29,6 @@ export default function UserButton() {
   ];
 
   function handleSelect(value) {
-    setShowMenu(false);
-
     if (value === 'logout') {
       router.push('/logout');
     } else if (value === 'profile') {
@@ -43,32 +36,12 @@ export default function UserButton() {
     }
   }
 
-  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>
+    <MenuButton
+      icon={<Icon icon={<User />} size="large" />}
+      value={<Icon icon={<Chevron />} size="small" />}
+      options={menuOptions}
+      onSelect={handleSelect}
+    />
   );
 }

components/settings/UserButton.module.css

@@ -0,0 +1,7 @@
+.username {
+  border-bottom: 1px solid var(--gray500);
+}
+
+.username:hover {
+  background: var(--gray50);
+}