Fix UI glitches regarding Header regarding background

ryuheechul · ryuheechul · commit bda15bfc3644 · 2023-06-13T00:40:32.000-07:00
also prevent scrolling horizontally on the body tag for empty space
diff --git a/src/components/app/Header.astro b/src/components/app/Header.astro
@@ -2,37 +2,48 @@
 import HeaderLink from './HeaderLink.astro';
 import LinkToHome from './LinkToHome.astro';
 
-const { fillBg } = Astro.props;
+const { sticky } = Astro.props;
 ---
 
-<div
-  class:list={[
-    'py-3',
-    'flex',
-    'flex-row',
-    'items-center',
-    'lg:ml--48',
-    'xl:ml--60',
-    { 'bg-white': fillBg },
-  ]}
->
-  <div class="w-48 xl:w-60">
-    <LinkToHome />
-  </div>
-  <div class="mx-3 lg:hidden"></div>
-  <nav>
-    <section class="">
+<>
+  {
+    sticky && (
+      // "background" that spans from end to end horizontally
+      <div class="absolute top-0 left-0 w-full z-20">
+        <div class="fixed h-13 bg-white/90 w-full" />
+      </div>
+    )
+  }
+  <!-- actual header -->
+  <header
+    class:list={[
+      'py-3',
+      'flex',
+      'flex-row',
+      'items-center',
+      'lg:ml--48',
+      'xl:ml--60',
+      { sticky: sticky },
+      { 'top-0': sticky },
+      { 'z-20': sticky },
+    ]}
+  >
+    <nav class="w-48 xl:w-60">
+      <LinkToHome />
+    </nav>
+    <div class="mx-3 lg:mx-1"></div>
+    <nav>
       <ul class="unset flex gap-4 [&>li]:p-0">
         <li><HeaderLink href="/toys">Toys</HeaderLink></li>
         <li><HeaderLink href="/posts">Posts</HeaderLink></li>
       </ul>
-    </section>
-  </nav>
-  <div class="flex-grow"></div>
-  <a
-    href="https://github.com/bizarre-binary/bizarre-binary.github.io"
-    aria-label="Open the repo on GitHub"
-  >
-    <div class="i-bi-git text-yellow-400 text-xl"></div>
-  </a>
-</div>
+    </nav>
+    <div class="flex-grow"></div>
+    <a
+      href="https://github.com/bizarre-binary/bizarre-binary.github.io"
+      aria-label="Open the repo on GitHub"
+    >
+      <div class="i-bi-git text-yellow-400 text-xl"></div>
+    </a>
+  </header>
+</>
diff --git a/src/components/app/SideNavs.astro b/src/components/app/SideNavs.astro
@@ -25,7 +25,7 @@ const pathMatchesUrl = (url: string) => {
         <LinkToHome />
       </header>
       <!-- safe list class="text-gray-800" -->
-      <div class="px-3">
+      <nav class="px-3">
         <h2 class="mt-10 my-2 font-bold text-gray-500">Toys</h2>
         <ul class="text-sm">
           {
@@ -38,7 +38,7 @@ const pathMatchesUrl = (url: string) => {
             ))
           }
         </ul>
-      </div>
+      </nav>
     </div>
   </div>
   <!-- place holder to represent the actual content-->
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -32,10 +32,8 @@ 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]">
-    <header class="sticky z-20 top-0">
-      <Header fillBg={true} />
-    </header>
+  <body class="m-auto max-w-prose px-2 md:px-0 flex flex-col [min-height:100svh] overflow-x-hidden">
+    <Header sticky={true} />
     <SideNavs />
     <main>
       <slot />
