fix: Reactive store name in header + sticky header positioning
1. Store Name Updates in Header ✅ Problem: Changing store name doesn't update topbar title Solution: Custom event system Flow: - User saves store settings - Dispatch 'woonoow:store:updated' event with store_name - Header component listens for event - Updates title in real-time Files: - App.tsx: useState + useEffect listener - Store.tsx: Dispatch event on save success 2. Sticky Header Positioning ✅ Problem 1: Sticky header hidden under submenu Solution: top-[49px] instead of top-0 Problem 2: Sticky header not edge-to-edge Solution: Negative margins to break out of container Before: <div className="sticky top-0 ..."> <div className="container ..."> After: <div className="sticky top-[49px] -mx-4 px-4 lg:-mx-6 lg:px-6"> <div className="container ..."> Responsive: - Mobile: -mx-4 px-4 (breaks out of 16px padding) - Desktop: -mx-6 px-6 (breaks out of 24px padding) Result: ✅ Sticky header below submenu (49px offset) ✅ Edge-to-edge background ✅ Content still centered in container ✅ Works in fullscreen, standalone, and wp-admin modes 3. Layout Structure Parent: space-y-6 lg:p-6 pb-6 ├─ Sticky Header: -mx to break out, top-[49px] └─ Content: container max-w-5xl This ensures: - Sticky header spans full width - Content stays centered - Proper spacing maintained Files Modified: - App.tsx: Reactive site title - Store.tsx: Dispatch update event - SettingsLayout.tsx: Fixed sticky positioning
This commit is contained in:
@@ -257,9 +257,21 @@ function AddonRoute({ config }: { config: any }) {
|
||||
}
|
||||
|
||||
function Header({ onFullscreen, fullscreen, showToggle = true }: { onFullscreen: () => void; fullscreen: boolean; showToggle?: boolean }) {
|
||||
const siteTitle = (window as any).wnw?.siteTitle || 'WooNooW';
|
||||
const [siteTitle, setSiteTitle] = React.useState((window as any).wnw?.siteTitle || 'WooNooW');
|
||||
const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false;
|
||||
|
||||
// Listen for store settings updates
|
||||
React.useEffect(() => {
|
||||
const handleStoreUpdate = (event: CustomEvent) => {
|
||||
if (event.detail?.store_name) {
|
||||
setSiteTitle(event.detail.store_name);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('woonoow:store:updated' as any, handleStoreUpdate);
|
||||
return () => window.removeEventListener('woonoow:store:updated' as any, handleStoreUpdate);
|
||||
}, []);
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await fetch((window.WNW_CONFIG?.restUrl || '') + '/auth/logout', {
|
||||
@@ -406,7 +418,7 @@ function Shell() {
|
||||
{isDashboardRoute ? (
|
||||
<DashboardSubmenuBar items={main.children} fullscreen={true} />
|
||||
) : (
|
||||
<SubmenuBar items={main.children} />
|
||||
<SubmenuBar items={main.children} fullscreen={true} />
|
||||
)}
|
||||
<div className="p-4">
|
||||
<AppRoutes />
|
||||
@@ -419,7 +431,7 @@ function Shell() {
|
||||
{isDashboardRoute ? (
|
||||
<DashboardSubmenuBar items={main.children} fullscreen={true} />
|
||||
) : (
|
||||
<SubmenuBar items={main.children} />
|
||||
<SubmenuBar items={main.children} fullscreen={true} />
|
||||
)}
|
||||
<main className="flex-1 p-4 overflow-auto">
|
||||
<AppRoutes />
|
||||
@@ -432,7 +444,7 @@ function Shell() {
|
||||
{isDashboardRoute ? (
|
||||
<DashboardSubmenuBar items={main.children} fullscreen={false} />
|
||||
) : (
|
||||
<SubmenuBar items={main.children} />
|
||||
<SubmenuBar items={main.children} fullscreen={false} />
|
||||
)}
|
||||
<main className="flex-1 p-4 overflow-auto">
|
||||
<AppRoutes />
|
||||
|
||||
Reference in New Issue
Block a user