aboutsummaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/chapters.tsx34
-rw-r--r--components/navbar.tsx9
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>