fix: improve dropdown UX (#1986)

decred · Jun 9, 2020 · 450e34f · 450e34f
1 parent 7454257
commit 450e34f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/src/components/HeaderNav/HeaderNav.jsx b/src/components/HeaderNav/HeaderNav.jsx
@@ -7,7 +7,6 @@ import {
   classNames
 } from "pi-ui";
 import React, { useEffect, useMemo, useCallback } from "react";
-import Link from "src/components/Link";
 import { NavLink, withRouter } from "react-router-dom";
 import useLocalStorage from "src/hooks/utils/useLocalStorage";
 import useNavigation from "src/hooks/api/useNavigation";
@@ -34,17 +33,16 @@ const HeaderNav = ({ history }) => {
   const menuItems = useMemo(
     () =>
       navMenuPaths.map(({ label, path, admin }, idx) => {
+        const onMenuItemClick = (path) => () => history.push(path);
         return (
           ((admin && userIsAdmin) || !admin) && (
-            <DropdownItem key={`link-${idx}`}>
-              <Link className={styles.navLink} to={path}>
-                {label}
-              </Link>
+            <DropdownItem key={`link-${idx}`} onClick={onMenuItemClick(path)}>
+              {label}
             </DropdownItem>
           )
         );
       }),
-    [userIsAdmin, navMenuPaths]
+    [history, navMenuPaths, userIsAdmin]
   );
 
   const [darkThemeOnLocalStorage, setDarkThemeOnLocalStorage] = useLocalStorage(
@@ -91,17 +89,13 @@ const HeaderNav = ({ history }) => {
         title={username}>
         {menuItems}
         <DropdownItem onClick={goToUserAccount}>Account</DropdownItem>
-        <DropdownItem>
+        <DropdownItem onClick={onThemeToggleHandler}>
           <div className={styles.themeToggleWrapper}>
             <Toggle
               onToggle={onThemeToggleHandler}
               toggled={themeName === "dark"}
             />
-            <div
-              onClick={onThemeToggleHandler}
-              className={styles.themeToggleLabel}>
-              Dark Mode
-            </div>
+            <div className={styles.themeToggleLabel}>Dark Mode</div>
           </div>
         </DropdownItem>
         <DropdownItem onClick={openModalLogout}>Logout</DropdownItem>

diff --git a/yarn.lock b/yarn.lock
@@ -1584,9 +1584,9 @@
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
 "@types/node@*":
-  version "14.0.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.11.tgz#61d4886e2424da73b7b25547f59fdcb534c165a3"
-  integrity sha512-lCvvI24L21ZVeIiyIUHZ5Oflv1hhHQ5E1S25IRlKIXaRkVgmXpJMI3wUJkmym2bTbCe+WoIibQnMVAU3FguaOg==
+  version "14.0.12"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.12.tgz#9c1d8ffb8084e8936603a6122a7649e40e68e04b"
+  integrity sha512-/sjzehvjkkpvLpYtN6/2dv5kg41otMGuHQUt9T2aiAuIfleCQRQHXXzF1eAw/qkZTj5Kcf4JSTf7EIizHocy6Q==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -4299,9 +4299,10 @@ ejs@^2.6.1, ejs@^2.7.4:
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
 electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.413:
-  version "1.3.464"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.464.tgz#fe13feaa08f6f865d3c89d5d72e54c194f463aa5"
-  integrity sha512-Oo+0+CN9d2z6FToQW6Hwvi9ez09Y/usKwr0tsDsyg43a871zVJCi1nR0v03djLbRNcaCKjtrnVf2XJhTxEpPCg==
+  version "1.3.465"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.465.tgz#d692e5c383317570c2bd82092a24a0308c6ccf29"
+  integrity sha512-K/lUeT3NLAsJ5SHRDhK3/zd0tw7OUllYD8w+fTOXm6ljCPsp2qq+vMzxpLo8u1M27ZjZAjRbsA6rirvne2nAMQ==
+
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -9107,7 +9108,7 @@ performance-now@^2.1.0:
 
 "pi-ui@https://github.com/decred/pi-ui":
   version "1.0.0"
-  resolved "https://github.com/decred/pi-ui#ee7d2a71d949548fc9fba42ed46ed9249b731055"
+  resolved "https://github.com/decred/pi-ui#bd184c6c60704474e8be23a1f680d081a2c2472e"
   dependencies:
     clamp-js-main "^0.11.5"
     react-select "2.4.4"