diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/chapters.tsx | 33 | ||||
| -rw-r--r-- | components/navbar.tsx | 22 |
2 files changed, 49 insertions, 6 deletions
diff --git a/components/chapters.tsx b/components/chapters.tsx new file mode 100644 index 0000000..73c1630 --- /dev/null +++ b/components/chapters.tsx @@ -0,0 +1,33 @@ +import { NavbarItem } from '../components/navbar'; + +import RemoveRoundedIcon from '@material-ui/icons/RemoveRounded'; +import KeyboardArrowRightRoundedIcon from '@material-ui/icons/KeyboardArrowRightRounded'; +import KeyboardArrowDownRoundedIcon from '@material-ui/icons/KeyboardArrowDownRounded'; + +interface chapter { + name: string; + sectionLink?: string; + children?: Array<chapter>; +} + +class Chapter { + constructor(public chapters: Array<chapter>, public level: number) {} + render() { + console.log(this) + return <div> + { + this.chapters?.map(chapter => { + return <NavbarItem icon={<RemoveRoundedIcon/>} chapterIndent={this.level} title={chapter.name}> + { new Chapter(chapter.children, this.level + 1).render() } + </NavbarItem> + }) + } + </div> + } +} + +export default function Chapters(props: { + chapters: Array<chapter>; +}) { + return new Chapter(props.chapters, 0).render(); +} diff --git a/components/navbar.tsx b/components/navbar.tsx index bdadfbc..9286120 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -3,24 +3,34 @@ import { ReactNode } from 'react'; import HomeRoundedIcon from '@material-ui/icons/HomeRounded'; import SearchRoundedIcon from '@material-ui/icons/SearchRounded'; -function NavbarItem(props: { +export function NavbarItem(props: { icon?: ReactNode; title: string; - href: string; - active: boolean; + href?: string; + active?: boolean; + chapterIndent?: number; + children?: ReactNode; }) { - return <a href={props.href} className={ "navbarItem" + (props.active ? " active" : "") }> - <div> + return <a href={props.href} className={ + "navbarItem" + + (props.active ? " active" : "") + + (typeof props.chapterIndent !== "undefined" ? " chapter" : "") + + " indentLevel" + (props.chapterIndent || 0) + }> + <div className="inner" style={{ + marginLeft: 12 * props.chapterIndent || 0 + }}> {props.icon} <span>{props.title}</span> </div> + {props.children} </a> } export default function Navbar(props: { page?: string; }) { - return <div> + return <div style={{ marginBottom: 24 }}> <NavbarItem active={props.page == "home"} icon={<HomeRoundedIcon/>} title="Home" href="/"/> <NavbarItem active={props.page == "search"} icon={<SearchRoundedIcon/>} title="Search for posts" href="/search"/> </div> |