Navbar.jsx

import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { CheckCircle, Sun, Moon } from "lucide-react";
import { useTheme } from "@context/ThemeContext";

const Navbar = () => {
    const [isAuthenticated, setIsAuthenticated] = useState(!!localStorage.getItem("user"));
    const navigate = useNavigate();
    const { theme, toggleTheme } = useTheme();

    useEffect(() => {

        const handleStorageChange = () => {
            setIsAuthenticated(!!localStorage.getItem("user"));
        };


        window.addEventListener("storage", handleStorageChange);

        return () => {

            window.removeEventListener("storage", handleStorageChange);
        };
    }, []);

    const handleLogout = () => {
        localStorage.removeItem("user");
        setIsAuthenticated(false);
        navigate("/");
    };

    return (
        <nav className="bg-white dark:bg-gray-900 shadow-md transition-colors">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between h-16">
                    <div className="flex items-center">
                        <Link to="/home" className="flex items-center gap-2">
                            <CheckCircle className="h-8 w-8 text-violet-600 dark:text-violet-400" />
                            <span className="text-xl font-semibold text-gray-900 dark:text-white">TaskMaster</span>
                        </Link>
                    </div>

                    <div className="flex items-center gap-6">
                    {isAuthenticated ? (
                        <Link
                            to="/home"
                            className="text-gray-700 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 px-3 py-2 rounded-md text-sm font-medium"
                        >
                            Dashboard
                        </Link>) : (<p></p>)}
                    

                    
                        

                        {/* Bouton Light/Dark Mode */}
                        <button onClick={toggleTheme} className="p-2 rounded-md bg-gray-200 dark:bg-gray-700">
                            {theme === "light" ? <Moon className="h-5 w-5 text-gray-700" /> : <Sun className="h-5 w-5 text-yellow-400" />}
                        </button>

                        <div className="flex items-center gap-2">
                            {isAuthenticated ? (

                                <button
                                    onClick={handleLogout}
                                    className="bg-red-500 text-white hover:bg-red-600 px-4 py-2 rounded-md text-sm font-medium"
                                >
                                    Logout
                                </button>
                            ) : (

                                <>
                                    <Link
                                        to="/"
                                        className="text-gray-700 dark:text-white hover:text-violet-600 dark:hover:text-violet-400 px-3 py-2 rounded-md text-sm font-medium"
                                    >
                                        Login
                                    </Link>
                                    <Link
                                        to="/signup"
                                        className="bg-violet-600 text-white hover:bg-violet-700 px-4 py-2 rounded-md text-sm font-medium"
                                    >
                                        Signup
                                    </Link>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    );
};

export default Navbar;