Mobile styles on ToC drawer

Author: webstackdev

src/components/Toc/index.astro

@@ -15,19 +15,19 @@ const tocTree = buildTocTree(items)
 {
   tocTree.length > 0 && (
     <>
-      <table-of-contents class="block">
-        {/* Edge trigger: partial circle on right edge, visible when drawer is closed */}
+      <table-of-contents class="block group/toc">
+        {/* Open button, partial circle on right edge and visible when drawer is closed */}
         <button
           type="button"
           data-toc-toggle
           aria-controls="toc-drawer"
           aria-label="Open table of contents"
-          class="fixed right-0 top-1/2 -translate-y-1/2 z-(--z-content-floating) flex h-16 w-9 items-center justify-center rounded-l-full border border-r-0 border-trim bg-page-base transition-opacity hover:shadow-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary md:hidden"
+          class="fixed -right-2 top-1/2 -translate-y-1/2 z-(--z-content-floating) flex h-16 w-9 items-center justify-center rounded-l-full border border-r-0 border-content bg-page-base transition-opacity duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary md:hidden group-data-open/toc:opacity-0 group-data-open/toc:pointer-events-none"
         >
-          <Icon icon="arrow-left" size={6} />
+          <Icon icon="arrow-left" size={6} color="content" />
         </button>
 
-        {/* Full-screen scrim overlay */}
+        {/* Full-screen scrim overlay with background blur when drawer is open */}
         <button
           type="button"
           data-toc-overlay
@@ -41,22 +41,36 @@ const tocTree = buildTocTree(items)
           id="toc-drawer"
           data-toc-panel
           data-state="closed"
-          class="fixed top-0 right-0 bottom-0 z-(--z-content-floating) w-[80vw] translate-x-full overflow-y-auto bg-page-base shadow-[-20px_0_60px_rgba(15,23,42,0.35)] transition-transform duration-300 ease-out data-[state=open]:translate-x-0 lg:static lg:z-auto lg:w-auto lg:translate-x-0 lg:overflow-y-visible lg:bg-transparent lg:shadow-none lg:h-full"
+          class="group/drawer fixed top-0 right-0 bottom-0 z-(--z-content-floating) w-[80vw] translate-x-full overflow-visible bg-page-base transition-transform duration-300 ease-out data-[state=open]:translate-x-0 lg:static lg:z-auto lg:w-auto lg:translate-x-0 lg:overflow-y-visible lg:overflow-x-visible lg:bg-transparent lg:h-full"
         >
-          {/* Close button header — mobile only */}
-          <div class="flex items-center justify-between gap-3 px-5 pt-5 lg:hidden">
-            <h2 class="text-base font-semibold">Table of Contents</h2>
-            <button
-              type="button"
-              data-toc-close
-              aria-label="Close table of contents"
-              class="flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-            >
-              <Icon icon="arrow-right" size={18} />
-            </button>
-          </div>
+          {/* Left border segments — split around the close button circle */}
+          <div class="absolute left-0 top-0 w-px bg-content lg:hidden" style="height: calc(50% - 2rem);"></div>
+          <div class="absolute left-0 bottom-0 w-px bg-content lg:hidden" style="height: calc(50% - 2rem);"></div>
 
-          <aside
+          {/* Close button — vertically centered on the drawer's left edge.
+              The icon starts as arrow-left and rotates 180° to arrow-right
+              as the drawer slides open. Only the left semicircle has a border. */}
+          <button
+            type="button"
+            data-toc-close
+            aria-controls="toc-drawer"
+            aria-label="Close table of contents"
+            class="absolute -left-6 top-1/2 -translate-y-1/2 z-(--z-content-floating) flex h-16 w-9 items-center justify-center rounded-l-full border border-r-0 border-content bg-page-base opacity-0 pointer-events-none transition-opacity duration-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary lg:hidden group-data-[state=open]/drawer:opacity-100 group-data-[state=open]/drawer:pointer-events-auto"
+            style="clip-path: inset(0 0.75rem 0 0);"
+          >
+            <span class="inline-flex transition-transform duration-300 group-data-[state=open]/drawer:rotate-180">
+              <Icon icon="arrow-left" size={6} color="content" />
+            </span>
+          </button>
+
+          {/* Scrollable inner wrapper (overflow moved here from outer panel) */}
+          <div class="h-full overflow-y-auto">
+            {/* Drawer heading — mobile only */}
+            <div class="flex items-center gap-3 px-5 pt-5 lg:hidden">
+              <h2 class="text-base font-semibold">Table of Contents</h2>
+            </div>
+
+            <aside
             class="px-5 py-6 lg:sticky lg:rounded-lg lg:border lg:border-trim lg:bg-page-base lg:shadow-none"
             style="top: 1rem;"
             aria-labelledby="toc-heading"
@@ -98,6 +112,7 @@ const tocTree = buildTocTree(items)
               </ol>
             </nav>
           </aside>
+          </div>{/* end scrollable inner wrapper */}
         </div>
       </table-of-contents>