From 1afbec1a12ef23c8f86a721ed8d76685e9b70c51 Mon Sep 17 00:00:00 2001
From: Nick Clyde <nick@clyde.tech>
Date: Fri, 4 Feb 2022 15:18:22 -0800
Subject: [PATCH] Fix settings nav bug

---
 frontend/src/app/Settings/SettingsNav.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/Settings/SettingsNav.tsx b/frontend/src/app/Settings/SettingsNav.tsx
index 2d18a7ba8c..f72f98b2de 100644
--- a/frontend/src/app/Settings/SettingsNav.tsx
+++ b/frontend/src/app/Settings/SettingsNav.tsx
@@ -3,21 +3,21 @@ 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>
@@ -25,7 +25,7 @@ const SettingsNav = () => {
         <li className="usa-nav__secondary-item">
           <LinkWithQuery
             to={`/settings/organization`}
-            className={({ isActive }) => (isActive ? "active" : "")}
+            className={classNameByActive}
           >
             Manage organization
           </LinkWithQuery>
@@ -33,7 +33,7 @@ const SettingsNav = () => {
         <li className="usa-nav__secondary-item">
           <LinkWithQuery
             to={`/settings/self-registration`}
-            className={({ isActive }) => (isActive ? "active" : "")}
+            className={classNameByActive}
           >
             Patient self-registration
           </LinkWithQuery>