@@ -1,6 +1,8 @@
11import Head from "next/head";
22import Link from "next/link";
33import { useRouter } from "next/router";
4+import { useState } from "react";
5+import classnames from "classnames";
46import { join } from "path";
57import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";
68import Markdown from "../../components/Markdown";
@@ -23,38 +25,60 @@ const breadcrumbs = (posts, paths) => {
2325 return results;
2426};
2527
26−const childPages = (thisLink, children) => (
28+const childPages = (thisLink, children, level = 0) => (
2729 <ul className="pl-1">
2830 {Object.entries(children).map(([childSlug, child]) => (
29− <li>{pageTree(join(thisLink, childSlug), child)}</li>
31+ <li>{pageTree(join(thisLink, childSlug), child, level)}</li>
3032 ))}
3133 </ul>
3234);
3335
34−const pageTree = (thisLink, tree) => (
35− <div>
36− <Link href={thisLink}>
37− <span className="font-medium text-lg cursor-pointer">{tree.title}</span>
38− </Link>
39− <ul className="pl-1">
40− {tree.pages
41− .sort((a, b) => a.weight - b.weight)
42− .map(({ title, slug }) => (
43− <li className="font-thin py-1">
44− <Link href={join(thisLink, slug)}>{title}</Link>
45− </li>
46− ))}
47− </ul>
48− {childPages(thisLink, tree.children)}
49− </div>
50−);
36+const pageTree = (thisLink, tree, level = 0) => {
37+ const router = useRouter();
38+ const firstCrumb = "/" + router.asPath.split("/").slice(1).join("/");
39+
40+ const thisPage = firstCrumb.includes(thisLink);
41+ const [isOpen, toggleTree] = useState(thisPage);
42+
43+ const activeClasses = classnames({
44+ hidden: !isOpen,
45+ });
46+
47+ const headerClass = classnames({
48+ "text-gray": !thisPage,
49+ });
50+ return (
51+ <>
52+ <span
53+ className={
54+ "font-medium text-lg cursor-pointer hover:text-black " + headerClass
55+ }
56+ onClick={() => toggleTree(!isOpen)}
57+ >
58+ {tree.title}
59+ </span>
60+ <div className={activeClasses}>
61+ <ul className={"pl-1"}>
62+ {tree.pages
63+ .sort((a, b) => a.weight - b.weight)
64+ .map(({ title, slug }) => (
65+ <li className="font-thin py-1">
66+ <Link href={join(thisLink, slug)}>{title}</Link>
67+ </li>
68+ ))}
69+ </ul>
70+ {childPages(thisLink, tree.children, level + 1)}
71+ </div>
72+ </>
73+ );
74+};
5175
5276function Sidebar(props) {
5377 return (
5478 <div className="flex flex-col w-72 bg-wall max-h-screen h-screen">
55− <header className="flex justify-between items-center pl-12 pt-8 pb-8">
79+ <header className="flex flex-shrink-0 justify-between items-center pl-12 pt-12 pb-8">
5680 <Link href="/">
57− <a className="type-ui">Urbit</a>
81+ <a className="type-ui text-gray">Urbit.org</a>
5882 </Link>
5983 </header>
6084 <div className="overflow-y-scroll p-12 pt-16">
@@ -68,8 +92,11 @@ function Sidebar(props) {
6892function ContentArea(props) {
6993 return (
7094 <div className="w-full">
71− <header className="flex justify-between items-center px-24 pt-8 pb-8">
72− <div className="type-ui">Install Urbit</div>
95+ <header className="flex justify-between items-center px-24 pt-12 pb-8">
96+ <div className="type-ui">Urbit Documentation</div>
97+ <button className="button-sm bg-wall text-gray">
98+ Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
99+ </button>
73100 </header>
74101 <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
75102 <div className="type-ui text-lightGray">{props.breadcrumbs}</div>