Merge pull request #120 from replayio/aditya/fix-second-level-nagivation

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/components/PrevNextLinks.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import clsx from 'clsx'
 
-import { navigation } from '@/lib/navigation'
+import { NavigationItem, navigation } from '@/lib/navigation'
 
 function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
@@ -50,12 +50,32 @@ function PageLink({
   )
 }
 
+function flattenNavigation(navigation: NavigationItem[]): NavigationItem[] {
+  const seen = new Set<string>()
+  const flatList: NavigationItem[] = []
+
+  function processItem(item: NavigationItem) {
+    if (!seen.has(item.href)) {
+      seen.add(item.href)
+      flatList.push({ ...item, links: undefined })
+    }
+
+    if (item.links) {
+      item.links.forEach(processItem)
+    }
+  }
+  navigation.forEach(processItem)
+
+  return flatList
+}
+
+const allLinks = flattenNavigation(navigation)
 export function PrevNextLinks() {
-  let pathname = usePathname()
-  let allLinks = navigation.flatMap((section) => section.links ?? [])
-  let linkIndex = allLinks.findIndex((link) => link.href === pathname)
-  let previousPage = linkIndex > -1 ? allLinks[linkIndex - 1] : null
-  let nextPage = linkIndex > -1 ? allLinks[linkIndex + 1] : null
+  const pathname = usePathname()
+
+  const linkIndex = allLinks.findIndex((link) => link.href === pathname)
+  const previousPage = linkIndex > -1 ? allLinks[linkIndex - 1] : null
+  const nextPage = linkIndex > -1 ? allLinks[linkIndex + 1] : null
 
   if (!nextPage && !previousPage) {
     return null

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',
@@ -336,7 +335,7 @@ export const navigation: NavigationItem[] = [
     links: [
       {
         title: 'Replay APIs',
-        href: '',
+        href: '/integrations/replay-apis/graphql-api',
         icon: 'replayapis',
         links: [
           {
@@ -358,7 +357,7 @@ export const navigation: NavigationItem[] = [
       },
       {
         title: 'Frameworks & libraries',
-        href: '',
+        href: '/integrations/frameworks-libraries/nextjs',
         icon: 'frameworks',
         links: [
           {
@@ -370,7 +369,7 @@ export const navigation: NavigationItem[] = [
       },
       {
         title: '3rd Party integrations',
-        href: '',
+        href: '/integrations/3rd-party-integrations/github-embeds',
         icon: 'integrations',
         links: [
           {