File size: 2,249 Bytes
ff92aff 2251e03 ff92aff 2251e03 ff92aff 009a97a cbf89ee 2251e03 cbf89ee 2251e03 ff92aff 2251e03 ff92aff 009a97a ff92aff cbf89ee | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '../hooks/useTheme.ts';
import { useAuth } from '../hooks/index.ts';
import { logoutAndNotify } from '../utils/index.ts';
import ThemeToggle from '../components/common/ThemeToggle.tsx';
import Navigation from '../components/navigation/Navigation.tsx';
import logo from '../../logo.png';
type MainLayoutProps = {
children?: any;
};
const MainLayout = ({ children }: MainLayoutProps) => {
const { theme } = useTheme();
const { isAuthenticated } = useAuth();
const navigate = useNavigate();
const handleLogout = () => {
logoutAndNotify();
navigate('/');
};
useEffect(() => {
// Ensure theme is applied on mount
const root = document.documentElement;
if (theme === 'dark') {
root.classList.add('dark');
} else {
root.classList.remove('dark');
}
}, [theme]);
return (
<div className="min-h-screen bg-white dark:bg-black transition-colors duration-200 relative">
{/* Top bar */}
<header className="fixed top-0 left-0 right-0 z-50">
<div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
{/* Logo + title */}
<div className="flex items-left gap-3">
<img
src={logo}
alt="NLP Project Debater"
className="h-9 w-auto rounded-md shadow-lg"
/>
</div>
{/* Center navigation */}
<div className="flex-1 flex justify-center">
<Navigation />
</div>
{/* Right controls */}
<div className="flex items-center gap-2">
{isAuthenticated && (
<button
onClick={handleLogout}
className="px-3 py-2 text-sm font-medium rounded-lg bg-red-500 hover:bg-red-600 text-white transition-all duration-200 hover:scale-105"
>
Logout
</button>
)}
<ThemeToggle />
</div>
</div>
</header>
{/* Push content below fixed header */}
<main className="pt-20">
{children}
</main>
</div>
);
};
export default MainLayout;
|