From a779f9a226258584894701686ab442853ff96fe7 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 6 Nov 2025 22:37:20 +0700
Subject: [PATCH] fix: Move PageHeader above SubmenuBar (correct hierarchy)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed the layout hierarchy - PageHeader should be ABOVE submenu, not below.

Correct Information Architecture:
1. Page Title (Contextual Header) ← "Where am I?"
2. Submenu Tabs ← "What can I do here?"
3. Content ← "The actual data"

Changes Made:

1. ✅ Desktop Fullscreen Layout
   Before: Submenu → PageHeader
   After: PageHeader → Submenu

2. ✅ Mobile Fullscreen Layout
   Before: Submenu → PageHeader (inside main)
   After: PageHeader → Submenu (outside main)

3. ✅ Non-Fullscreen Layout
   Before: TopNav → Submenu → PageHeader
   After: TopNav → PageHeader → Submenu

4. ✅ Updated Z-Index
   Before: PageHeader z-10 (below submenu)
   After: PageHeader z-20 (same as submenu, but DOM order puts it on top)

Why This Order Makes Sense:
- User sees PAGE TITLE first ("Store Details")
- Then sees NAVIGATION OPTIONS (WooNooW, Store Details, Payments, Shipping)
- Then sees CONTENT (the actual form fields)

Visual Flow:
┌─────────────────────────────────┐
│ Store Details          [Save]   │ ← Contextual header (what page)
├─────────────────────────────────┤
│ WooNooW | Store Details | ...   │ ← Submenu (navigation)
├─────────────────────────────────┤
│ Store Identity                  │
│ Store name *                    │ ← Content
│ [My Wordpress Store]            │
└─────────────────────────────────┘

Before (Wrong):
User: "What are these tabs for?" (sees submenu first)
Then: "Oh, I'm on Store Details" (sees title after)

After (Correct):
User: "I'm on Store Details" (sees title first)
Then: "I can navigate to WooNooW, Payments, etc." (sees options)

Files Modified:
- App.tsx: Reordered PageHeader to be before SubmenuBar in all 3 layouts
- PageHeader.tsx: Updated z-index to z-20 (same as submenu)

Result: Proper information hierarchy! ✨
---
 admin-spa/src/App.tsx                   | 6 +++---
 admin-spa/src/components/PageHeader.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index e19bdc7..528f2e7 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -473,12 +473,12 @@ function Shell() {
             <div className="flex flex-1 min-h-0">
               <Sidebar />
               <main className="flex-1 flex flex-col min-h-0 min-w-0">
+                <PageHeader fullscreen={true} />
                 {isDashboardRoute ? (
                   <DashboardSubmenuBar items={main.children} fullscreen={true} />
                 ) : (
                   <SubmenuBar items={main.children} fullscreen={true} />
                 )}
-                <PageHeader fullscreen={true} />
                 <div className="flex-1 overflow-auto p-4 min-w-0">
                   <AppRoutes />
                 </div>
@@ -486,13 +486,13 @@ function Shell() {
             </div>
           ) : (
             <div className={`flex flex-1 flex-col min-h-0 ${fullscreen ? 'pt-0' : 'pt-16'}`}>
+              <PageHeader fullscreen={true} />
               {!isMorePage && (isDashboardRoute ? (
                 <DashboardSubmenuBar items={main.children} fullscreen={true} headerVisible={isHeaderVisible} />
               ) : (
                 <SubmenuBar items={main.children} fullscreen={true} headerVisible={isHeaderVisible} />
               ))}
               <main className="flex-1 flex flex-col min-h-0 min-w-0 pb-14">
-                <PageHeader fullscreen={true} />
                 <div ref={scrollContainerRef} className="flex-1 overflow-auto p-4 min-w-0">
                   <AppRoutes />
                 </div>
@@ -504,12 +504,12 @@ function Shell() {
         ) : (
           <div className="flex flex-1 flex-col min-h-0">
             <TopNav />
+            <PageHeader fullscreen={false} />
             {isDashboardRoute ? (
               <DashboardSubmenuBar items={main.children} fullscreen={false} />
             ) : (
               <SubmenuBar items={main.children} fullscreen={false} />
             )}
-            <PageHeader fullscreen={false} />
             <main className="flex-1 flex flex-col min-h-0 min-w-0">
               <div className="flex-1 overflow-auto p-4 min-w-0">
                 <AppRoutes />
diff --git a/admin-spa/src/components/PageHeader.tsx b/admin-spa/src/components/PageHeader.tsx
index 61c488f..a41b8a6 100644
--- a/admin-spa/src/components/PageHeader.tsx
+++ b/admin-spa/src/components/PageHeader.tsx
@@ -10,10 +10,10 @@ export function PageHeader({ fullscreen = false }: PageHeaderProps) {
 
   if (!title) return null;
 
-  // 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
+  // PageHeader is now ABOVE submenu in DOM order
+  // z-20 ensures it stays on top when both are sticky
   return (
-    <div className="sticky top-0 z-10 border-b bg-background">
+    <div className="sticky top-0 z-20 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>