Link-side approach for sidebar link active highlight

app/components/Sidebar.tsx

@@ -88,17 +88,24 @@ export const NavLinkItem = (props: {
   children: React.ReactNode
   end?: boolean
   disabled?: boolean
+  /**
+   * Used for making sure the link highlights for all sub-routes even if it
+   * links to the first sub-route directly, e.g., for route tabs
+   */
+  activePrefix?: string
 }) => {
+  const { pathname } = useLocation()
   // 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`)
+  const onCreateFormForPath = pathname.startsWith(`${props.to}-new`)
+  const altActive = props.activePrefix && pathname.startsWith(props.activePrefix)
   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,
+              isActive || onCreateFormForPath || altActive,
             'pointer-events-none text-disabled': props.disabled,
           })
         }

app/layouts/SystemLayout.tsx

@@ -108,7 +108,7 @@ export function SystemLayout() {
           <NavLinkItem to={pb.systemUtilization()}>
             <Metrics16Icon /> Utilization
           </NavLinkItem>
-          <NavLinkItem to={pb.sledInventory()}>
+          <NavLinkItem to={pb.sledInventory()} activePrefix={pb.inventory()}>
             <Servers16Icon /> Inventory
           </NavLinkItem>
           <NavLinkItem to={pb.ipPools()}>