@@ -36,7 +36,7 @@ const breadcrumbs = (posts, paths) => {
3636};
3737
3838const childPages = (thisLink, children, level = 0) => (
39− <ul className="pl-1">
39+ <ul>
4040 {children?.map((child) => (
4141 <li>{pageTree(join(thisLink, child.slug), child, level)}</li>
4242 ))}
@@ -74,6 +74,14 @@ export default function UnderstandingLayout({
7474 previousPost,
7575 nextPost,
7676}) {
77+ const router = useRouter();
78+ const isSelected = "/understanding-urbit".includes(router.asPath);
79+ const selectedClasses = classnames({
80+ dot: isSelected,
81+ "text-green": isSelected,
82+ "text-black": !isSelected,
83+ });
84+ const rootClasses = "pl-4 text-base hover:text-green";
7785 return (
7886 <>
7987 <Head>
@@ -82,6 +90,15 @@ export default function UnderstandingLayout({
8290 </Head>
8391 <div className="flex w-screen h-screen min-h-screen w-screen sidebar">
8492 <Sidebar search={search}>
93+ <ul>
94+ <li>
95+ <Link href="/understanding-urbit">
96+ <a className={`relative ${selectedClasses} ${rootClasses}`}>
97+ Introduction
98+ </a>
99+ </Link>
100+ </li>
101+ </ul>
85102 {childPages("/understanding-urbit", posts.pages)}
86103 </Sidebar>
87104 <ContentArea