From 0d20b820c87a48fda78dadce4150f3c5c19062cd Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 13 Mar 2024 16:07:12 -0700
Subject: [PATCH 1/2] Add logic to highlight NavLink when on create form

---
 app/components/Sidebar.tsx | 40 +++++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index e4b383282b..352c3497fd 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useLocation } from 'react-router-dom'
 
 import { Action16Icon, Document16Icon } from '@oxide/design-system/icons/react'
 
@@ -88,20 +88,24 @@ export const NavLinkItem = (props: {
   children: React.ReactNode
   end?: boolean
   disabled?: boolean
-}) => (
-  <li>
-    <NavLink
-      to={props.to}
-      className={({ isActive }) =>
-        cn(linkStyles, {
-          'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover svg:!text-accent-tertiary':
-            isActive,
-          'pointer-events-none text-disabled': props.disabled,
-        })
-      }
-      end={props.end}
-    >
-      {props.children}
-    </NavLink>
-  </li>
-)
+}) => {
+  // If the current page's URL matches the create form for this NavLink resource, we want to highlight the NavLink in the sidebar.
+  const currentPathIsCreateForm = useLocation().pathname === `${props.to}-new`
+  return (
+    <li>
+      <NavLink
+        to={props.to}
+        className={({ isActive }) =>
+          cn(linkStyles, {
+            'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover svg:!text-accent-tertiary':
+              isActive || currentPathIsCreateForm,
+            'pointer-events-none text-disabled': props.disabled,
+          })
+        }
+        end={props.end}
+      >
+        {props.children}
+      </NavLink>
+    </li>
+  )
+}

From 7fdc7fdb62c4b475f0158344b5e97ee4d19c6969 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 13 Mar 2024 16:31:22 -0700
Subject: [PATCH 2/2] Use startsWith to match trailing slash

---
 app/components/Sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 352c3497fd..b1e61c126c 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -89,8 +89,8 @@ export const NavLinkItem = (props: {
   end?: boolean
   disabled?: boolean
 }) => {
-  // If the current page's URL matches the create form for this NavLink resource, we want to highlight the NavLink in the sidebar.
-  const currentPathIsCreateForm = useLocation().pathname === `${props.to}-new`
+  // If the current page is the create form for this NavLinkItem's resource, highlight the NavLink in the sidebar
+  const currentPathIsCreateForm = useLocation().pathname.startsWith(`${props.to}-new`)
   return (
     <li>
       <NavLink