fix(navigation) : restore overview top navigation

2026-09-03 12:20:32 +07:00
parent cfc6f0c146
commit c0ab204d06
1 changed files with 43 additions and 40 deletions
@@ -114,51 +114,54 @@ export function StructuredGuideShell({
            </p>
          </div>
        </div>
-        {section ? (
-          <ScrollableNav
-            ariaLabel={`เมนูคู่มือ ${guide.name}`}
-            className="mx-auto min-h-11 w-full max-w-7xl rounded-xl border bg-card p-2"
+        <ScrollableNav
+          ariaLabel={`เมนูคู่มือ ${guide.name}`}
+          className="mx-auto min-h-11 w-full max-w-7xl rounded-xl border bg-card p-2"
+        >
+          <Link
+            href={`/${guide.slug}`}
+            className={cn(
+              "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              !section
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+            prefetch
          >
+            <Image
+              src={navigationIconPath("overview")!}
+              alt=""
+              width={20}
+              height={20}
+              className="size-5 object-contain"
+            />
+            Overview
+          </Link>
+          {sections.map((item) => (
            <Link
-              href={`/${guide.slug}`}
-              className="flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              key={item.id}
+              href={`/${guide.slug}/${item.slug}`}
+              className={cn(
+                "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                section === item.slug
+                  ? "bg-muted text-foreground"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
              prefetch
            >
-              <Image
-                src={navigationIconPath("overview")!}
-                alt=""
-                width={20}
-                height={20}
-                className="size-5 object-contain"
-              />
-              Overview
+              {navigationIconPath(item.slug) ? (
+                <Image
+                  src={navigationIconPath(item.slug)!}
+                  alt=""
+                  width={20}
+                  height={20}
+                  className="size-5 object-contain"
+                />
+              ) : null}
+              {item.title}
            </Link>
-            {sections.map((item) => (
-              <Link
-                key={item.id}
-                href={`/${guide.slug}/${item.slug}`}
-                className={cn(
-                  "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  section === item.slug
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                )}
-                prefetch
-              >
-                {navigationIconPath(item.slug) ? (
-                  <Image
-                    src={navigationIconPath(item.slug)!}
-                    alt=""
-                    width={20}
-                    height={20}
-                    className="size-5 object-contain"
-                  />
-                ) : null}
-                {item.title}
-              </Link>
-            ))}
-          </ScrollableNav>
-        ) : null}
+          ))}
+        </ScrollableNav>
      </div>
      <main className="mx-auto w-full max-w-7xl p-4 sm:p-6 lg:p-10">
        {section ? (