chore: updates from base repo

Author: barelyhuman

src/components/Sidebar.jsx

@@ -17,7 +17,11 @@ export function Sidebar({ items = [] } = {}) {
 function SidebarItem({ item, active }) {
   return (
     <li class="w-fit">
-      <a href={"/" + item.key} class="group text-zinc-600">
+      <a
+        href={"/" + item.key}
+        class={`group text-zinc-400 hover:text-zinc-600 ${
+          active ? "text-zinc-600"   : ""}`}
+      >
         {item.label}
         <span
           class={`block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-black ${

src/layouts/base.jsx

@@ -14,16 +14,18 @@ export default function BaseLayout({ children, sideBarItems = [] }) {
             <small>We make tiny things</small>
           </p>
         </header>
-        <main class="flex gap-10">
-          <aside id="sidebar" class="flex-none text-sm">
+        <main class="flex flex-col gap-12 sm:flex-row">
+          <aside id="sidebar" class="flex-1 text-sm">
             <Sidebar
               items={Object.values(sideBarItems).sort(
                 (x, y) => x.order - y.order
               )}
               initialValue={Object.keys(sideBarItems)[0]}
             />
           </aside>
-          <article class="flex-1 prose text-zinc-700">{children}</article>
+          <article class="w-full md:w-[75%] prose text-zinc-700">
+            {children}
+          </article>
         </main>
       </div>
       <footer class="p-2 mx-auto max-w-4xl border-t border-t-zinc">

src/main.jsx

@@ -1,4 +1,3 @@
-import { render } from "preact";
 import {
   ErrorBoundary,
   LocationProvider,
@@ -33,15 +32,14 @@ export const prerender = async (data) => {
     data: { url: data.url },
     head: {
       lang: "en",
-      title: "PreachJS | Tiny preact libraries",
+      title: "Docs with preact",
       elements: new Set([]),
     },
   };
 };
 
 if (typeof window !== "undefined") {
-  const mounter = import.meta.env.PROD ? hydrate : render;
-  mounter(<Main />, document.getElementById("app"));
+  hydrate(<Main />, document.getElementById("app"));
 }
 
 function mapPagesToRoutes(routes) {