File size: 1,886 Bytes
76fc93a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import type { Editor as TiptapEditor } from "@tiptap/core";
import { Sun, Moon, X } from "lucide-react";
import { TableOfContents } from "./TableOfContents";
interface Props {
open: boolean;
editor: TiptapEditor | null;
scrollContainer: HTMLElement | null;
autoCollapse: boolean;
theme: "light" | "dark";
onClose: () => void;
onToggleTheme: () => void;
}
/**
* Full-height drawer shown on narrow viewports when the user hits the
* hamburger button in the top bar. Hosts the table of contents and the
* theme toggle (there is no room for the desktop chrome at that width).
*/
export function MobileTocSidebar({
open,
editor,
scrollContainer,
autoCollapse,
theme,
onClose,
onToggleTheme,
}: Props) {
return (
<>
<div
className={`toc-mobile-backdrop${open ? " open" : ""}`}
onClick={onClose}
/>
<aside className={`toc-mobile-sidebar${open ? " open" : ""}`}>
<div className="toc-mobile-sidebar__header">
<span className="toc-mobile-sidebar__title">Contents</span>
<div className="toc-mobile-sidebar__actions">
<button
className="toc-mobile-sidebar__theme"
onClick={onToggleTheme}
aria-label="Toggle theme"
>
{theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
</button>
<button
className="toc-mobile-sidebar__close"
onClick={onClose}
aria-label="Close"
>
<X size={16} />
</button>
</div>
</div>
<div className="toc-mobile-sidebar__body">
<TableOfContents
editor={editor}
scrollContainer={scrollContainer}
autoCollapse={autoCollapse}
onNavigate={onClose}
/>
</div>
</aside>
</>
);
}
|