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:
dwindown
2025-11-06 14:44:37 +07:00
parent 40fb364035
commit 2b3452e9f2
5 changed files with 25 additions and 17 deletions

View File

@@ -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 />