diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx index e1296b4..a1e17de 100644 --- a/admin-spa/src/App.tsx +++ b/admin-spa/src/App.tsx @@ -262,12 +262,17 @@ function AddonRoute({ config }: { config: any }) { return ; } -function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRef }: { onFullscreen: () => void; fullscreen: boolean; showToggle?: boolean; scrollContainerRef?: React.RefObject }) { +function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRef, onVisibilityChange }: { onFullscreen: () => void; fullscreen: boolean; showToggle?: boolean; scrollContainerRef?: React.RefObject; onVisibilityChange?: (visible: boolean) => void }) { const [siteTitle, setSiteTitle] = React.useState((window as any).wnw?.siteTitle || 'WooNooW'); const [isVisible, setIsVisible] = React.useState(true); const lastScrollYRef = React.useRef(0); const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false; + // Notify parent of visibility changes + React.useEffect(() => { + onVisibilityChange?.(isVisible); + }, [isVisible, onVisibilityChange]); + // Listen for store settings updates React.useEffect(() => { const handleStoreUpdate = (event: CustomEvent) => { @@ -440,6 +445,7 @@ function Shell() { const isDesktop = useIsDesktop(); const location = useLocation(); const scrollContainerRef = React.useRef(null); + const [isHeaderVisible, setIsHeaderVisible] = React.useState(true); // Check if standalone mode - force fullscreen and hide toggle const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false; @@ -447,13 +453,16 @@ function Shell() { // Check if current route is dashboard const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard'); + + // Check if current route is More page (no submenu needed) + const isMorePage = location.pathname === '/more'; return ( <> {!isStandalone && } {!isStandalone && }
-
+
{fullscreen ? ( isDesktop ? (
@@ -472,11 +481,11 @@ function Shell() {
) : (
- {isDashboardRoute ? ( - + {!isMorePage && (isDashboardRoute ? ( + ) : ( - - )} + + ))}
diff --git a/admin-spa/src/components/nav/DashboardSubmenuBar.tsx b/admin-spa/src/components/nav/DashboardSubmenuBar.tsx index 7bbfb17..a8c090e 100644 --- a/admin-spa/src/components/nav/DashboardSubmenuBar.tsx +++ b/admin-spa/src/components/nav/DashboardSubmenuBar.tsx @@ -9,9 +9,9 @@ import { __ } from '@/lib/i18n'; import { useQueryClient } from '@tanstack/react-query'; import type { SubItem } from '@/nav/tree'; -type Props = { items?: SubItem[]; fullscreen?: boolean }; +type Props = { items?: SubItem[]; fullscreen?: boolean; headerVisible?: boolean }; -export default function DashboardSubmenuBar({ items = [], fullscreen = false }: Props) { +export default function DashboardSubmenuBar({ items = [], fullscreen = false, headerVisible = true }: Props) { const { period, setPeriod, useDummy } = useDashboardPeriod(); const { pathname } = useLocation(); const queryClient = useQueryClient(); @@ -22,10 +22,11 @@ export default function DashboardSubmenuBar({ items = [], fullscreen = false }: if (items.length === 0) return null; - // Calculate top position based on fullscreen state - // Fullscreen: top-16 (below 64px header) - // Normal: top-[88px] (below 40px WP admin bar + 48px menu bar) - const topClass = fullscreen ? 'top-0' : 'top-[calc(7rem+32px)]'; + // Calculate top position based on fullscreen state and header visibility + // Fullscreen with header visible: top-16 (below 64px header) + // Fullscreen with header hidden: top-0 (replace header position) + // Normal: top-[calc(7rem+32px)] (below WP admin bar + menu bar) + const topClass = fullscreen ? (headerVisible ? 'top-16' : 'top-0') : 'top-[calc(7rem+32px)]'; return (
diff --git a/admin-spa/src/components/nav/SubmenuBar.tsx b/admin-spa/src/components/nav/SubmenuBar.tsx index 3fdd945..a08a03e 100644 --- a/admin-spa/src/components/nav/SubmenuBar.tsx +++ b/admin-spa/src/components/nav/SubmenuBar.tsx @@ -2,19 +2,20 @@ import React from 'react'; import { Link, useLocation } from 'react-router-dom'; import type { SubItem } from '@/nav/tree'; -type Props = { items?: SubItem[]; fullscreen?: boolean }; +type Props = { items?: SubItem[]; fullscreen?: boolean; headerVisible?: boolean }; -export default function SubmenuBar({ items = [], fullscreen = false }: Props) { +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-16 (below 64px header) - // Normal: top-[88px] (below 40px WP admin bar + 48px menu bar) - const topClass = fullscreen ? 'top-0' : 'top-[calc(7rem+32px)]'; + // Calculate top position based on fullscreen state and header visibility + // Fullscreen with header visible: top-16 (below 64px header) + // Fullscreen with header hidden: top-0 (replace header position) + // Normal: top-[calc(7rem+32px)] (below WP admin bar + menu bar) + const topClass = fullscreen ? (headerVisible ? 'top-16' : 'top-0') : 'top-[calc(7rem+32px)]'; return (
diff --git a/admin-spa/src/routes/Orders/index.tsx b/admin-spa/src/routes/Orders/index.tsx index 86cdb7d..085f412 100644 --- a/admin-spa/src/routes/Orders/index.tsx +++ b/admin-spa/src/routes/Orders/index.tsx @@ -5,6 +5,7 @@ import { Filter, PackageOpen, Trash2 } from 'lucide-react'; import { ErrorCard } from '@/components/ErrorCard'; import { getPageLoadErrorMessage } from '@/lib/errorHandling'; import { __ } from '@/lib/i18n'; +import { useFABConfig } from '@/hooks/useFABConfig'; import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'; import { AlertDialog, @@ -85,6 +86,7 @@ function StatusBadge({ value }: { value?: string }) { } export default function Orders() { + useFABConfig('orders'); // Add FAB for creating orders const initial = getQuery(); const [page, setPage] = useState(Number(initial.page ?? 1) || 1); const [status, setStatus] = useState(initial.status || undefined);