From 47a83c71b392feacca96e6f27f686d912810c91c Mon Sep 17 00:00:00 2001
From: Kyle Loveless <kyle@loveless.dev>
Date: Fri, 11 Oct 2024 14:56:25 -0500
Subject: [PATCH] fix ghosting on pull down..?

---
 islands/site-header.tsx | 60 +++++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/islands/site-header.tsx b/islands/site-header.tsx
index 3e67050..d84efb9 100644
--- a/islands/site-header.tsx
+++ b/islands/site-header.tsx
@@ -58,36 +58,38 @@ export default function SiteHeader({ children }: Props) {
           </div>
         </div>
       </header>
-      <div
-        className={cn(
-          "fixed top-16 z-30 w-full overflow-hidden border-b bg-background/80 transition-transform duration-500 md:hidden",
-          showMenu ? "translate-y-1px" : "-translate-y-full",
-        )}
-        aria-hidden={!showMenu}
-      >
-        <div className="container flex h-full flex-col items-center justify-stretch px-4 pb-2">
-          <nav className="mb-2 flex w-full flex-col items-stretch gap-1 border-b py-2">
-            {siteConfig.mainNav.map(
-              (item, index) =>
-                item.href && (
-                  <Link
-                    key={index}
-                    href={item.href}
-                    className={buttonVariants({
-                      variant: "ghost",
-                      className:
-                        "w-full !justify-start text-left font-semibold text-muted-foreground",
-                    })}
-                    onClick={() => setShowMenu(false)}
-                  >
-                    {item.title}
-                  </Link>
-                ),
-            )}
-          </nav>
-          {links}
+      {showMenu && (
+        <div
+          className={cn(
+            "fixed top-16 z-30 w-full overflow-hidden border-b bg-background/80 transition-transform duration-500 md:hidden",
+            // showMenu ? "translate-y-1px" : "-translate-y-full",
+          )}
+          aria-hidden={!showMenu}
+        >
+          <div className="container flex h-full flex-col items-center justify-stretch px-4 pb-2">
+            <nav className="mb-2 flex w-full flex-col items-stretch gap-1 border-b py-2">
+              {siteConfig.mainNav.map(
+                (item, index) =>
+                  item.href && (
+                    <Link
+                      key={index}
+                      href={item.href}
+                      className={buttonVariants({
+                        variant: "ghost",
+                        className:
+                          "w-full !justify-start text-left font-semibold text-muted-foreground",
+                      })}
+                      onClick={() => setShowMenu(false)}
+                    >
+                      {item.title}
+                    </Link>
+                  ),
+              )}
+            </nav>
+            {links}
+          </div>
         </div>
-      </div>
+      )}
       {/* Backdrop */}
       <div
         aria-hidden