fix(navigation) : restore overview top navigation

components/public/structured-guide.tsx

@@ -114,51 +114,54 @@ export function StructuredGuideShell({
             </p>
           </div>
         </div>
-        {section ? (
+        <ScrollableNav
-          <ScrollableNav
+          ariaLabel={`เมนูคู่มือ ${guide.name}`}
-            ariaLabel={`เมนูคู่มือ ${guide.name}`}
+          className="mx-auto min-h-11 w-full max-w-7xl rounded-xl border bg-card p-2"
-            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}`}
+              key={item.id}
-              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"
+              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
+              {navigationIconPath(item.slug) ? (
-                src={navigationIconPath("overview")!}
+                <Image
-                alt=""
+                  src={navigationIconPath(item.slug)!}
-                width={20}
+                  alt=""
-                height={20}
+                  width={20}
-                className="size-5 object-contain"
+                  height={20}
-              />
+                  className="size-5 object-contain"
-              Overview
+                />
+              ) : null}
+              {item.title}
             </Link>
-            {sections.map((item) => (
+          ))}
-              <Link
+        </ScrollableNav>
-                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}
       </div>
       <main className="mx-auto w-full max-w-7xl p-4 sm:p-6 lg:p-10">
         {section ? (