diff options
| -rw-r--r-- | components/chapters.tsx | 31 | ||||
| -rw-r--r-- | components/navbar.tsx | 19 | ||||
| -rw-r--r-- | styles/navbar.css | 10 |
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; } |