bug: using NavLink for menus

Kira-Pilot · Kira-Pilot · commit 09244ff1b009 · 2022-05-17T18:17:32.000Z
resolves #955
diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx
@@ -17,7 +17,7 @@ interface BorderedMenuRowProps {
   /** An SvgIcon that will be rendered to the left of the title */
   Icon: typeof SvgIcon
   /** URL path */
-  path?: string
+  path: string
   /** Required title of this row */
   title: string
   /** Defaults to `"wide"` */
@@ -37,38 +37,30 @@ export const BorderedMenuRow: React.FC<BorderedMenuRowProps> = ({
 }) => {
   const styles = useStyles()
 
-  const Component = () => (
-    <ListItem
-      classes={{ gutters: styles.rootGutters }}
-      className={styles.root}
-      onClick={onClick}
-      data-status={active ? "active" : "inactive"}
-    >
-      <div className={styles.content} data-variant={variant}>
-        <div className={styles.contentTop}>
-          <Icon className={styles.icon} />
-          <Typography className={styles.title}>{title}</Typography>
-          {active && <CheckIcon className={styles.checkMark} />}
-        </div>
+  return (
+    <NavLink className={styles.link} to={path}>
+      <ListItem
+        classes={{ gutters: styles.rootGutters }}
+        className={styles.root}
+        data-status={active ? "active" : "inactive"}
+        onClick={onClick}
+      >
+        <div className={styles.content} data-variant={variant}>
+          <div className={styles.contentTop}>
+            <Icon className={styles.icon} />
+            <Typography className={styles.title}>{title}</Typography>
+            {active && <CheckIcon className={styles.checkMark} />}
+          </div>
 
-        {description && (
-          <Typography className={styles.description} color="textSecondary" variant="caption">
-            {ellipsizeText(description)}
-          </Typography>
-        )}
-      </div>
-    </ListItem>
+          {description && (
+            <Typography className={styles.description} color="textSecondary" variant="caption">
+              {ellipsizeText(description)}
+            </Typography>
+          )}
+        </div>
+      </ListItem>
+    </NavLink>
   )
-
-  if (path) {
-    return (
-      <NavLink to={path} className={styles.link}>
-        <Component />
-      </NavLink>
-    )
-  }
-
-  return <Component />
 }
 
 const iconSize = 20
