Files
WooNooW/admin-spa/src/contexts/AppContext.tsx
dwindown 796e661808 fix: Remove top padding gap and add exit/logout to More page
Fixed 2 issues:

1. Top Padding Gap (pt-16 → removed)
   Problem: Mobile fullscreen had pt-16 padding creating gap at top
   Cause: Redundant padding when header is hidden in fullscreen
   Solution: Removed pt-16 from mobile fullscreen layout

   Before:
   <div className="flex flex-1 flex-col min-h-0 pt-16">

   After:
   <div className="flex flex-1 flex-col min-h-0">

   Result: No gap, submenu starts at top-0 ✓

2. Exit/Logout Buttons in More Page
   Problem: No way to exit fullscreen or logout from mobile
   Solution: Added context-aware button to More page

   WP-Admin Mode:
   - Shows "Exit Fullscreen" button
   - Exits fullscreen mode (back to normal WP-admin)

   Standalone Mode (PWA):
   - Shows "Logout" button
   - Redirects to WP-admin login

   Implementation:
   - Created AppContext to provide isStandalone and exitFullscreen
   - Wrapped Shell with AppProvider
   - More page uses useApp() to get context
   - Conditional rendering based on mode

Files Modified:
- App.tsx: Removed pt-16, added AppProvider
- AppContext.tsx: New context for app-level state
- More/index.tsx: Added Exit/Logout button

Result:
 No top gap in mobile fullscreen
 Exit fullscreen available in WP-admin mode
 Logout available in standalone mode
 Clean, functional mobile UX! 🎯
2025-11-06 23:22:18 +07:00

33 lines
721 B
TypeScript

import React, { createContext, useContext, ReactNode } from 'react';
interface AppContextType {
isStandalone: boolean;
exitFullscreen?: () => void;
}
const AppContext = createContext<AppContextType | undefined>(undefined);
export function AppProvider({
children,
isStandalone,
exitFullscreen
}: {
children: ReactNode;
isStandalone: boolean;
exitFullscreen?: () => void;
}) {
return (
<AppContext.Provider value={{ isStandalone, exitFullscreen }}>
{children}
</AppContext.Provider>
);
}
export function useApp() {
const context = useContext(AppContext);
if (context === undefined) {
throw new Error('useApp must be used within an AppProvider');
}
return context;
}