wip

src/components/Course/Chapter.tsx

@@ -11,10 +11,19 @@ type ChapterProps = ChapterFileType & {
   index: number;
   isActive?: boolean;
   isCompleted?: boolean;
+
+  onChapterClick?: () => void;
 };
 
 export function Chapter(props: ChapterProps) {
-  const { index, frontmatter, lessons, exercises, isActive = false } = props;
+  const {
+    index,
+    frontmatter,
+    lessons,
+    exercises,
+    isActive = false,
+    onChapterClick,
+  } = props;
   const { title } = frontmatter;
 
   return (
@@ -24,6 +33,7 @@ export function Chapter(props: ChapterProps) {
           'flex w-full items-center gap-2 border-b border-zinc-800 p-2 text-sm',
           isActive && 'bg-zinc-300 text-zinc-900',
         )}
+        onClick={onChapterClick}
       >
         <div className="flex size-5 items-center justify-center rounded-full bg-zinc-700 text-xs text-white">
           {index}

src/components/Course/CourseSidebar.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { ChapterFileType } from '../../lib/course';
 import { Chapter } from './Chapter';
 
@@ -11,6 +12,8 @@ export type CourseSidebarProps = {
 export function CourseSidebar(props: CourseSidebarProps) {
   const { title, chapters, completedPercentage } = props;
 
+  const [activeChapterId, setActiveChapterId] = useState('');
+
   return (
     <aside className="border-r border-zinc-800">
       <div className="border-b border-zinc-800 p-4">
@@ -24,14 +27,25 @@ export function CourseSidebar(props: CourseSidebarProps) {
 
       <div className="relative h-full">
         <div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]">
-          {chapters.map((chapter, index) => (
+          {chapters.map((chapter, index) => {
+            const isActive = activeChapterId === chapter.id;
+
+            return (
               <Chapter
                 key={chapter.id}
-              isActive={index === 0}
+                isActive={isActive}
+                onChapterClick={() => {
+                  if (isActive) {
+                    setActiveChapterId('');
+                  } else {
+                    setActiveChapterId(chapter.id);
+                  }
+                }}
                 index={index + 1}
                 {...chapter}
               />
-          ))}
+            );
+          })}
         </div>
       </div>
     </aside>