From 0ab31e234db1408ddde621a9b590e328364f7921 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 6 Nov 2025 22:34:03 +0700
Subject: [PATCH] fix: Header visibility and PageHeader positioning
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed 2 critical issues:

1. ✅ Header Missing in Non-Fullscreen
   Problem: Header was using 'fixed' positioning on mobile, breaking non-fullscreen layout
   Solution: Changed back to 'sticky' positioning for all modes

   Before:
   className="md:sticky ${fullscreen ? 'fixed top-0 left-0 right-0' : ...}"

   After:
   className="sticky ${fullscreen ? 'top-0' : 'top-[32px]'}"

   Also fixed hide animation to only trigger in fullscreen:
   ${fullscreen && !isVisible ? '-translate-y-full' : 'translate-y-0'}

   Result: Header now shows correctly in all modes

2. ✅ PageHeader Covered by Submenu
   Problem: PageHeader had complex top calculations that didn't work
   Solution: Simplified to always use top-0, rely on z-index for stacking

   Before:
   const topClass = fullscreen ? 'top-0' : 'top-[calc(10rem+32px)]';

   After:
   // Always top-0, z-10 ensures it stacks below submenu (z-20)
   className="sticky top-0 z-10"

   Result: PageHeader now visible and stacks correctly below submenu

How It Works:
- Submenu: sticky top-X z-20 (higher z-index, sticks first)
- PageHeader: sticky top-0 z-10 (lower z-index, stacks below)
- When scrolling, submenu sticks at its position
- PageHeader scrolls up until it hits top-0, then sticks below submenu

Layout Flow (Non-Fullscreen Mobile):
┌─────────────────────────────────┐
│ Header (sticky top-[32px])      │ ← Now visible!
├─────────────────────────────────┤
│ TopNav                          │
├─────────────────────────────────┤
│ Submenu (sticky, z-20)          │
├─────────────────────────────────┤
│ PageHeader (sticky, z-10)       │ ← Now visible!
├─────────────────────────────────┤
│ Content                         │
└─────────────────────────────────┘

Layout Flow (Fullscreen Mobile):
┌─────────────────────────────────┐
│ (Header hidden)                 │
├─────────────────────────────────┤
│ Submenu (sticky top-0, z-20)    │
├─────────────────────────────────┤
│ PageHeader (sticky top-0, z-10) │
├─────────────────────────────────┤
│ Content                         │
│                          ( + )  │
├─────────────────────────────────┤
│ Bottom Nav                      │
└─────────────────────────────────┘

Files Modified:
- App.tsx: Fixed header positioning and hide logic
- PageHeader.tsx: Simplified positioning logic

Result: Clean, working layout in all modes! ✨
---
 admin-spa/src/App.tsx                   | 2 +-
 admin-spa/src/components/PageHeader.tsx | 9 +++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index 2d6f1c4..e19bdc7 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -335,7 +335,7 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
   }
   
   return (
-    <header className={`h-16 border-b border-border flex items-center px-4 justify-between md:sticky ${fullscreen ? `md:top-0 fixed top-0 left-0 right-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60 transition-transform duration-300 ${!isVisible ? '-translate-y-full md:translate-y-0' : 'translate-y-0'}`}>
+    <header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60 transition-transform duration-300 ${fullscreen && !isVisible ? '-translate-y-full md:translate-y-0' : 'translate-y-0'}`}>
       <div className="font-semibold">{siteTitle}</div>
       <div className="flex items-center gap-3">
         <div className="text-sm opacity-70 hidden sm:block">{window.WNW_API?.isDev ? 'Dev Server' : 'Production'}</div>
diff --git a/admin-spa/src/components/PageHeader.tsx b/admin-spa/src/components/PageHeader.tsx
index c5ef39d..61c488f 100644
--- a/admin-spa/src/components/PageHeader.tsx
+++ b/admin-spa/src/components/PageHeader.tsx
@@ -10,13 +10,10 @@ export function PageHeader({ fullscreen = false }: PageHeaderProps) {
 
   if (!title) return null;
 
-  // Calculate top position based on fullscreen state
-  // Fullscreen: top-0 (submenu is at top-0)
-  // Normal: top-[calc(7rem+32px)] = top-[144px] (below WP bar + menu + submenu)
-  const topClass = fullscreen ? 'top-0' : 'top-[calc(10rem+32px)]';
-
+  // PageHeader sticks at top-0 and naturally stacks below submenu (which has z-20)
+  // Our z-10 ensures we're below the submenu in stacking order
   return (
-    <div className={`sticky ${topClass} z-10 border-b bg-background`}>
+    <div className="sticky top-0 z-10 border-b bg-background">
       <div className="w-full max-w-5xl mx-auto px-4 py-3 flex items-center justify-between min-w-0">
         <div className="min-w-0 flex-1">
           <h1 className="text-lg font-semibold truncate">{title}</h1>