e98f43193e
- "frontend/src/components/ReadingHeader.tsx" - "frontend/src/components/TableOfContents.tsx" - "frontend/src/pages/TechniquePage.tsx" - "frontend/src/App.css" GSD-Task: S05/T01
34 lines
1 KiB
TypeScript
34 lines
1 KiB
TypeScript
/**
|
|
* Sticky reading header that appears when the article H1 scrolls out of view.
|
|
*
|
|
* Shows the article title and current section name in a thin fixed bar
|
|
* at the top of the viewport. Uses CSS transform for slide-in/out animation.
|
|
*/
|
|
|
|
interface ReadingHeaderProps {
|
|
/** Article title */
|
|
title: string;
|
|
/** Currently active section heading (from scroll-spy) */
|
|
currentSection: string;
|
|
/** Whether the header should be visible (H1 is out of viewport) */
|
|
visible: boolean;
|
|
}
|
|
|
|
export default function ReadingHeader({ title, currentSection, visible }: ReadingHeaderProps) {
|
|
return (
|
|
<div
|
|
className={`reading-header${visible ? " reading-header--visible" : ""}`}
|
|
aria-hidden={!visible}
|
|
>
|
|
<div className="reading-header__inner">
|
|
<span className="reading-header__title">{title}</span>
|
|
{currentSection && (
|
|
<>
|
|
<span className="reading-header__separator">·</span>
|
|
<span className="reading-header__section">{currentSection}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|