chapter hierarchy thingy working

6 files changed, 132 insertions, 39 deletions

diff --git a/components/chapters.tsx b/components/chapters.tsx
new file mode 100644
index 0000000..73c1630
--- /dev/null
+++ b/components/chapters.tsx
@@ -0,0 +1,33 @@
+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 {
+	name: string;
+	sectionLink?: string;
+	children?: Array<chapter>;
+}
+
+class Chapter {
+	constructor(public chapters: Array<chapter>, public level: number) {}
+	render() {
+		console.log(this)
+		return <div>
+			{
+				this.chapters?.map(chapter => {
+					return <NavbarItem icon={<RemoveRoundedIcon/>} chapterIndent={this.level} title={chapter.name}>
+						{ new Chapter(chapter.children, this.level + 1).render() }
+					</NavbarItem>
+				})
+			}
+		</div>
+	}
+}
+
+export default function Chapters(props: {
+	chapters: Array<chapter>;
+}) {
+	return new Chapter(props.chapters, 0).render();
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
index bdadfbc..9286120 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -3,24 +3,34 @@ import { ReactNode } from 'react';
 import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
 import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
 
-function NavbarItem(props: {
+export function NavbarItem(props: {
 	icon?: ReactNode;
 	title: string;
-	href: string;
-	active: boolean;
+	href?: string;
+	active?: boolean;
+	chapterIndent?: number;
+	children?: ReactNode;
 }) {
-	return <a href={props.href} className={ "navbarItem" + (props.active ? " active" : "") }>
-		<div>
+	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
+		}}>
 			{props.icon}
 			<span>{props.title}</span>
 		</div>
+		{props.children}
 	</a>
 }
 
 export default function Navbar(props: {
 	page?: string;
 }) {
-	return <div>
+	return <div style={{ marginBottom: 24 }}>
 		<NavbarItem active={props.page == "home"} icon={<HomeRoundedIcon/>} title="Home" href="/"/>
 		<NavbarItem active={props.page == "search"} icon={<SearchRoundedIcon/>} title="Search for posts" href="/search"/>
 	</div>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1e9ba0d..435fa0e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,7 +3,7 @@ import Head from 'next/head';
 import '../styles/colors.css';
 import '../styles/layout.css';
 import '../styles/globals.css';
-import '../styles/navbarItem.css';
+import '../styles/navbar.css';
 import '../styles/button.css';
 import '../styles/image.css';
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 18e09fe..61a1390 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,6 +2,7 @@ import Seperator from '../components/articleSeperator';
 import Navbar from '../components/navbar';
 import Button from '../components/button';
 import Image from '../components/image';
+import Chapters from '../components/chapters';
 
 export default function Home() {
 	return <div>
@@ -11,7 +12,32 @@ export default function Home() {
 				<p className="subtile">Loek heeft dit geschreven</p>
 			</div>
 			<div className="navAreaWrapper">
-				<div className="sticky"><Navbar page="home"/></div>
+				<div className="sticky">
+					<Navbar page="home"/>
+					<Chapters chapters={[
+						{
+							name: "gert",
+							children: [
+								{
+									name: "gert2",
+									children: [
+										{
+											name: "gert3",
+										}
+									]
+								}
+							]
+						},
+						{
+							name: "gert4",
+							children: [
+								{
+									name: "gert5",
+								}
+							]
+						}
+					]}/>
+				</div>
 			</div>
 			<div className="contentWrapper">
 				<p>
diff --git a/styles/navbar.css b/styles/navbar.css
new file mode 100644
index 0000000..456c2c3
--- /dev/null
+++ b/styles/navbar.css
@@ -0,0 +1,55 @@
+.navbarItem .inner {
+	background-color: var(--oxford-blue);
+	color: var(--almond);
+
+	padding: 8px;
+	border-radius: 8px;
+
+	transition-property: background-color, color;
+	transition-duration: .15s;
+
+	position: relative;
+}
+
+.navbarItem {
+	text-decoration: none;
+	display: block;
+}
+
+.navbarItem.indentLevel0 { margin-bottom: 12px; }
+
+.navbarItem.active .inner,
+.navbarItem:hover .inner {
+	background-color: var(--heliotrope-gray);
+	color: var(--oxford-blue);
+}
+
+.navbarItem.chapter .inner {
+	background-color: transparent;
+	color: var(--fg);
+	/* box-shadow: inset 0 0 0 1px #ff00ff; */
+	padding: 4px 0;
+	overflow: visible;
+}
+
+.navbarItem span {
+	vertical-align: top;
+	margin-left: 8px;
+	margin-top: 3px;
+	display: inline-block;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	width: calc(100% - 32px);
+}
+.navbarItem.chapter span {
+	margin-top: 1px;
+}
+
+.navbarItem .inner {
+	height: 24px;
+}
+
+.navbarItem > div > svg {
+	vertical-align: super;
+}
diff --git a/styles/navbarItem.css b/styles/navbarItem.css
deleted file mode 100644
index 9c042a9..0000000
--- a/styles/navbarItem.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.navbarItem {
-	display: block;
-
-	background-color: var(--oxford-blue);
-	color: var(--almond);
-
-	text-decoration: none;
-
-	padding: 8px;
-	border-radius: 8px;
-	margin-bottom: 12px;
-
-	transition-property: background-color, color;
-	transition-duration: .15s;
-}
-
-.navbarItem.active,
-.navbarItem:hover {
-	background-color: var(--heliotrope-gray);
-	color: var(--oxford-blue);
-}
-
-.navbarItem span {
-	vertical-align: super;
-	line-height: 0;
-	margin-left: 8px;
-}
-
-.navbarItem > div {
-	height: 24px;
-}