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! 🎯
This commit is contained in:
dwindown
2025-11-06 23:22:18 +07:00
parent 0dace90597
commit 796e661808
3 changed files with 69 additions and 4 deletions

View File

@@ -1,8 +1,10 @@
import React, { useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { Tag, Settings as SettingsIcon, ChevronRight } from 'lucide-react';
import { Tag, Settings as SettingsIcon, ChevronRight, Minimize2, LogOut } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { usePageHeader } from '@/contexts/PageHeaderContext';
import { useApp } from '@/contexts/AppContext';
import { Button } from '@/components/ui/button';
interface MenuItem {
icon: React.ReactNode;
@@ -29,12 +31,18 @@ const menuItems: MenuItem[] = [
export default function MorePage() {
const navigate = useNavigate();
const { setPageHeader, clearPageHeader } = usePageHeader();
const { isStandalone, exitFullscreen } = useApp();
useEffect(() => {
setPageHeader(__('More'));
return () => clearPageHeader();
}, [setPageHeader, clearPageHeader]);
const handleLogout = () => {
// Clear auth and redirect to login
window.location.href = window.WNW_CONFIG?.wpAdminUrl || '/wp-admin';
};
return (
<div className="min-h-screen bg-background pb-20">
{/* Remove inline header - use PageHeader component instead */}
@@ -65,6 +73,29 @@ export default function MorePage() {
</button>
))}
</div>
{/* Exit Fullscreen / Logout */}
<div className="px-4 py-6">
{isStandalone ? (
<Button
onClick={handleLogout}
variant="outline"
className="w-full justify-start gap-3"
>
<LogOut className="w-5 h-5" />
{__('Logout')}
</Button>
) : (
<Button
onClick={exitFullscreen}
variant="outline"
className="w-full justify-start gap-3"
>
<Minimize2 className="w-5 h-5" />
{__('Exit Fullscreen')}
</Button>
)}
</div>
</div>
);
}