feat: Auto-enable fullscreen in standalone mode, hide toggle button
This commit is contained in:
@@ -257,13 +257,14 @@ function AddonRoute({ config }: { config: any }) {
|
|||||||
return <Component {...(config.props || {})} />;
|
return <Component {...(config.props || {})} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function Header({ onFullscreen, fullscreen }: { onFullscreen: () => void; fullscreen: boolean }) {
|
function Header({ onFullscreen, fullscreen, showToggle = true }: { onFullscreen: () => void; fullscreen: boolean; showToggle?: boolean }) {
|
||||||
const siteTitle = (window as any).wnw?.siteTitle || 'WooNooW';
|
const siteTitle = (window as any).wnw?.siteTitle || 'WooNooW';
|
||||||
return (
|
return (
|
||||||
<header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}>
|
<header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}>
|
||||||
<div className="font-semibold">{siteTitle}</div>
|
<div className="font-semibold">{siteTitle}</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="text-sm opacity-70 hidden sm:block">{window.WNW_API?.isDev ? 'Dev Server' : 'Production'}</div>
|
<div className="text-sm opacity-70 hidden sm:block">{window.WNW_API?.isDev ? 'Dev Server' : 'Production'}</div>
|
||||||
|
{showToggle && (
|
||||||
<button
|
<button
|
||||||
onClick={onFullscreen}
|
onClick={onFullscreen}
|
||||||
className="inline-flex items-center gap-2 border rounded-md px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
|
className="inline-flex items-center gap-2 border rounded-md px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
|
||||||
@@ -272,6 +273,7 @@ function Header({ onFullscreen, fullscreen }: { onFullscreen: () => void; fullsc
|
|||||||
{fullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
|
{fullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
|
||||||
<span className="hidden sm:inline">{fullscreen ? 'Exit' : 'Fullscreen'}</span>
|
<span className="hidden sm:inline">{fullscreen ? 'Exit' : 'Fullscreen'}</span>
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
@@ -341,17 +343,21 @@ function Shell() {
|
|||||||
const isDesktop = useIsDesktop();
|
const isDesktop = useIsDesktop();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
|
// Check if standalone mode - force fullscreen and hide toggle
|
||||||
|
const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false;
|
||||||
|
const fullscreen = isStandalone ? true : on;
|
||||||
|
|
||||||
// Check if current route is dashboard
|
// Check if current route is dashboard
|
||||||
const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard');
|
const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard');
|
||||||
const SubmenuComponent = isDashboardRoute ? DashboardSubmenuBar : SubmenuBar;
|
const SubmenuComponent = isDashboardRoute ? DashboardSubmenuBar : SubmenuBar;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ShortcutsBinder onToggle={toggle} />
|
{!isStandalone && <ShortcutsBinder onToggle={toggle} />}
|
||||||
<CommandPalette toggleFullscreen={toggle} />
|
{!isStandalone && <CommandPalette toggleFullscreen={toggle} />}
|
||||||
<div className={`flex flex-col min-h-screen ${on ? 'woonoow-fullscreen-root' : ''}`}>
|
<div className={`flex flex-col min-h-screen ${fullscreen ? 'woonoow-fullscreen-root' : ''}`}>
|
||||||
<Header onFullscreen={toggle} fullscreen={on} />
|
<Header onFullscreen={toggle} fullscreen={fullscreen} showToggle={!isStandalone} />
|
||||||
{on ? (
|
{fullscreen ? (
|
||||||
isDesktop ? (
|
isDesktop ? (
|
||||||
<div className="flex flex-1 min-h-0">
|
<div className="flex flex-1 min-h-0">
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
|
|||||||
Reference in New Issue
Block a user