more chapter hierarchy but better

3 files changed, 45 insertions, 15 deletions

diff --git a/components/chapters.tsx b/components/chapters.tsx
index 73c1630..e90f91c 100644
--- a/components/chapters.tsx
+++ b/components/chapters.tsx
@@ -1,3 +1,5 @@
+import { ReactNode, useState } from 'react';
+
 import { NavbarItem } from '../components/navbar';
 
 import RemoveRoundedIcon from '@material-ui/icons/RemoveRounded';
@@ -10,16 +12,37 @@ interface chapter {
 	children?: Array<chapter>;
 }
 
+function NavbarChapter(props: {
+	level: number;
+	chapter: chapter;
+	children?: ReactNode;
+}) {
+	var [ collapsed, setCollapsed ] = useState(true);
+
+	var icon = props.chapter.children?.length > 0 ?
+		collapsed ? <KeyboardArrowDownRoundedIcon/> : <KeyboardArrowRightRoundedIcon/> :
+		<RemoveRoundedIcon/>
+
+	var classes: Array<string> = [];
+	classes.push("chapter")
+	classes.push(`indentLevel${props.level}`)
+
+	return <NavbarItem icon={icon} classList={classes} title={props.chapter.name} style={{
+		marginLeft: 12 * props.level
+	}}>
+		{props.children}
+	</NavbarItem>
+}
+
 class Chapter {
 	constructor(public chapters: Array<chapter>, public level: number) {}
 	render() {
-		console.log(this)
-		return <div>
+		return <div className="chapterChildren">
 			{
 				this.chapters?.map(chapter => {
-					return <NavbarItem icon={<RemoveRoundedIcon/>} chapterIndent={this.level} title={chapter.name}>
+					return <NavbarChapter level={this.level} chapter={chapter}>
 						{ new Chapter(chapter.children, this.level + 1).render() }
-					</NavbarItem>
+					</NavbarChapter>
 				})
 			}
 		</div>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 9286120..318d673 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
 import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
 import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
@@ -8,18 +8,15 @@ export function NavbarItem(props: {
 	title: string;
 	href?: string;
 	active?: boolean;
-	chapterIndent?: number;
 	children?: ReactNode;
+	classList?: Array<string>;
+	style?: CSSProperties;
 }) {
-	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
-		}}>
+	var classes = props.classList || [];
+	classes.push("navbarItem");
+	props.active && classes.push("active");
+	return <a href={props.href} className={classes.join(" ")}>
+		<div className="inner" style={props.style}>
 			{props.icon}
 			<span>{props.title}</span>
 		</div>
diff --git a/styles/navbar.css b/styles/navbar.css
index 456c2c3..97986e9 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -46,6 +46,16 @@
 	margin-top: 1px;
 }
 
+.navbarItem.chapter .chapterChildren {
+	transition-property: height;
+	transition-duration: .3s;
+
+	overflow: hidden;
+}
+.navbarItem.chapter .chapterChildren.collapsed {
+	height: 0;
+}
+
 .navbarItem .inner {
 	height: 24px;
 }