foldable chapters :tada:

2 files changed, 29 insertions, 14 deletions

diff --git a/components/chapters.tsx b/components/chapters.tsx
index e90f91c..27116ee 100644
--- a/components/chapters.tsx
+++ b/components/chapters.tsx
@@ -1,9 +1,8 @@
-import { ReactNode, useState } from 'react';
+import { ReactNode, useState, CSSProperties } from 'react';
 
 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 {
@@ -19,17 +18,30 @@ function NavbarChapter(props: {
 }) {
 	var [ collapsed, setCollapsed ] = useState(true);
 
-	var icon = props.chapter.children?.length > 0 ?
-		collapsed ? <KeyboardArrowDownRoundedIcon/> : <KeyboardArrowRightRoundedIcon/> :
-		<RemoveRoundedIcon/>
+	var icon = <div className={ "collapseIcon" + (collapsed ? "" : " collapsed") }>
+		{
+			props.chapter.children?.length > 0 ?
+				<KeyboardArrowDownRoundedIcon/> :
+				<RemoveRoundedIcon/>
+		}
+	</div>
 
-	var classes: Array<string> = [];
-	classes.push("chapter")
-	classes.push(`indentLevel${props.level}`)
+	var classes = [
+		"chapter",
+		`indentLevel${props.level}`
+	]
+	!collapsed && classes.push("childrenCollapsed");
 
-	return <NavbarItem icon={icon} classList={classes} title={props.chapter.name} style={{
-		marginLeft: 12 * props.level
-	}}>
+	var outercss = /* { "--children-height": 0 + "px" } */ {} as CSSProperties;
+
+	return <NavbarItem
+	icon={icon}
+	classList={classes}
+	title={props.chapter.name}
+	onIconClick={() => props.chapter.children?.length > 0 && setCollapsed(!collapsed)}
+	style={{
+		marginLeft: 12 * props.level,
+	}} outerStyle={outercss}>
 		{props.children}
 	</NavbarItem>
 }
diff --git a/components/navbar.tsx b/components/navbar.tsx
index cbbd164..9183b3b 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -11,14 +11,17 @@ export function NavbarItem(props: {
 	children?: ReactNode;
 	classList?: Array<string>;
 	style?: CSSProperties;
+	outerStyle?: CSSProperties;
+	onIconClick?: () => void;
+	onClick?: () => void;
 }) {
 	var classes = props.classList || [];
 	classes.push("navbarItem");
 	props.active && classes.push("active");
-	return <a href={props.href} className={classes.join(" ")}>
+	return <a href={props.href} className={classes.join(" ")} style={props.outerStyle}>
 		<div className="inner" style={props.style}>
-			{props.icon}
-			<span>{props.title}</span>
+			<div className="icon" onClick={props.onIconClick}>{props.icon}</div>
+			<span className="title" onClick={props.onClick}>{props.title}</span>
 		</div>
 		{props.children}
 	</a>