Fix second level parent (no link / same link as child)

Author: callingmedic911

src/components/Navigation.tsx

@@ -10,25 +10,30 @@ import { NavIcon } from './NavIcon'
 import styles from './Navigation.module.css'
 
 function ItemLink({
+  className,
   item,
-  pathname,
   onLinkClick,
-  className,
+  parent,
+  pathname,
 }: {
+  className?: string
   item: NavigationItem
-  pathname: string
   onLinkClick?: React.MouseEventHandler<HTMLAnchorElement>
-  className?: string
+  parent?: NavigationItem
+  pathname: string
 }) {
+  const isSelected =
+    parent && item.href === parent.href
+      ? // This is for sub item with same link as parent (For example: Cypress of Test Runner)
+        pathname === parent.href
+      : // Rest of items
+        item.href && pathname.includes(item.href)
+
   return (
     <Link
       href={item.href || '#'}
       onClick={item.href ? onLinkClick : undefined}
-      className={clsx(
-        styles.item,
-        className,
-        item.href && pathname.includes(item.href) && styles.selected,
-      )}
+      className={clsx(styles.item, className, isSelected && styles.selected)}
     >
       <NavIcon
         icon={item.icon}
@@ -116,29 +121,11 @@ export function Navigation({
                                   >
                                     <ItemLink
                                       item={subItem}
+                                      parent={item}
                                       pathname={pathname}
                                       onLinkClick={onLinkClick}
                                     />
                                   </Disclosure.Button>
-                                  {subItem.links && (
-                                    <Disclosure.Panel as="ul">
-                                      {subItem.links.map((tertiary) => (
-                                        <li key={tertiary.title}>
-                                          <Disclosure.Button
-                                            className={`${styles.button} ${styles.tertiary}`}
-                                          >
-                                            <Link
-                                              href={tertiary.href}
-                                              onClick={onLinkClick}
-                                              className={clsx(styles.item)}
-                                            >
-                                              {tertiary.title}
-                                            </Link>
-                                          </Disclosure.Button>
-                                        </li>
-                                      ))}
-                                    </Disclosure.Panel>
-                                  )}
                                 </li>
                               ))}
                             </Disclosure.Panel>

src/lib/navigation.ts

@@ -8,8 +8,7 @@ export type NavigationItem = {
   title: string
 }
 
-
-export const navigation: NavigationItem[] = [ 
+export const navigation: NavigationItem[] = [
   {
     title: 'Intro to time travel',
     href: '/time-travel-intro',
@@ -149,7 +148,7 @@ export const navigation: NavigationItem[] = [
       { title: 'Overview', href: '/test-runners/overview', icon: 'overview' },
       {
         title: 'Cypress.io',
-        href: '',
+        href: '/test-runners/cypress-io',
         icon: 'cypress',
         links: [
           {
@@ -191,7 +190,7 @@ export const navigation: NavigationItem[] = [
       },
       {
         title: 'Playwright',
-        href: '',
+        href: '/test-runners/playwright/record-your-first-replay',
         icon: 'playwright',
         links: [
           {
@@ -202,7 +201,7 @@ export const navigation: NavigationItem[] = [
           {
             title: 'Debugging tests',
             href: '/test-runners/playwright/debugging-tests',
-            icon: 'debuggingtests'
+            icon: 'debuggingtests',
           },
           {
             title: 'GitHub actions',