From c3d4fbd7948e1df0797e834a602992736a068e15 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 6 Nov 2025 15:39:39 +0700
Subject: [PATCH] feat: Add dynamic sticky positioning to PageHeader based on
 mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Following SubmenuBar pattern, PageHeader now adapts its sticky
position based on fullscreen mode.

Changes:
1. PageHeader Component
   - Added fullscreen prop (boolean)
   - Dynamic top position calculation
   - Fullscreen: top-0 (submenu at top-0)
   - WP-Admin: top-[calc(7rem+32px)] = 144px (below WP bar + menu)

2. App.tsx
   - Pass fullscreen={true} in fullscreen modes
   - Pass fullscreen={false} in WP-Admin mode
   - Matches SubmenuBar prop pattern

Logic (matches SubmenuBar):
const topClass = fullscreen ? 'top-0' : 'top-[calc(7rem+32px)]';

Layout Positions:
┌─────────────────────────────────────┐
│ Fullscreen Mode:                    │
│   SubmenuBar: top-0                 │
│   PageHeader: top-0 ✅              │
├─────────────────────────────────────┤
│ WP-Admin Mode:                      │
│   SubmenuBar: top-[calc(7rem+32px)] │
│   PageHeader: top-[calc(7rem+32px)] ✅│
└─────────────────────────────────────┘

Result:
✅ PageHeader sticks correctly in fullscreen
✅ PageHeader sticks correctly in WP-Admin
✅ Consistent with SubmenuBar behavior
✅ No overlap or covering issues

Files Modified:
- PageHeader.tsx: Added fullscreen prop + dynamic positioning
- App.tsx: Pass fullscreen prop to all PageHeader instances
---
 admin-spa/src/App.tsx                   |  6 +++---
 admin-spa/src/components/PageHeader.tsx | 13 +++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index b3506ae..ea3959a 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -422,7 +422,7 @@ function Shell() {
                 ) : (
                   <SubmenuBar items={main.children} fullscreen={true} />
                 )}
-                <PageHeader />
+                <PageHeader fullscreen={true} />
                 <div className="flex-1 overflow-auto p-4">
                   <AppRoutes />
                 </div>
@@ -437,7 +437,7 @@ function Shell() {
                 <SubmenuBar items={main.children} fullscreen={true} />
               )}
               <main className="flex-1 flex flex-col min-h-0">
-                <PageHeader />
+                <PageHeader fullscreen={true} />
                 <div className="flex-1 overflow-auto p-4">
                   <AppRoutes />
                 </div>
@@ -452,7 +452,7 @@ function Shell() {
             ) : (
               <SubmenuBar items={main.children} fullscreen={false} />
             )}
-            <PageHeader />
+            <PageHeader fullscreen={false} />
             <main className="flex-1 flex flex-col min-h-0">
               <div className="flex-1 overflow-auto p-4">
                 <AppRoutes />
diff --git a/admin-spa/src/components/PageHeader.tsx b/admin-spa/src/components/PageHeader.tsx
index 6db3e99..e89fee5 100644
--- a/admin-spa/src/components/PageHeader.tsx
+++ b/admin-spa/src/components/PageHeader.tsx
@@ -1,13 +1,22 @@
 import React from 'react';
 import { usePageHeader } from '@/contexts/PageHeaderContext';
 
-export function PageHeader() {
+interface PageHeaderProps {
+  fullscreen?: boolean;
+}
+
+export function PageHeader({ fullscreen = false }: PageHeaderProps) {
   const { title, action } = usePageHeader();
 
   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)]';
+
   return (
-    <div className="sticky top-[49px] z-10 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <div className={`sticky ${topClass} z-10 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60`}>
       <div className="container max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
         <div>
           <h1 className="text-lg font-semibold">{title}</h1>