Enhance "traffic control" of z-indexes

so layout components play nice to each other when overlaps to each other

Author: ryuheechul

src/components/app/AuxiliaryFrame.astro

@@ -0,0 +1,41 @@
+---
+// this is a component that makes it easy to provide unobtrusive side nav bars
+// with builtin visual feedback when sidebar is being treated with more priority
+// than the main contents
+
+import LinkToHome from './LinkToHome.astro';
+---
+
+<!-- optionally appear from large screen -->
+<aside class="absolute top-0 left-0 w-full lt-lg:hidden bg-transparent">
+  <!-- "invisible" to act as a placeholder while the real one is coming from ./Header.astro -->
+  <header class="py-2.5 invisible">
+    <LinkToHome />
+  </header>
+  <div class="flex">
+    <div class="flex-1 flex">
+      <div class="grow"></div>
+      <div class="w-48 xl:w-60 relative">
+        <!-- slot for "left" side -->
+        <!-- expose group-hover for the slot -->
+        <!-- prettier-ignore -->
+        <div
+          class="w-48 xl:w-60 fixed hover:z-20 group h-full hover:bg-white/80 empty:hidden"
+        ><slot name="left" /></div>
+      </div>
+    </div>
+    <!-- placeholder to represent the main content-->
+    <div class="w-prose"></div>
+    <div class="flex-1 flex">
+      <div class="w-48 xl:w-60 relative">
+        <!-- slot for "right" side -->
+        <!-- expose group-hover for the slot -->
+        <!-- prettier-ignore -->
+        <div
+          class="w-48 xl:w-60 fixed hover:z-20 group h-full hover:bg-white/80 empty:hidden"
+        ><slot name="right" /></div>
+      </div>
+      <div class="grow"></div>
+    </div>
+  </div>
+</aside>

src/components/app/LinkToHome.astro

@@ -1,7 +1,7 @@
 ---
 ---
 
-<a href="/" class="flex items-center">
+<a href="/" class="flex items-center w-fit p-2 -m-2">
   <div class="i-bi-0-square text-yellow-500 text-xl"></div>
   <div class="i-bi-1-square-fill text-yellow-400 text-xl mr-1"></div>
   <h1 class="text-lg font-medium">Bizarre Binary</h1>

src/components/app/SideNavs.astro

@@ -1,5 +1,5 @@
 ---
-import LinkToHome from './LinkToHome.astro';
+import AuxiliaryFrame from './AuxiliaryFrame.astro';
 const path = Astro.url.pathname.replace(/\/$/, '');
 
 const allToys = await Astro.glob('../../pages/toys/*.mdx');
@@ -14,34 +14,20 @@ const pathMatchesUrl = (url: string) => {
 };
 ---
 
-<!-- -z-10 is important to be not blocking interactivity on the main components as this components expands to full screen -->
-<aside class="fixed top-0 left-0 h-full w-full flex lt-lg:hidden -z-10">
-  <div class="flex-1 flex">
-    <div class="grow"></div>
-    <!-- main -->
-    <div class="w-48 xl:w-60 text-gray-500">
-      <!-- "invisible" to act as a place holder while the real one is coming from ./Header.astro -->
-      <header class="py-2.5 sticky top-0 w-full invisible">
-        <LinkToHome />
-      </header>
-      <!-- safe list class="text-gray-800" -->
-      <nav class="px-3">
-        <h2 class="mt-10 my-2 font-bold text-gray-500">Toys</h2>
-        <ul class="text-sm">
-          {
-            allToys.map((toy) => (
-              <li class="truncate">
-                <a href={toy.url} class={toy.url && pathMatchesUrl(toy.url) ? 'text-gray-800' : ''}>
-                  {toy.frontmatter.title}
-                </a>
-              </li>
-            ))
-          }
-        </ul>
-      </nav>
-    </div>
-  </div>
-  <!-- place holder to represent the actual content-->
-  <div class="w-prose"></div>
-  <div class="flex-1"></div>
-</aside>
+<AuxiliaryFrame>
+  <nav slot="left" class="mt-10 px-3">
+    <h2 class="my-2 font-bold text-gray-500">Toys</h2>
+    <!-- safe list class="text-gray-800" -->
+    <ul class="text-sm text-gray-500">
+      {
+        allToys.map((toy) => (
+          <li class="truncate hover:text-gray-700">
+            <a href={toy.url} class={toy.url && pathMatchesUrl(toy.url) ? 'text-gray-800' : ''}>
+              {toy.frontmatter.title}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </nav>
+</AuxiliaryFrame>

src/components/parts/Bits.svelte

@@ -106,7 +106,7 @@ Take an integer and represent that as a series of bits
 
 <!-- safelist class="text-lg text-xs py-0.5 [&:nth-child(8n+5)]:border-l-0 hover:outline" -->
 <table class="table-auto border-collapse">
-  <thead class="bg-slate-50">
+  <thead class="bg-slate-100/50">
     <tr class:hidden={hideHeader}>
       {#each sups as sup, idx (reverseIdx(idx))}
         <th

src/components/parts/Digits.svelte

@@ -90,7 +90,7 @@ Take an integer and represent that as a series of numbers with a base
 </div>
 <!-- safe list class="text-sm even:border-l-0" -->
 <table class="table-auto border-collapse" class:text-sm={compact}>
-  <thead class="bg-slate-50">
+  <thead class="bg-slate-100/50">
     <tr>
       {#each sups as sup, idx (reverseIdx(idx))}
         <th

src/layouts/Layout.astro

@@ -32,10 +32,11 @@ const description = titleFromProps ? `${defaultTitle} - ${title}` : title;
     <GlobalStyle />
     <PWA />
   </head>
-  <body class="m-auto max-w-prose px-2 md:px-0 flex flex-col [min-height:100svh] overflow-x-hidden">
+  <body class="m-auto max-w-prose px-2 md:px-0 [min-height:100svh]">
     <Header sticky={true} />
     <SideNavs />
-    <main>
+    <!-- apply relative so that main is on top of other fixed components like SideNavs -->
+    <main class="relative">
       <slot />
     </main>
     <div class="grow"></div>

src/layouts/Post.astro

@@ -36,7 +36,7 @@ const formattedDate = dates.map((date, idx) => `${prefixes[idx]} ${date}`).join(
 <Layout title={title}>
   <!-- .prose seems to with weird gap without margin so mitigate that with `-my-[n]` -->
   <article class="prose -my-3">
-    <h1 class="text-3xl sm:text-4xl mb-3">{title}</h1>
+    <h1 class="sticky top-0 z-10 text-3xl sm:text-4xl mb-3">{title}</h1>
     {
       !toy && (
         <small class="text-slate">