b93a873765
The Real Problem:
After removing contextual headers, SubmenuBar still used headerVisible
logic to calculate top position. This caused the persistent top-16 gap
because it thought a header existed when it did not.
Root Cause Analysis:
1. We removed contextual headers from Dashboard pages ✓
2. But SubmenuBar still had: top-16 when headerVisible=true
3. Header was being tracked but did not exist
4. Result: 64px gap at top (top-16 = 4rem = 64px)
The Solution:
Since we removed ALL contextual headers, submenu should ALWAYS be at
top-0 in fullscreen mode. No conditional logic needed.
Changes Made:
1. SubmenuBar.tsx
Before:
const topClass = fullscreen
? (headerVisible ? "top-16" : "top-0") ← Wrong!
: "top-[calc(7rem+32px)]";
After:
const topClass = fullscreen
? "top-0" ← Always top-0, no header exists!
: "top-[calc(7rem+32px)]";
2. DashboardSubmenuBar.tsx
Same fix as SubmenuBar
3. App.tsx
- Removed headerVisible prop from submenu components
- Removed isHeaderVisible state (no longer needed)
- Removed onVisibilityChange from Header (no longer tracking)
- Cleaned up unused scroll detection logic
4. More/index.tsx
- Added handleExitFullscreen function
- Exits fullscreen + navigates to dashboard (/)
- User requested: "redirect member to dashboard overview"
Why This Was Hard:
The issue was not the padding itself, but the LOGIC that calculated it.
We had multiple layers of conditional logic (fullscreen, headerVisible,
standalone) that became inconsistent after removing contextual headers.
The fix required understanding the entire flow:
- No contextual headers → No header exists
- No header → No need to offset submenu
- Submenu always at top-0 in fullscreen
Result:
✅ No top gap - submenu starts at top-0
✅ Exit fullscreen redirects to dashboard
✅ Simplified logic - removed unnecessary tracking
✅ Clean, predictable behavior
Files Modified:
- SubmenuBar.tsx
- DashboardSubmenuBar.tsx
- App.tsx
- More/index.tsx
The top-16 nightmare is finally over! 🎯
55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import type { SubItem } from '@/nav/tree';
|
|
|
|
type Props = { items?: SubItem[]; fullscreen?: boolean; headerVisible?: boolean };
|
|
|
|
export default function SubmenuBar({ items = [], fullscreen = false, headerVisible = true }: Props) {
|
|
// Always call hooks first
|
|
const { pathname } = useLocation();
|
|
|
|
// Single source of truth: props.items. No fallbacks, no demos, no path-based defaults
|
|
if (items.length === 0) return null;
|
|
|
|
// Calculate top position based on fullscreen state
|
|
// Fullscreen: top-0 (no contextual headers, submenu is first element)
|
|
// Normal: top-[calc(7rem+32px)] (below WP admin bar + menu bar)
|
|
const topClass = fullscreen ? 'top-0' : 'top-[calc(7rem+32px)]';
|
|
|
|
return (
|
|
<div data-submenubar className={`border-b border-border bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60 sticky ${topClass} z-20`}>
|
|
<div className="px-4 py-2">
|
|
<div className="flex gap-2 overflow-x-auto no-scrollbar">
|
|
{items.map((it) => {
|
|
const key = `${it.label}-${it.path || it.href}`;
|
|
// Fix: Always use exact match to prevent first submenu from being always active
|
|
const isActive = !!it.path && pathname === it.path;
|
|
const cls = [
|
|
'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 border text-sm whitespace-nowrap',
|
|
'focus:outline-none focus:ring-0 focus:shadow-none',
|
|
isActive ? 'bg-accent text-accent-foreground' : 'hover:bg-accent hover:text-accent-foreground',
|
|
].join(' ');
|
|
|
|
if (it.mode === 'spa' && it.path) {
|
|
return (
|
|
<Link key={key} to={it.path} className={cls} data-discover>
|
|
{it.label}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
if (it.mode === 'bridge' && it.href) {
|
|
return (
|
|
<a key={key} href={it.href} className={cls} data-discover>
|
|
{it.label}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |