add padding to the left toolbar

thefrontside · Jul 27, 2023 · da4d1a5 · da4d1a5
1 parent a5741ab
commit da4d1a5
Showing 1 changed file with 26 additions and 23 deletions.
diff --git a/www/html/document.html.tsx b/www/html/document.html.tsx
@@ -15,51 +15,53 @@ export default function* (doc: Doc): Operation<JSX.Element> {
   let topics = docs.getTopics();
 
   return (
-    <section class="mx-auto max-w-screen-xl h-full md:grid grid-cols-[200px_64ch_100px] md:gap-8">
+    <section class="mx-auto md:pt-8 max-w-5xl lg:max-w-6xl justify-items-normal md:grid md:grid-cols-[200px_minmax(auto,60ch)_1fr] md:gap-4">
       <p class="text-right mr-4 md:hidden">
         <label class="cursor-pointer" for="nav-toggle">
           <Navburger />
         </label>
       </p>
       <style media="all">
         {`
-        #nav-toggle:checked ~ aside {
+        #nav-toggle:checked ~ aside#docbar {
           display: none;
         }
         `}
       </style>
       <input class="hidden" id="nav-toggle" type="checkbox" checked />
-      <aside class="fixed top-0 h-full w-full grid grid-cols-2">
+      <aside id="docbar" class="fixed top-0 h-full w-full grid grid-cols-2">
         <nav class="bg-white pr-4 border-r-2 h-full">
           {topics.map((topic) => (
-            <details open>
-              <summary>{topic.name}</summary>
-              <menu>
+            <hgroup class="prose text-sm">
+              <h3>{topic.name}</h3>
+              <menu class="pl-4">
                 {topic.items.map((doc) => (
-                  <li>
+                  <li class="whitespace-nowrap">
                     <a href={`/docs/${doc.id}`}>{doc.title}</a>
                   </li>
                 ))}
               </menu>
-            </details>
+            </hgroup>
           ))}
         </nav>
         <label for="nav-toggle" class="h-full w-full bg-gray-500 opacity-50" />
       </aside>
-      <nav class="hidden md:block h-full">
-        {topics.map((topic) => (
-          <details open>
-            <summary>{topic.name}</summary>
-            <menu>
-              {topic.items.map((doc) => (
-                <li class="whitespace-nowrap">
-                  <a href={`/docs/${doc.id}`}>{doc.title}</a>
-                </li>
-              ))}
-            </menu>
-          </details>
-        ))}
-      </nav>
+      <aside>
+        <nav class="hidden md:block fixed pl-4">
+          {topics.map((topic) => (
+            <hgroup class="prose text-sm">
+              <h3>{topic.name}</h3>
+              <menu class="pl-4">
+                {topic.items.map((doc) => (
+                  <li class="">
+                    <a href={`/docs/${doc.id}`}>{doc.title}</a>
+                  </li>
+                ))}
+              </menu>
+            </hgroup>
+          ))}
+        </nav>
+      </aside>
       <Transform fn={liftTOC}>
         <article class="prose px-4">
           <h1>{doc.title}</h1>
@@ -78,7 +80,8 @@ export default function* (doc: Doc): Operation<JSX.Element> {
               }],
               [rehypeToc, {
                 cssClasses: {
-                  toc: "hidden not-prose text-sm tracking-wide leading-loose lg:block whitespace-nowrap",
+                  toc: "hidden text-sm tracking-wide leading-loose lg:block relative whitespace-nowrap",
+                  list: "fixed",
                 },
               }],
               [rehypePrismPlus, {