ENGLISH·COURSE API
    Preparing search index...

    Function

    Outline

    • The Course outline sidebar. Renders the course's modules and lessons in sequence order with the current lesson indicated. The component itself does not own the responsive shell — the page chooses where the outline sits (sidebar on desktop, drawer on mobile).

      Parameters

      • showHeading: {
            course: {
                id: string & $brand<"CourseId">;
                slug: string & $brand<"Slug">;
                title: string;
                description: string;
                language: string;
                lessonCount: number;
                moduleCount: number;
                sequence: number;
                track: "level" | "reference";
                outcomes?: string[];
                audience?: string;
                highlights?: string[];
                sounds?: { vowels: string[]; consonants: string[] };
                translations?: Record<
                    string,
                    {
                        description?: string;
                        outcomes?: string[];
                        audience?: string;
                        highlights?: string[];
                    },
                >;
            };
            modules: {
                id: string & $brand<"ModuleId">;
                courseId: string & $brand<"CourseId">;
                slug: string & $brand<"Slug">;
                title: string;
                sequence: number;
            }[];
            lessonsByModuleId: Map<
                string,
                (
                    | {
                        kind: "reading";
                        id: string & $brand<"LessonId">;
                        courseId: string & $brand<"CourseId">;
                        moduleId: string & $brand<"ModuleId">;
                        sequence: number;
                        title: string;
                        body: string;
                    }
                    | {
                        kind: "video";
                        id: string & $brand<"LessonId">;
                        courseId: string & $brand<"CourseId">;
                        moduleId: string & $brand<"ModuleId">;
                        sequence: number;
                        title: string;
                        description: string;
                        source: string;
                        durationSeconds: number;
                        poster?: string;
                        uploadDate?: string;
                    }
                )[],
            >;
            currentLessonId: string & $brand<"LessonId">;
            showHeading?: boolean;
        }

        Whether to render the visible heading; false when the shell provides one

      Returns Element

      The heading is pinned to the top of whatever scroll region the shell puts the outline in. Both shells bound their height and scroll the current lesson into view, which on a long course would carry the heading out of sight and leave the sidebar visually unlabelled. Pinning costs nothing when there is no scroll region — sticky is inert without one.

      A shell whose own control already says "Course outline" — the mobile drawer's <summary> — passes showHeading={false} so the words do not appear twice. The <nav> keeps its aria-label either way, so the region never loses its accessible name.

      The heading's height is published as --outline-heading-offset so the module titles below can pin themselves just under it. Keeping the value here means the heading that causes the offset also owns it; when the heading is not rendered the offset is zero.

    Settings

    Member Visibility