From bf2d22074021886d194f29706956bab9b02bcd41 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Thu, 13 Feb 2025 11:55:17 -0700
Subject: [PATCH] update nav menu as links (#5759)

---
 .../src/features/common/nav/MainSideNav.tsx   | 28 ++++++-------------
 clients/admin-ui/src/theme/global.scss        | 10 +++++--
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/clients/admin-ui/src/features/common/nav/MainSideNav.tsx b/clients/admin-ui/src/features/common/nav/MainSideNav.tsx
index ed00f2e9a9..ca1e537557 100644
--- a/clients/admin-ui/src/features/common/nav/MainSideNav.tsx
+++ b/clients/admin-ui/src/features/common/nav/MainSideNav.tsx
@@ -1,11 +1,4 @@
-import {
-  AntButton,
-  AntMenuProps as MenuProps,
-  Box,
-  Icons,
-  Link,
-  VStack,
-} from "fidesui";
+import { AntButton, Box, Icons, VStack } from "fidesui";
 import palette from "fidesui/src/palette/palette.module.scss";
 import NextLink from "next/link";
 import { useRouter } from "next/router";
@@ -39,8 +32,6 @@ export const UnconnectedMainSideNav = ({
   handleLogout: any;
   username: string;
 }) => {
-  const router = useRouter();
-
   const navMenuItems = groups.map((group) => ({
     key: group.title,
     icon: group.icon,
@@ -49,9 +40,13 @@ export const UnconnectedMainSideNav = ({
       key: child.path,
       // child label needs left margin/padding to align with group title
       label: (
-        <span data-testid={`${child.title}-nav-link`} className="ml-4 pl-0.5">
+        <NextLink
+          href={child.path}
+          data-testid={`${child.title}-nav-link`}
+          className="ml-4 pl-0.5"
+        >
           {child.title}
-        </span>
+        </NextLink>
       ),
     })),
   }));
@@ -75,10 +70,6 @@ export const UnconnectedMainSideNav = ({
 
   const activeKey = getActiveKeyFromUrl();
 
-  const handleMenuItemClick: MenuProps["onClick"] = ({ key: path }) => {
-    router.push(path);
-  };
-
   // When the nav is first loaded, we want to open the toggles that were open when the user last visited
   // the page. This is stored in local storage so that it persists across refreshes.
   const getStartupOpenKeys = () => {
@@ -132,13 +123,12 @@ export const UnconnectedMainSideNav = ({
         <Box width="100%">
           <Box pb={6}>
             <Box px={2}>
-              <Link as={NextLink} href={INDEX_ROUTE} display="flex">
+              <NextLink href={INDEX_ROUTE}>
                 <Image src={logoImage} alt="Fides Logo" width={116} />
-              </Link>
+              </NextLink>
             </Box>
           </Box>
           <NavMenu
-            onClick={handleMenuItemClick}
             items={navMenuItems}
             selectedKeys={activeKey ? [activeKey] : []}
             onOpenChange={handleOpenChange}
diff --git a/clients/admin-ui/src/theme/global.scss b/clients/admin-ui/src/theme/global.scss
index 388e5a7445..2f51a75b85 100644
--- a/clients/admin-ui/src/theme/global.scss
+++ b/clients/admin-ui/src/theme/global.scss
@@ -40,17 +40,21 @@ h6 {
 // Custom styles for dark submenus
 .ant-menu-dark .ant-menu-sub {
   // The unselected submenu item should be light gray
-  > .ant-menu-item > .ant-menu-title-content {
+  > .ant-menu-item > .ant-menu-title-content a {
     color: var(--fidesui-neutral-200);
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: var(--fidesui-full-white);
     }
+    &:focus-visible {
+      text-decoration: underline;
+    }
   }
   // The selected submenu item should be dark, because the background is light
   // But using the token "darkItemSelectedColor" also affect the group title,
   // therefore we need this css rule
-  > .ant-menu-item.ant-menu-item-selected > .ant-menu-title-content {
+  > .ant-menu-item.ant-menu-item-selected > .ant-menu-title-content a {
     color: var(--fidesui-minos);
   }
 }