fix pb couleur / navbar

Site Web/src/App.js

@@ -7,6 +7,7 @@ import Home from './pages/Home';
 import Tendances from './pages/Tendances';
 import Decouvrir from './pages/Decouvrir';
 import Inscription from './pages/Inscription';
+import "./styles/index.scss"
 
 function App() {
   return (

Site Web/src/components/Navbar.js

@@ -1,47 +1,62 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-import "../styles/components/_navbar.scss"
+import PP  from "../assets/img/unknown.png";
 
 const Navbar = () => {
     return (
+        <header>
             <nav>
-                <ul>
+                <ul className="partie-gauche-nav">
                     <li className="logo">
                         <img src=''alt='Logo'/>
                     </li>
+                </ul>
+                <ul>
+                    <li  className={(nav) => (nav.isActive ? "nav-active" : "")}>
                         <NavLink to="/Decouvrir" className='b'>
-                        <li>
                             <span>Découvrir</span>
-                        </li>
                         </NavLink>
-                    <NavLink to="/Home" className='b'>
+                    </li>
+                
                     <li >
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="home">
+                        <NavLink to="/Home" className={'b' + ((nav) => (nav.isActive ? "nav-active" : ""))}>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="svg-home">
                                 <path stroke="black" fill='black' d="M256 73.825a182.18 182.18 0 0 0-182.18 182.18c0 100.617 81.567 182.17 182.18 182.17a182.175 182.175 0 1 0 0-364.35zm76.636 161.579h-12.037v91.503a18.908 18.908 0 0 1-18.896 18.904h-26.78v-53.56a6.299 6.299 0 0 0-6.297-6.294H232.4a6.3 6.3 0 0 0-6.302 6.294v53.56h-26.771a18.91 18.91 0 0 1-18.906-18.904v-91.503h-11.97a7.879 7.879 0 0 1-5.071-13.905l82.055-69.039a7.89 7.89 0 0 1 10.142 0l81.479 68.547a7.88 7.88 0 0 1-4.421 14.396z" data-name="Home"/>
                             </svg>
-                        </li>   
                         </NavLink>  
+                    </li>
+                
+                
+                    <li className={(nav) => (nav.isActive ? "nav-active" : "")}>
                         <NavLink to="/Tendances" className='b'>
-                        <li>
                             <span>Tendances</span>
-                        </li>
                         </NavLink>
-                    <NavLink to="/Tendances" className='b'>
+                    </li>
+                </ul>
+                <ul className="partie-droit-nav">
                     <li >
+                        <NavLink to="/Tendances" className='b'>
                             <span>pseudo</span>
-                        </li>
                         </NavLink>
-                    <NavLink to="/Tendances" className='b'>
-                        <li>
-                            <span>test</span>
                     </li>
-                    </NavLink>
-                    <NavLink to="/Tendances" className='b'>
+                
                     <li>
+                        <NavLink to="/Tendances" className='b'>
+                            <img src={PP} alt='Logo' className="img-profile"/>
+                        </NavLink>
                     </li>
+                
+                    <li>
+                        <NavLink to="/Tendances" className='b'>
+                            <svg xmlns="http://www.w3.org/2000/svg" className="svg-param" viewBox="0 0 256 256">
+                                <path d="M128,24A104,104,0,1,0,232,128,104.11791,104.11791,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.09957,88.09957,0,0,1,128,216Zm12-88a12,12,0,1,1-12-12A12.01375,12.01375,0,0,1,140,128Zm48,0a12,12,0,1,1-12-12A12.01375,12.01375,0,0,1,188,128Zm-96,0a12,12,0,1,1-12-12A12.01375,12.01375,0,0,1,92,128Z"/>
+                            </svg>
                         </NavLink>
+                    </li>
+                
                 </ul>
             </nav>
+        </header>
     );
 }
 

Site Web/src/styles/components/_navbar.scss

@@ -1,19 +1,8 @@
-.b:visited {
-    color: #b9b9b9;
-}
 
 
-.b:hover, 
-.b:focus {
-    color: lightgrey; 
-}
-
-nav{
-    display: flex;
-    align-items: center;
-    justify-content: center;
+header {
     height: 50px;
-    background-color: #AAAAAA;
+    background-color: $color-2;
     top: 0;
     left: 0;
     right: 0;
@@ -22,38 +11,84 @@ nav{
     position: fixed;
 }
 
+nav{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
 .logo{
-    margin-right: 250px;
+    //margin-right: 250px;
 }
 
-.b:active {
-    color: #b9b9b9;
+
+
+.partie-droit-nav,.partie-gauche-nav{
+    width: 20%;
 }
 
 
-.home{
-    width: 2rem;
+.svg-home{
+    height: 45px;
+    width: 45px;
+}
+
+.svg-param{
+    height: 42px;
+    width: 42px;
 }
 
+
+
 ul{
     display: flex;
-    flex-direction: row;
-    align-self: center;
-    list-style-type: none;
     li{
+        list-style-type: none;
         padding-left: 1rem;
+        align-self: center;
+    }
+
+    .nav-active {
+        position: relative;
+  
+        &::after {
+          content: "";
+          height: 4px;
+          width: 0;
+          background: violet;
+          position: absolute;
+          border-radius: 10px;
+          bottom: 0px;
+          left: 50%;
+          transform: translateX(-50%);
+          -webkit-animation: anim 0.3s ease forwards;
+          animation: anim 0.6s ease forwards;
+  
+          @-webkit-keyframes anim {
+            to {
+              width: 100%;
+            }
+          }
+          @keyframes anim {
+            to {
+              width: 100%;
+            }
+          }
+        }
     }
 }
 
+.img-profile{
+    height: 35px;
+    width: 35px;
+    border-radius: 20px;
+}
+
 .b{
     text-decoration: none;
     cursor: pointer;
 }
 
-.nav-neko-bleue{
-    color: blue;
-}
-
 .n{
     height: 0.95rem;
     width: 0.95rem;