4255464dca
Created cleaner layout architecture based on user feedback: ✅ Standalone Authentication Pages: - Created AuthLayout component for login/logout pages - Login page now standalone without sidebar/header - Logout page uses clean AuthLayout 🎯 Improved Sidebar Design: - Moved profile, theme toggle, and notifications to sidebar - Added user profile section with avatar and role - Reorganized navigation with main nav + bottom nav - Proper flexbox layout for full-height sidebar 🔍 Dashboard-Specific Search: - Search bar only appears on dashboard (showSearch prop) - Removed cluttered header from other pages - Clean, focused experience per page type 📱 Better Information Architecture: - Profile info moved from header to sidebar - Theme toggle integrated into profile section - Notifications and settings in bottom nav - Consistent sidebar across all authenticated pages 🎨 Visual Improvements: - Proper flexbox layout for sidebar sections - User avatar and role display in profile section - Clean separation between main nav and utility nav - Responsive design maintained Result: Clean login experience + consistent authenticated layout! 🚀
36 lines
No EOL
1.1 KiB
JavaScript
36 lines
No EOL
1.1 KiB
JavaScript
import { useEffect } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
import AuthLayout from '../components/AuthLayout';
|
|
|
|
export default function Logout() {
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
// Clear the auth token
|
|
localStorage.removeItem('auth_token');
|
|
|
|
// Redirect to login after a short delay
|
|
setTimeout(() => {
|
|
router.push('/login');
|
|
}, 2000);
|
|
}, [router]);
|
|
|
|
return (
|
|
<AuthLayout>
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="text-6xl mb-4">👋</div>
|
|
<h2 className="text-2xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Signing you out...
|
|
</h2>
|
|
<p style={{ color: 'var(--text-secondary)' }}>
|
|
You will be redirected to the login page shortly.
|
|
</p>
|
|
<div className="mt-4">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto" style={{ borderColor: 'var(--text-accent)' }}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthLayout>
|
|
);
|
|
}
|