chapter hierarchy thingy working

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>