cm862sz/zkt26
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout du responsive header

Browse Source
This commit is contained in:
Mathis 2025-04-11 10:36:30 +02:00
parent 6f054bc707
commit 7cc5598fbf
3 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Front-end/src/components/Header.jsx
View File

@ -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} />

36
Front-end/src/pages/Login.jsx
View File

@ -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>
@ -110,7 +112,13 @@ function Login() {
<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>
<Link
to="/signup"
className="text-indigo-600 hover:text-indigo-700 font-medium"
>
{" "}
Inscrivez-vous ici
</Link>
</p>
</div>
</form>

4
Front-end/src/pages/Signup.jsx
View File

@ -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) */}