Maj Header and add logo svg

frontend/src/components/Header.jsx

@@ -24,6 +24,8 @@ import ArticleIcon from "@mui/icons-material/Article";
 import InfoIcon from "@mui/icons-material/Info";
 import ContactMailIcon from "@mui/icons-material/ContactMail";
 import WorkIcon from "@mui/icons-material/Work";
+import Logo from "../assets/logo-in3.svg";
+import LogoM from "../assets/logo-in3-mobil.svg";
 
 const Header = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -64,7 +66,7 @@ const Header = () => {
   const commonButtonStyles = {
     transition: "color 0.3s",
     position: "relative",
-    "&:hover": { color: "#00bcd4" },
+    "&:hover": { color: " #00bcd4" },
     "&:after": {
       content: '""',
       position: "absolute",
@@ -72,7 +74,7 @@ const Header = () => {
       height: "2px",
       bottom: 0,
       left: 0,
-      backgroundColor: "#00bcd4",
+      backgroundColor: " #00bcd4",
       transition: "width 0.3s",
     },
     "&:hover:after": {
@@ -86,7 +88,7 @@ const Header = () => {
       color="transparent"
       elevation={0}
       sx={{
-        background: "linear-gradient(to right, #0e467f, #00bcd4)",
+        background: "linear-gradient(to right, #294A9A, #3158b3)",
         color: "white",
         transition: "all 0.3s ease",
       }}
@@ -98,13 +100,16 @@ const Header = () => {
           color="inherit"
           aria-label="menu"
           onClick={toggleDrawer(true)}
-          sx={{ display: { xs: "block", md: "none" } }}
+          sx={{ 
+            display: { xs: "block", md: "none" },
+            color: " #ffffff"
+           }}
         >
           <MenuIcon />
         </IconButton>
 
         {/* Logo as Home Link */}
-        <Typography
+        {/* <Typography
           variant="h6"
           component={Link}
           to="/"
@@ -120,7 +125,29 @@ const Header = () => {
           }}
         >
           Mon Site React
-        </Typography>
+        </Typography> */}
+
+                {/* Logo */}
+                <Box
+          component={Link}
+          to="/"
+          sx={{
+            flexGrow: 1,
+            textAlign: { xs: "center", md: "left" },
+            alignItems: "center",
+            textDecoration: "none",
+            gap: 1,
+          }}
+        >
+          <img
+            src={Logo}
+            alt="Logo"
+            style={{
+              height: "40px",
+              width: "auto",
+            }}
+          />
+        </Box>
 
         {/* Navigation Links */}
         <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
@@ -189,7 +216,7 @@ const Header = () => {
                 ...commonButtonStyles,
               }}
             >
-              Articles
+              Réalisations
             </Button>
           <Button
             component={Link}
@@ -253,10 +280,10 @@ const Header = () => {
                   borderColor: "white",
                 },
                 "&:hover fieldset": {
-                  borderColor: "#00bcd4",
+                  borderColor: " #00bcd4",
                 },
                 "&.Mui-focused fieldset": {
-                  borderColor: "#00bcd4",
+                  borderColor: " #00bcd4",
                 },
               },
             }}
@@ -270,12 +297,14 @@ const Header = () => {
           </IconButton>
         </Box>
 
+
+
         {/* Drawer for mobile */}
         <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
           <Box
             sx={{
               width: 250,
-              backgroundColor: "#f5f5f5",
+              backgroundColor: " #f5f5f5",
               height: "100%",
               padding: 2,
             }}
@@ -283,6 +312,25 @@ const Header = () => {
             onClick={toggleDrawer(false)}
             onKeyDown={toggleDrawer(false)}
           >
+            <Box
+          
+          sx={{
+            display:"block",
+            textAlign: "center",
+            
+            
+          
+          }}
+        >
+          <img
+            src={LogoM}
+            alt="Logo"
+            style={{
+              height: "40px",
+              width: "auto",
+            }}
+          />
+        </Box>
             <Typography
               variant="h6"
               sx={{ textAlign: "center", marginBottom: 2 }}
@@ -297,7 +345,10 @@ const Header = () => {
                 to="/"
                 selected={location.pathname === "/"}
               >
-                <HomeIcon sx={{ marginRight: 1 }} />
+                <HomeIcon sx={{ 
+                    marginRight: 1, 
+                  }}
+                />
                 <ListItemText primary="Accueil" />
               </ListItem>
               <ListItem
@@ -334,7 +385,7 @@ const Header = () => {
                 selected={location.pathname === "/posts"}
               >
                 <ArticleIcon sx={{ marginRight: 1 }} />
-                <ListItemText primary="Articles" />
+                <ListItemText primary="Réalisations" />
               </ListItem>
               <ListItem
                 button