Fix settings nav bug

CDCgov · Feb 4, 2022 · 1afbec1 · emmastephenson · Feb 4, 2022 · 1afbec1
1 parent 093a59c
commit 1afbec1
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/frontend/src/app/Settings/SettingsNav.tsx b/frontend/src/app/Settings/SettingsNav.tsx
@@ -3,37 +3,37 @@ import React from "react";
 import { LinkWithQuery } from "../commonComponents/LinkWithQuery";
 
 const SettingsNav = () => {
+  const classNameByActive = ({ isActive }: { isActive: boolean }) =>
+    isActive ? "active" : "";
+
   return (
     <nav className="prime-secondary-nav" aria-label="Secondary navigation">
       <ul className="usa-nav__secondary-links prime-nav">
         <li className="usa-nav__secondary-item">
-          <LinkWithQuery
-            to={`/settings`}
-            className={({ isActive }) => (isActive ? "active" : "")}
-          >
+          <LinkWithQuery to={`/settings`} end className={classNameByActive}>
             Manage users
           </LinkWithQuery>
         </li>
         <li className="usa-nav__secondary-item">
           <LinkWithQuery
             to={`/settings/facilities`}
-            className={({ isActive }) => (isActive ? "active" : "")}
+            className={classNameByActive}
           >
             Manage facilities
           </LinkWithQuery>
         </li>
         <li className="usa-nav__secondary-item">
           <LinkWithQuery
             to={`/settings/organization`}
-            className={({ isActive }) => (isActive ? "active" : "")}
+            className={classNameByActive}
           >
             Manage organization
           </LinkWithQuery>
         </li>
         <li className="usa-nav__secondary-item">
           <LinkWithQuery
             to={`/settings/self-registration`}
-            className={({ isActive }) => (isActive ? "active" : "")}
+            className={classNameByActive}
           >
             Patient self-registration
           </LinkWithQuery>