From fee0469e1265122eafcdae6cd92c8c9e1b250826 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 27 Mar 2021 09:52:07 +0100
Subject: foldable chapters :tada:

---
 components/chapters.tsx | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

(limited to 'components/chapters.tsx')

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>
 }
-- 
cgit v1.2.3