Make Doc Sections Collapsable (#232)

* details * remove ul * Adjust styles --------- Co-authored-by: Brooks Lybrand <[email protected]>
remix-run · Mar 21, 2024 · 1614a87 · 1614a87
1 parent a1b58d1
commit 1614a87
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/app/routes/docs.$lang.$ref.tsx b/app/routes/docs.$lang.$ref.tsx
@@ -347,7 +347,6 @@ function DocSearchSection({ className }: { className?: string }) {
       >
         <DocSearch />
       </div>
-      <div className="absolute top-full hidden h-6 w-full bg-gradient-to-b from-white dark:from-gray-900 lg:block" />
     </div>
   );
 }
@@ -618,7 +617,7 @@ function NavMenuMobile() {
 
 function NavMenuDesktop() {
   return (
-    <div className="fixed bottom-0 top-16 -ml-3 hidden w-72 flex-col gap-6 overflow-auto pb-10 pr-5 pt-5 lg:flex">
+    <div className="fixed bottom-0 top-16 -ml-3 hidden w-72 flex-col gap-3 overflow-auto pb-10 pr-5 pt-5 lg:flex">
       <DocSearchSection />
       <div className="[&_*:focus]:scroll-mt-[6rem]">
         <Menu />
@@ -633,15 +632,30 @@ function Menu() {
     <nav>
       <ul>
         {menu.map((category) => (
-          <li key={category.attrs.title} className="[&:not(:last-child)]:mb-6">
-            <MenuCategoryHeading to={category.hasContent && category.slug}>
-              {category.attrs.title}
-            </MenuCategoryHeading>
-            {category.children.map((doc) => (
-              <MenuLink key={doc.slug} to={doc.slug}>
-                {doc.attrs.title} {doc.attrs.new && "🆕"}
-              </MenuLink>
-            ))}
+          <li key={category.attrs.title} className="[&:not(:last-child)]:mb-3">
+            <details
+              className="group relative flex cursor-pointer flex-col"
+              open
+            >
+              <summary className="_no-triangle -mb-1 flex select-none items-center justify-between px-3 py-3 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700">
+                <MenuCategoryHeading to={category.hasContent && category.slug}>
+                  {category.attrs.title}
+                </MenuCategoryHeading>
+                <div className="flex items-center gap-2">
+                  <svg aria-hidden className="h-5 w-5 group-open:hidden">
+                    <use href={`${iconsHref}#chevron-r`} />
+                  </svg>
+                  <svg aria-hidden className="hidden h-5 w-5 group-open:block">
+                    <use href={`${iconsHref}#chevron-d`} />
+                  </svg>
+                </div>
+              </summary>
+              {category.children.map((doc) => (
+                <MenuLink key={doc.slug} to={doc.slug}>
+                  {doc.attrs.title} {doc.attrs.new && "🆕"}
+                </MenuLink>
+              ))}
+            </details>
           </li>
         ))}
       </ul>
@@ -661,7 +675,7 @@ function MenuCategoryHeading({
   to?: string | null | false;
 }) {
   let className =
-    "flex items-center px-3 mb-2 text-base leading-[1.125] font-semibold rounded-md";
+    "flex items-center text-base leading-[1.125] font-semibold rounded-md";
   return to ? (
     <MenuCategoryLink to={to} className={className} children={children} />
   ) : (