feat : update

components/admin/guide-section-nav.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import type { MouseEvent } from "react";
 
+import { GuideTopicIndicator } from "@/components/guide-topic-indicator";
 import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { navigationIconPath } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
@@ -19,9 +20,11 @@ const sections = [
 export function GuideSectionNav({
   characterKey,
   current,
+  guideId,
 }: {
   characterKey: string;
   current: "overview" | (typeof sections)[number]["slug"];
+  guideId: string;
 }) {
   const confirmNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
     const browserWindow = window as Window & { __guideHasUnsavedChanges?: boolean };
@@ -39,10 +42,11 @@ export function GuideSectionNav({
         prefetch
         onClick={confirmNavigation}
         className={cn(
-          "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          current === "overview" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          "relative isolate flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          current === "overview" ? "text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
         )}
       >
+        {current === "overview" ? <GuideTopicIndicator guideId={guideId} surface="admin" /> : null}
         <Image src={navigationIconPath("overview")!} alt="" width={20} height={20} className="size-5 object-contain" />
         Overview
       </Link>
@@ -55,10 +59,11 @@ export function GuideSectionNav({
             prefetch
             onClick={confirmNavigation}
             className={cn(
-              "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              current === section.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              "relative isolate flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              current === section.slug ? "text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
             )}
           >
+            {current === section.slug ? <GuideTopicIndicator guideId={guideId} surface="admin" /> : null}
             {iconPath ? <Image src={iconPath} alt="" width={20} height={20} className="size-5 object-contain" /> : null}
             {section.label}
           </Link>