-
-
-
- {t('aria.interactive-editor-desc')}
-
+
+ {props.hasContentOutline && (
+
+ )}
+
+
+ {props.hasInteractiveEditor && (
+
+
+
+ {t('aria.interactive-editor-desc')}
+
+
+ )}
diff --git a/client/src/templates/Challenges/generic/content-outline.css b/client/src/templates/Challenges/generic/content-outline.css
new file mode 100644
index 00000000000..7e692039ec0
--- /dev/null
+++ b/client/src/templates/Challenges/generic/content-outline.css
@@ -0,0 +1,112 @@
+.content-layout-fluid {
+ padding-inline: 0 !important;
+}
+
+.content-layout-container {
+ padding-inline: 0;
+ width: 100%;
+}
+
+/* Two-column flex row containing the sidebar and the main content */
+.content-layout-row {
+ align-items: flex-start;
+ display: flex;
+}
+
+.content-main-column {
+ flex: 1 1 auto;
+ margin-inline: auto;
+ max-width: calc(100% - 16rem);
+ min-width: 0;
+ /* Compensate row negative gutters used inside challengeBody. */
+ padding-inline: 15px;
+}
+
+.content-sidebar-column {
+ display: flex;
+ flex-direction: column;
+ flex: 0 0 16rem;
+ gap: 0.75rem;
+}
+
+.content-outline-panel {
+ height: calc(
+ 100vh - var(--header-height) - var(--breadcrumbs-height) -
+ var(--action-row-height)
+ );
+}
+
+.content-outline-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.content-outline-item {
+ margin-bottom: 0.35rem;
+}
+
+.content-outline-item-level-2 {
+ padding-inline-start: 0.85rem;
+}
+
+.content-outline-item-level-3 {
+ padding-inline-start: 1.5rem;
+}
+
+.content-outline-link {
+ color: var(--primary-color);
+ cursor: pointer;
+ display: block;
+ font-weight: 600;
+ padding: 0.2rem 0.45rem 0.2rem 1rem;
+ text-decoration: none;
+}
+
+.content-outline-link:hover,
+.content-outline-link:focus {
+ background-color: var(--tertiary-background);
+ text-decoration: none;
+}
+
+.content-outline-link.active {
+ background-color: var(--tertiary-background);
+ box-shadow: inset 3px 0 0 0 var(--highlight-color);
+}
+
+@media (min-width: 992px) {
+ .content-sidebar-column {
+ align-self: flex-start;
+ position: sticky;
+ top: calc(
+ var(--header-height) + var(--breadcrumbs-height) +
+ var(--action-row-height)
+ );
+ }
+}
+
+@media (max-width: 991px) {
+ .content-sidebar-column {
+ flex: 0 0 0;
+ overflow: visible;
+ }
+
+ .content-main-column {
+ max-width: 100%;
+ }
+
+ .content-outline-panel {
+ height: calc(
+ 100vh - var(--header-height) - var(--breadcrumbs-height) -
+ var(--action-row-height)
+ );
+ left: 0;
+ position: fixed;
+ top: calc(
+ var(--header-height) + var(--breadcrumbs-height) +
+ var(--action-row-height)
+ );
+ width: 100vw;
+ z-index: 200;
+ }
+}
diff --git a/client/src/templates/Challenges/generic/content-outline.test.tsx b/client/src/templates/Challenges/generic/content-outline.test.tsx
new file mode 100644
index 00000000000..0ce900d6949
--- /dev/null
+++ b/client/src/templates/Challenges/generic/content-outline.test.tsx
@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import { describe, expect, test } from 'vitest';
+
+import {
+ buildContentOutlineItems,
+ createAnchorId,
+ contentHeadingSelector
+} from './content-outline';
+
+describe('content-outline', () => {
+ test('createAnchorId should normalize heading text', () => {
+ expect(createAnchorId(' HTML Basics! ')).toBe('html-basics');
+ expect(createAnchorId('A11y & SEO')).toBe('a11y-seo');
+ });
+
+ test('buildContentOutlineItems should include h2/h3 headings and assign ids', () => {
+ const root = document.createElement('div');
+ root.innerHTML = `
+
HTML Basics
+
Semantic Elements
+
HTML Basics
+
With Existing Id
+
+ `;
+
+ const headingElements = Array.from(
+ root.querySelectorAll
(contentHeadingSelector)
+ );
+
+ const items = buildContentOutlineItems(headingElements);
+
+ expect(items).toEqual([
+ { id: 'html-basics', level: 2, text: 'HTML Basics' },
+ { id: 'semantic-elements', level: 3, text: 'Semantic Elements' },
+ { id: 'html-basics-2', level: 2, text: 'HTML Basics' },
+ { id: 'existing-id', level: 3, text: 'With Existing Id' }
+ ]);
+
+ expect(headingElements[0]?.id).toBe('html-basics');
+ expect(headingElements[1]?.id).toBe('semantic-elements');
+ expect(headingElements[2]?.id).toBe('html-basics-2');
+ expect(headingElements[3]?.id).toBe('existing-id');
+ });
+
+ test('buildContentOutlineItems should ignore headings outside h2/h3', () => {
+ const root = document.createElement('div');
+ root.innerHTML = `
+ Page Title
+ Section One
+ Ignored Subsection
+ Section One Details
+ `;
+
+ const headingElements = Array.from(
+ root.querySelectorAll(contentHeadingSelector)
+ );
+ const items = buildContentOutlineItems(headingElements);
+
+ expect(items).toEqual([
+ { id: 'section-one', level: 2, text: 'Section One' },
+ { id: 'section-one-details', level: 3, text: 'Section One Details' }
+ ]);
+ });
+});
diff --git a/client/src/templates/Challenges/generic/content-outline.tsx b/client/src/templates/Challenges/generic/content-outline.tsx
new file mode 100644
index 00000000000..5671e85027c
--- /dev/null
+++ b/client/src/templates/Challenges/generic/content-outline.tsx
@@ -0,0 +1,172 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import { Link as ScrollLink, scroller } from 'react-scroll';
+
+import { ChallengeNode } from '../../../redux/prop-types';
+import SidebarPanel, {
+ useActiveHeading,
+ useStickyScrollOffset
+} from '../../../components/sidebar-panel';
+import { MAX_MOBILE_WIDTH } from '../../../../config/misc';
+
+import './content-outline.css';
+
+export interface ContentOutlineItem {
+ id: string;
+ level: 1 | 2 | 3;
+ text: string;
+}
+
+export const contentHeadingSelector = 'h2, h3';
+
+export const createAnchorId = (value: string): string =>
+ value
+ .trim()
+ .toLowerCase()
+ .replace(/[^a-z0-9\s-]/g, '')
+ .replace(/\s+/g, '-');
+
+export const buildContentOutlineItems = (
+ headingElements: HTMLHeadingElement[]
+): ContentOutlineItem[] => {
+ const idCounts = new Map();
+
+ return headingElements
+ .map((heading, index) => {
+ const text = heading.textContent?.trim() ?? '';
+ if (!text) {
+ return null;
+ }
+
+ const baseId = heading.id || createAnchorId(text);
+ const normalizedBaseId = baseId || `content-section-${index + 1}`;
+ const count = (idCounts.get(normalizedBaseId) ?? 0) + 1;
+ idCounts.set(normalizedBaseId, count);
+ const id = count > 1 ? `${normalizedBaseId}-${count}` : normalizedBaseId;
+
+ if (heading.id !== id) {
+ heading.id = id;
+ }
+
+ return {
+ id,
+ level: heading.tagName === 'H3' ? 3 : 2,
+ text
+ };
+ })
+ .filter((item): item is ContentOutlineItem => item !== null);
+};
+
+type ContentOutlineProps = {
+ description?: string;
+ instructions?: string;
+ nodules?: ChallengeNode['challenge']['nodules'];
+ showInteractiveEditor: boolean;
+ showOutline: boolean;
+ onClose?: () => void;
+ children: React.ReactNode;
+};
+
+function ContentOutline({
+ description,
+ instructions,
+ nodules,
+ showInteractiveEditor,
+ showOutline: showContentOutline,
+ onClose,
+ children
+}: ContentOutlineProps) {
+ const isMobileSidebar = useMediaQuery({ maxWidth: MAX_MOBILE_WIDTH });
+ const [contentOutlineItems, setContentOutlineItems] = useState<
+ ContentOutlineItem[]
+ >([]);
+ const contentRef = useRef(null);
+
+ const contentScrollOffset = useStickyScrollOffset(
+ ['--header-height', '--breadcrumbs-height', '--action-row-height'],
+ 8
+ );
+
+ const activeHeadingId = useActiveHeading(
+ showContentOutline ? contentOutlineItems.map(item => item.id) : [],
+ contentScrollOffset
+ );
+
+ const handleItemClick = React.useCallback(
+ (id: string) => {
+ scroller.scrollTo(id, {
+ duration: 0,
+ smooth: false,
+ offset: contentScrollOffset
+ });
+ if (isMobileSidebar) {
+ onClose?.();
+ }
+ },
+ [contentScrollOffset, isMobileSidebar, onClose]
+ );
+
+ useEffect(() => {
+ if (!contentRef.current) {
+ setContentOutlineItems([]);
+ return;
+ }
+
+ const headingElements = Array.from(
+ contentRef.current.querySelectorAll(
+ contentHeadingSelector
+ )
+ );
+ const nextOutlineItems = buildContentOutlineItems(headingElements);
+
+ setContentOutlineItems(nextOutlineItems);
+ }, [
+ description,
+ instructions,
+ nodules,
+ showInteractiveEditor,
+ showContentOutline
+ ]);
+
+ return (
+
+
+ {showContentOutline && (
+
+
+
+
+
+ )}
+
+
+
{t('learn.answered-mcq')}
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+
return (
-
- {hasInteractiveEditor && (
-
+ {actionRowProps && }
+
+ {isReviewChallenge ? (
+
+ showOutline={showContentOutline}
+ onClose={() => setShowContentOutline(false)}
+ >
+ {challengeBody}
+
+ ) : (
+
+ {challengeBody}
+
)}
-
-
-
-
-
- {title}
-
-
-
-
- {description && (
-
-
-
-
- )}
-
- {nodules?.map((nodule, i) => {
- return (
-
- {renderNodule(nodule, showInteractiveEditor)}
-
- );
- })}
-
-
- {videoId && (
- <>
-
-
-
- )}
-
-
- {scene && }
-
-
- {transcript && }
-
- {instructions && (
- <>
-
-
-
- )}
-
- {assignments.length > 0 && (
-
-
-
- )}
-
- {questions.length > 0 && (
-
-
-
- )}
-
- {explanation ? (
-
- ) : null}
-
- {!hasAnsweredMcqCorrectly && (
- {t('learn.answered-mcq')}
- )}
-
-
-
-
-
-
-
-
-
-
-
diff --git a/e2e/content-outline.spec.ts b/e2e/content-outline.spec.ts
new file mode 100644
index 00000000000..6e9f4c44c61
--- /dev/null
+++ b/e2e/content-outline.spec.ts
@@ -0,0 +1,100 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Content outline - Desktop', () => {
+ test.skip(({ isMobile }) => isMobile, 'Only test on desktop');
+
+ test('shows section headings without a top menu header item', async ({
+ page
+ }) => {
+ await page.goto(
+ '/learn/responsive-web-design-v9/review-semantic-html/review-semantic-html'
+ );
+
+ await expect(
+ page.getByRole('heading', { name: 'Semantic HTML Review' })
+ ).toBeVisible();
+
+ const toggleButton = page.getByRole('button', { name: 'Outline' });
+ await toggleButton.click();
+ await expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+
+ const outlinePanel = page.getByRole('navigation', {
+ name: 'Content outline'
+ });
+ await expect(outlinePanel).toBeVisible();
+
+ const outlineItems = outlinePanel.getByRole('listitem');
+ expect(await outlineItems.count()).toBeGreaterThan(0);
+
+ await expect(
+ outlinePanel.getByRole('link', { name: 'Semantic HTML Review' })
+ ).toHaveCount(0);
+ });
+
+ test('keeps active nav item in view while scrolling', async ({ page }) => {
+ await page.goto(
+ '/learn/responsive-web-design-v9/review-semantic-html/review-semantic-html'
+ );
+
+ await page.getByRole('button', { name: 'Outline' }).click();
+
+ const outlinePanel = page.getByRole('navigation', {
+ name: 'Content outline'
+ });
+ await expect(outlinePanel).toBeVisible();
+
+ const firstOutlineLink = outlinePanel.locator('a').first();
+ await firstOutlineLink.click();
+ await expect(firstOutlineLink).toHaveClass(/active/);
+
+ await page.evaluate(() => {
+ window.scrollTo({
+ top: document.body.scrollHeight,
+ behavior: 'auto'
+ });
+ });
+
+ const activeLink = outlinePanel
+ .locator('.content-outline-link.active')
+ .first();
+ await expect(activeLink).toBeVisible();
+
+ const inView = await activeLink.evaluate(item => {
+ const panel = item.closest('nav');
+ if (!panel) return false;
+
+ const panelRect = panel.getBoundingClientRect();
+ const itemRect = item.getBoundingClientRect();
+ return (
+ itemRect.top >= panelRect.top && itemRect.bottom <= panelRect.bottom
+ );
+ });
+
+ expect(inView).toBe(true);
+ });
+});
+
+test.describe('Content outline - Mobile', () => {
+ test.skip(({ isMobile }) => !isMobile, 'Only test on mobile');
+
+ test('sidebar closes on mobile when an item is clicked', async ({ page }) => {
+ await page.goto(
+ '/learn/responsive-web-design-v9/review-semantic-html/review-semantic-html'
+ );
+
+ const toggleButton = page.getByRole('button', { name: 'Outline' });
+ await toggleButton.click();
+ await expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+
+ const outlinePanel = page.getByRole('navigation', {
+ name: 'Content outline'
+ });
+ await expect(outlinePanel).toBeVisible();
+
+ const firstLink = outlinePanel.locator('a').first();
+ await firstLink.click();
+
+ // panel should hide after click
+ await expect(outlinePanel).toBeHidden();
+ });
+});