first commit

test/e2e/app-dir/navigation/app/nested-navigation/CategoryNav.js

@@ -0,0 +1,29 @@
+'use client'
+
+import { TabNavItem } from './TabNavItem'
+import { useSelectedLayoutSegments } from 'next/navigation'
+
+const CategoryNav = ({ categories }) => {
+  const selectedLayoutSegment = useSelectedLayoutSegments()
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <TabNavItem href="/nested-navigation" isActive={!selectedLayoutSegment}>
+        Home
+      </TabNavItem>
+
+      {categories.map((item) => (
+        <TabNavItem
+          key={item.slug}
+          href={`/nested-navigation/${item.slug}`}
+          isActive={item.slug === selectedLayoutSegment}
+          prefetch={item.prefetch}
+        >
+          {item.name}
+        </TabNavItem>
+      ))}
+    </div>
+  )
+}
+
+export default CategoryNav

test/e2e/app-dir/navigation/app/nested-navigation/TabNavItem.js

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+
+export const TabNavItem = ({ children, href, prefetch }) => {
+  return (
+    <Link
+      href={href}
+      style={{ margin: '10px', display: 'block' }}
+      prefetch={prefetch}
+    >
+      {children}
+    </Link>
+  )
+}

test/e2e/app-dir/navigation/app/nested-navigation/[categorySlug]/SubCategoryNav.js

@@ -0,0 +1,31 @@
+'use client'
+
+import { TabNavItem } from '../TabNavItem'
+import { useSelectedLayoutSegments } from 'next/navigation'
+
+const SubCategoryNav = ({ category }) => {
+  const selectedLayoutSegment = useSelectedLayoutSegments()
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <TabNavItem
+        href={`/nested-navigation/${category.slug}`}
+        isActive={!selectedLayoutSegment}
+      >
+        All
+      </TabNavItem>
+
+      {category.items.map((item) => (
+        <TabNavItem
+          key={item.slug}
+          href={`/nested-navigation/${category.slug}/${item.slug}`}
+          isActive={item.slug === selectedLayoutSegment}
+        >
+          {item.name}
+        </TabNavItem>
+      ))}
+    </div>
+  )
+}
+
+export default SubCategoryNav

test/e2e/app-dir/navigation/app/nested-navigation/[categorySlug]/[subCategorySlug]/page.js

@@ -0,0 +1,11 @@
+import { use } from 'react'
+import { fetchSubCategory } from '../../getCategories'
+
+export default function Page({ params }) {
+  const category = use(
+    fetchSubCategory(use(params).categorySlug, use(params).subCategorySlug)
+  )
+  if (!category) return null
+
+  return <h1 id={category.name.toLowerCase()}>{category.name}</h1>
+}

test/e2e/app-dir/navigation/app/nested-navigation/[categorySlug]/layout.js

@@ -0,0 +1,13 @@
+import { fetchCategoryBySlug } from '../getCategories'
+import SubCategoryNav from './SubCategoryNav'
+
+export default async function Layout({ children, params }) {
+  const category = await fetchCategoryBySlug((await params).categorySlug)
+  if (!category) return null
+  return (
+    <>
+      <SubCategoryNav category={category} />
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/navigation/app/nested-navigation/[categorySlug]/page.js

@@ -0,0 +1,8 @@
+import { fetchCategoryBySlug } from '../getCategories'
+
+export default async function Page({ params }) {
+  const category = await fetchCategoryBySlug((await params).categorySlug)
+  if (!category) return null
+
+  return <h1 id={`all-${category.name.toLowerCase()}`}>All {category.name}</h1>
+}

test/e2e/app-dir/navigation/app/nested-navigation/getCategories.js

@@ -0,0 +1,57 @@
+export const getCategories = () => [
+  {
+    name: 'Electronics',
+    slug: 'electronics',
+    count: 11,
+    items: [
+      { name: 'Phones', slug: 'phones', count: 4 },
+      { name: 'Tablets', slug: 'tablets', count: 5 },
+      { name: 'Laptops', slug: 'laptops', count: 2 },
+    ],
+  },
+  {
+    name: 'Clothing',
+    slug: 'clothing',
+    count: 12,
+    items: [
+      { name: 'Tops', slug: 'tops', count: 3 },
+      { name: 'Shorts', slug: 'shorts', count: 4 },
+      { name: 'Shoes', slug: 'shoes', count: 5 },
+    ],
+  },
+  {
+    name: 'Books',
+    slug: 'books',
+    count: 10,
+    items: [
+      { name: 'Fiction', slug: 'fiction', count: 5 },
+      { name: 'Biography', slug: 'biography', count: 2 },
+      { name: 'Education', slug: 'education', count: 3 },
+    ],
+  },
+  {
+    name: 'Shoes',
+    slug: 'shoes',
+    count: 5,
+    items: [],
+    prefetch: false,
+  },
+]
+
+export async function fetchCategoryBySlug(slug) {
+  // Assuming it always return expected categories
+  return getCategories().find((category) => category.slug === slug)
+}
+
+export async function fetchCategories() {
+  return getCategories()
+}
+
+async function findSubCategory(category, subCategorySlug) {
+  return category?.items.find((category) => category.slug === subCategorySlug)
+}
+
+export async function fetchSubCategory(categorySlug, subCategorySlug) {
+  const category = await fetchCategoryBySlug(categorySlug)
+  return findSubCategory(category, subCategorySlug)
+}

test/e2e/app-dir/navigation/app/nested-navigation/layout.js

@@ -0,0 +1,17 @@
+import { use } from 'react'
+import { fetchCategories } from './getCategories'
+import React from 'react'
+import CategoryNav from './CategoryNav'
+
+export default function Layout({ children }) {
+  const categories = use(fetchCategories())
+  return (
+    <div>
+      <div>
+        <CategoryNav categories={categories} />
+      </div>
+
+      <div>{children}</div>
+    </div>
+  )
+}

test/e2e/app-dir/navigation/app/nested-navigation/page.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Home</h1>
+}