From 7cc5598fbfc1ecf804643653ecd06937fe15da10 Mon Sep 17 00:00:00 2001
From: Mathis <mathis.balet@gmail.com>
Date: Fri, 11 Apr 2025 10:36:30 +0200
Subject: [PATCH] Ajout du responsive header

---
 Front-end/src/components/Header.jsx | 31 +++++++++++++++++------
 Front-end/src/pages/Login.jsx       | 38 +++++++++++++++++------------
 Front-end/src/pages/Signup.jsx      |  4 +--
 3 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/Front-end/src/components/Header.jsx b/Front-end/src/components/Header.jsx
index 78ea610..767ca68 100644
--- a/Front-end/src/components/Header.jsx
+++ b/Front-end/src/components/Header.jsx
@@ -8,9 +8,11 @@ function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   return (
-    <header className="bg-white shadow-md sticky">
-      <div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center ">
-        <Link to="/" className="text-2xl font-bold text-indigo-600">VigiMétéo</Link>
+    <header className="bg-white shadow-md ">
+      <div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
+        <Link to="/" className="text-2xl font-bold text-indigo-600">
+          VigiMétéo
+        </Link>
         <button
           className="sm:hidden text-gray-600 hover:text-indigo-600"
           onClick={() => setIsMenuOpen(!isMenuOpen)}
@@ -21,22 +23,31 @@ function Header() {
         <nav
           className={`${
             isMenuOpen ? "block" : "hidden"
-          } absolute top-16 left-0 w-full bg-white shadow-md sm:static sm:w-auto sm:flex sm:gap-6 sm:shadow-none z-50`}
+          } absolute  z-[1000] top-16 left-0 w-full bg-white shadow-md sm:static sm:w-auto sm:z-auto sm:flex sm:gap-6 sm:shadow-none`}
         >
           <ul className="flex flex-col sm:flex-row gap-4 sm:gap-6 text-gray-600 p-4 sm:p-0">
             <li>
-              <Link to="/" className="text-gray-600 hover:text-indigo-600">
+              <Link
+                to="/"
+                onClick={() => setIsMenuOpen(false)}
+                className="text-gray-600 hover:text-indigo-600"
+              >
                 Accueil
               </Link>
             </li>
             <li>
-              <Link to="/about" className="text-gray-600 hover:text-indigo-600">
+              <Link
+                to="/about"
+                onClick={() => setIsMenuOpen(false)}
+                className="text-gray-600 hover:text-indigo-600"
+              >
                 À propos
               </Link>
             </li>
             <li>
               <Link
                 to="/gestion"
+                onClick={() => setIsMenuOpen(false)}
                 className="text-gray-600 hover:text-indigo-600"
               >
                 Gestion
@@ -47,6 +58,7 @@ function Header() {
                 <li className="sm:hidden">
                   <Link
                     to="/login"
+                    onClick={() => setIsMenuOpen(false)}
                     className="hover:text-indigo-600 flex items-center gap-2"
                   >
                     <LogIn size={20} />
@@ -56,6 +68,7 @@ function Header() {
                 <li className="sm:hidden">
                   <Link
                     to="/signup"
+                    onClick={() => setIsMenuOpen(false)}
                     className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
                   >
                     <UserPlus size={20} />
@@ -68,6 +81,7 @@ function Header() {
                 <li className="sm:hidden">
                   <Link
                     to="/settings"
+                    onClick={()=>setIsMenuOpen(false)}
                     className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
                   >
                     <Settings size={20} />
@@ -89,9 +103,10 @@ function Header() {
           </ul>
         </nav>
         {!token ? (
-          <div className="hidden sm:flex gap-4">
+          <div className="hidden sm:flex gap-4 ">
             <Link
               to="/login"
+              onClick={()=>setIsMenuOpen(false)}
               className="hover:text-indigo-600 flex items-center gap-2"
             >
               <LogIn size={20} />
@@ -99,6 +114,7 @@ function Header() {
             </Link>
             <Link
               to="/signup"
+              onClick={()=>setIsMenuOpen(false)}
               className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
             >
               <UserPlus size={20} />
@@ -109,6 +125,7 @@ function Header() {
           <div className="hidden sm:flex gap-4">
             <Link
               to="/settings"
+              onClick={()=>setIsMenuOpen(false)}
               className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
             >
               <Settings size={20} />
diff --git a/Front-end/src/pages/Login.jsx b/Front-end/src/pages/Login.jsx
index 7885384..7a06d01 100644
--- a/Front-end/src/pages/Login.jsx
+++ b/Front-end/src/pages/Login.jsx
@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
-import { Mail, Lock } from 'lucide-react';
-import { useNavigate, Link } from 'react-router-dom';
-import axios from 'axios'; // Assurez-vous d'avoir axios importé
-import { useAuth } from '../AuthContext';
+import React, { useState } from "react";
+import { Mail, Lock } from "lucide-react";
+import { useNavigate, Link } from "react-router-dom";
+import axios from "axios"; // Assurez-vous d'avoir axios importé
+import { useAuth } from "../AuthContext";
 import { API_BASE_URL } from "../config";
 
 function Login() {
   const [formData, setFormData] = useState({
-    email: '',
-    password: ''
+    email: "",
+    password: "",
   });
   const { login } = useAuth(); // Utilisation du hook useAuth pour accéder à la fonction login
   const navigate = useNavigate(); // Initialisation de useNavigate
@@ -17,7 +17,7 @@ function Login() {
     const { name, value } = e.target;
     setFormData((prev) => ({
       ...prev,
-      [name]: value
+      [name]: value,
     }));
   };
 
@@ -42,18 +42,20 @@ function Login() {
         login(data.token);
 
         // Rediriger vers la page d'accueil après la connexion
-        navigate('/');
+        navigate("/");
       } else {
-        console.error('Token manquant dans la réponse');
+        console.error("Token manquant dans la réponse");
       }
     } catch (error) {
-      console.error('Erreur lors de la connexion', error);
+      console.error("Erreur lors de la connexion", error);
     }
   };
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-12 px-4 sm:px-6 lg:px-8">
-      <div className="w-96 bg-white rounded-lg shadow-md p-6 mx-auto">
-        <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">Connexion</h2>
+      <div className="md:w-96 w-full bg-white rounded-lg shadow-md p-6 mx-auto">
+        <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">
+          Connexion
+        </h2>
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Email */}
           <div>
@@ -109,8 +111,14 @@ function Login() {
           {/* Lien vers la page d'inscription */}
           <div className="mt-4 text-sm text-center">
             <p>
-              Vous n'avez pas de compte ? 
-              <Link to="/signup" className="text-indigo-600 hover:text-indigo-700 font-medium"> Inscrivez-vous ici</Link>
+              Vous n'avez pas de compte ?
+              <Link
+                to="/signup"
+                className="text-indigo-600 hover:text-indigo-700 font-medium"
+              >
+                {" "}
+                Inscrivez-vous ici
+              </Link>
             </p>
           </div>
         </form>
diff --git a/Front-end/src/pages/Signup.jsx b/Front-end/src/pages/Signup.jsx
index d3b3eb3..e18140f 100644
--- a/Front-end/src/pages/Signup.jsx
+++ b/Front-end/src/pages/Signup.jsx
@@ -12,7 +12,7 @@ function Signup() {
     password: '',
     confirmPassword: ''
   });
-  const navigate = useNavigate(); // Initialisation de useNavigate
+  const navigate = useNavigate();
 
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -56,7 +56,7 @@ function Signup() {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-12 px-4 sm:px-6 lg:px-8">
-      <div className="w-96 bg-white rounded-lg shadow-md p-6 mx-auto">
+      <div className="w-full md:w-96 bg-white rounded-lg shadow-md p-6 mx-auto">
         <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">Inscription</h2>
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Formulaire (Nom, Prénom, Sexe, Email, Mot de passe) */}