@@ -97,16 +97,32 @@ const pageTree = (thisLink, tree, level = 0) => {
9797};
9898
9999export default function DocsLayout({ posts, data, params, search, markdown }) {
100− const [isOpen, toggleTray] = useState(false);
101−
100+ const router = useRouter();
101+ const isSelected = "/docs".includes(router.asPath);
102+ const selectedClasses = classnames({
103+ dot: isSelected,
104+ "text-green": isSelected,
105+ "text-black": !isSelected,
106+ });
107+ const rootClasses = "pl-0 text-base hover:text-green";
102108 return (
103109 <>
104110 <Head>
105111 <title>{data.title} • Documentation • urbit.org</title>
106112 </Head>
107113 <div className="flex w-screen h-screen min-h-screen w-screen">
108− <Sidebar search={search}>{childPages("/docs", posts.children)}</Sidebar>
109−
114+ <Sidebar search={search}>
115+ <ul>
116+ <li>
117+ <Link href="/docs">
118+ <a className={`relative ${selectedClasses} ${rootClasses}`}>
119+ Developer Documentation
120+ </a>
121+ </Link>
122+ </li>
123+ </ul>
124+ {childPages("/docs", posts.children)}
125+ </Sidebar>
110126 <ContentArea
111127 breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}
112128 title={data.title}