bug: using NavLink for menus (#1530)

Kira-Pilot · kylecarbs · commit 051424be2453 · 2022-06-10T17:01:39.000Z
* bug: using NavLink for menus resolves #955 * lets fix our story
diff --git a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx
@@ -12,8 +12,14 @@ export default {
 
 const Template: Story<BorderedMenuProps> = (args: BorderedMenuProps) => (
   <BorderedMenu {...args}>
-    <BorderedMenuRow title="Item 1" description="Here's a description" Icon={BuildingIcon} />
-    <BorderedMenuRow active title="Item 2" description="This BorderedMenuRow is active" Icon={UsersOutlinedIcon} />
+    <BorderedMenuRow title="Item 1" description="Here's a description" Icon={BuildingIcon} path="/" />
+    <BorderedMenuRow
+      active
+      title="Item 2"
+      description="This BorderedMenuRow is active"
+      Icon={UsersOutlinedIcon}
+      path="/"
+    />
   </BorderedMenu>
 )
 
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
