From b641af8c8fd5750f805d7daf6241190d8c889d30 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 20 Jul 2022 14:51:17 +1000
Subject: [PATCH] fix nav items not accessible with Tab

---
 src/layouts/Navigation/NavItem.tsx | 46 ++++++++++++++++++++----------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/layouts/Navigation/NavItem.tsx b/src/layouts/Navigation/NavItem.tsx
index c33bf6f3..23f53138 100644
--- a/src/layouts/Navigation/NavItem.tsx
+++ b/src/layouts/Navigation/NavItem.tsx
@@ -1,29 +1,45 @@
 import { Link, useLocation } from "react-router-dom";
 import { MenuItem, MenuItemProps } from "@mui/material";
+import { spreadSx } from "@src/utils/ui";
 
-export default function NavItem(props: MenuItemProps<typeof Link>) {
+const linkProps = { target: "_blank", rel: "noopener noreferrer" };
+
+export default function NavItem(
+  props: MenuItemProps<typeof Link | "a" | "button">
+) {
   const { pathname } = useLocation();
 
   return (
     <MenuItem
-      component={Link}
-      selected={pathname === props.to}
+      role="none"
+      tabIndex={0}
+      component={"to" in props ? Link : "href" in props ? "a" : "button"}
+      selected={"to" in props ? pathname === props.to : false}
       {...props}
-      sx={{
-        "& .MuiListItemText-primary": {
-          typography: "button",
+      {...("href" in props ? linkProps : {})}
+      sx={[
+        {
+          overflow: "hidden",
+          textAlign: "left",
           color: "text.secondary",
-        },
-        "& .MuiListItemIcon-root": { opacity: 0.87 },
 
-        "&:hover, &.Mui-selected": {
-          "& .MuiListItemText-primary": { color: "text.primary" },
-          "& .MuiSvgIcon-root": { color: "text.primary" },
-        },
+          "& .MuiListItemText-primary": {
+            typography: "button",
+            overflow: "hidden",
+          },
+          "& .MuiSvgIcon-root": {
+            color: "inherit",
+            opacity: 0.87,
+            display: "block",
+          },
 
-        ...props.sx,
-        "&&::before": { left: "auto", right: 0 },
-      }}
+          "&:hover, &.Mui-selected": {
+            "& .MuiListItemText-primary": { color: "text.primary" },
+            "& .MuiSvgIcon-root": { color: "text.primary" },
+          },
+        },
+        ...spreadSx(props.sx),
+      ]}
     />
   );
 }