fix: Header visibility and PageHeader positioning
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! ✨
0ab31e234d