git.iko.soy/urbit.org
on master help sign in
docs: sidebar
8cef528Matilde Park
pages/docs.js+42−23
compare with master
unifiedsplit
@@ -1,4 +1,6 @@
1import Link from "next/link";
1import Link from "next/link";
2+import { useState } from "react";
3+import classnames from "classnames";
2import { join } from "path";
4import { join } from "path";
3import { buildPageTree, getPage } from "../lib/lib";
5import { buildPageTree, getPage } from "../lib/lib";
4import Markdown from "../components/Markdown";
6import Markdown from "../components/Markdown";
@@ -21,38 +23,52 @@ const breadcrumbs = (posts, paths) => {
21 return results;
23 return results;
22};
24};
23
25
24−const childPages = (thisLink, children) => (
26+const childPages = (thisLink, children, level = 0) => (
25 <ul className="pl-1">
27 <ul className="pl-1">
26 {Object.entries(children).map(([childSlug, child]) => (
28 {Object.entries(children).map(([childSlug, child]) => (
27− <li>{pageTree(join(thisLink, childSlug), child)}</li>
29+ <li>{pageTree(join(thisLink, childSlug), child, level)}</li>
28 ))}
30 ))}
29 </ul>
31 </ul>
30);
32);
31
33
32−const pageTree = (thisLink, tree) => (
34+const pageTree = (thisLink, tree, level = 0) => {
33− <div>
35+ const [isOpen, toggleTree] = useState(false);
34− <Link href={thisLink}>
36+
37+ const activeClasses = classnames({
38+ hidden: !isOpen,
39+ });
40+ return (
41+ <>
42+ <span
43+ className={
35− <span className="font-medium text-lg cursor-pointer">{tree.title}</span>
44+ "font-medium text-gray text-lg cursor-pointer hover:text-black"
36− </Link>
45+ }
46+ onClick={() => toggleTree(!isOpen)}
47+ >
48+ {tree.title}
49+ </span>
50+ <div className={activeClasses}>
37− <ul className="pl-1">
51+ <ul className={"pl-1"}>
38− {tree.pages
52+ {tree.pages
39− .sort((a, b) => a.weight - b.weight)
53+ .sort((a, b) => a.weight - b.weight)
40− .map(({ title, slug }) => (
54+ .map(({ title, slug }) => (
41− <li className="font-thin py-1">
55+ <li className="font-thin py-1">
42− <Link href={join(thisLink, slug)}>{title}</Link>
56+ <Link href={join(thisLink, slug)}>{title}</Link>
43− </li>
57+ </li>
44− ))}
58+ ))}
45− </ul>
59+ </ul>
46− {childPages(thisLink, tree.children)}
60+ {childPages(thisLink, tree.children, level + 1)}
47− </div>
61+ </div>
62+ </>
48−);
63+ );
64+};
49
65
50function Sidebar(props) {
66function Sidebar(props) {
51 return (
67 return (
52 <div className="flex flex-col w-72 bg-wall max-h-screen h-screen">
68 <div className="flex flex-col w-72 bg-wall max-h-screen h-screen">
53− <header className="flex justify-between items-center pl-12 pt-8 pb-8">
69+ <header className="flex flex-shrink-0 justify-between items-center pl-12 pt-12 pb-8">
54 <Link href="/">
70 <Link href="/">
55− <a className="type-ui">Urbit</a>
71+ <a className="type-ui text-gray">Urbit.org</a>
56 </Link>
72 </Link>
57 </header>
73 </header>
58 <div className="overflow-y-scroll p-12 pt-16">
74 <div className="overflow-y-scroll p-12 pt-16">
@@ -66,8 +82,11 @@ function Sidebar(props) {
66function ContentArea(props) {
82function ContentArea(props) {
67 return (
83 return (
68 <div className="w-full">
84 <div className="w-full">
69− <header className="flex justify-between items-center px-24 pt-8 pb-8">
85+ <header className="flex justify-between items-center px-24 pt-12 pb-8">
70− <div className="type-ui">Install Urbit</div>
86+ <div className="type-ui">Urbit Documentation</div>
87+ <button className="button-sm bg-wall text-gray">
88+ Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
89+ </button>
71 </header>
90 </header>
72 <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
91 <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
73 <div className="type-ui text-lightGray">{props.breadcrumbs}</div>
92 <div className="type-ui text-lightGray">{props.breadcrumbs}</div>
pages/docs/[...slug].js+50−23
@@ -1,6 +1,8 @@
1import Head from "next/head";
1import Head from "next/head";
2import Link from "next/link";
2import Link from "next/link";
3import { useRouter } from "next/router";
3import { useRouter } from "next/router";
4+import { useState } from "react";
5+import classnames from "classnames";
4import { join } from "path";
6import { join } from "path";
5import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";
7import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";
6import Markdown from "../../components/Markdown";
8import Markdown from "../../components/Markdown";
@@ -23,38 +25,60 @@ const breadcrumbs = (posts, paths) => {
23 return results;
25 return results;
24};
26};
25
27
26−const childPages = (thisLink, children) => (
28+const childPages = (thisLink, children, level = 0) => (
27 <ul className="pl-1">
29 <ul className="pl-1">
28 {Object.entries(children).map(([childSlug, child]) => (
30 {Object.entries(children).map(([childSlug, child]) => (
29− <li>{pageTree(join(thisLink, childSlug), child)}</li>
31+ <li>{pageTree(join(thisLink, childSlug), child, level)}</li>
30 ))}
32 ))}
31 </ul>
33 </ul>
32);
34);
33
35
34−const pageTree = (thisLink, tree) => (
36+const pageTree = (thisLink, tree, level = 0) => {
35− <div>
37+ const router = useRouter();
36− <Link href={thisLink}>
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={
37− <span className="font-medium text-lg cursor-pointer">{tree.title}</span>
54+ "font-medium text-lg cursor-pointer hover:text-black " + headerClass
38− </Link>
55+ }
56+ onClick={() => toggleTree(!isOpen)}
57+ >
58+ {tree.title}
59+ </span>
60+ <div className={activeClasses}>
39− <ul className="pl-1">
61+ <ul className={"pl-1"}>
40− {tree.pages
62+ {tree.pages
41− .sort((a, b) => a.weight - b.weight)
63+ .sort((a, b) => a.weight - b.weight)
42− .map(({ title, slug }) => (
64+ .map(({ title, slug }) => (
43− <li className="font-thin py-1">
65+ <li className="font-thin py-1">
44− <Link href={join(thisLink, slug)}>{title}</Link>
66+ <Link href={join(thisLink, slug)}>{title}</Link>
45− </li>
67+ </li>
46− ))}
68+ ))}
47− </ul>
69+ </ul>
48− {childPages(thisLink, tree.children)}
70+ {childPages(thisLink, tree.children, level + 1)}
49− </div>
71+ </div>
72+ </>
50−);
73+ );
74+};
51
75
52function Sidebar(props) {
76function Sidebar(props) {
53 return (
77 return (
54 <div className="flex flex-col w-72 bg-wall max-h-screen h-screen">
78 <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">
56 <Link href="/">
80 <Link href="/">
57− <a className="type-ui">Urbit</a>
81+ <a className="type-ui text-gray">Urbit.org</a>
58 </Link>
82 </Link>
59 </header>
83 </header>
60 <div className="overflow-y-scroll p-12 pt-16">
84 <div className="overflow-y-scroll p-12 pt-16">
@@ -68,8 +92,11 @@ function Sidebar(props) {
68function ContentArea(props) {
92function ContentArea(props) {
69 return (
93 return (
70 <div className="w-full">
94 <div className="w-full">
71− <header className="flex justify-between items-center px-24 pt-8 pb-8">
95+ <header className="flex justify-between items-center px-24 pt-12 pb-8">
72− <div className="type-ui">Install Urbit</div>
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>
73 </header>
100 </header>
74 <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
101 <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
75 <div className="type-ui text-lightGray">{props.breadcrumbs}</div>
102 <div className="type-ui text-lightGray">{props.breadcrumbs}</div>