position fixed et nv search barre

Site Web/client/src/pages/SearchBar.js

@@ -56,11 +56,31 @@ const SearchBar = () => {
                 <Navbar/>
                 <main>
                     <div className="search-main">
-                        <form>
+                       
+                            {/* <form>
                             <input type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)}
                                    placeholder="Rechercher..."/>
                             <button type="button" onClick={handleSearch}>Rechercher</button>
-                        </form>
+                        </form> */}
+                        <div class="Card">
+                            <div class="CardInner">
+                                <div class="container">
+                                    <form> 
+                                        <div className="search-form">
+                                        <button type="button" onClick={handleSearch} class="Icon">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#657789" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                                    </button>
+                                    <div class="InputContainer">
+                                    <input  type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="Rechercher..."/>
+                                    </div>
+                                    </div>
+                                    </form>
+                                    
+                                </div>
+                                </div>
+                            
+                        </div>
+                        
                         <div className="divMenuSearch">
                             <nav role="navigation" className="navProfil">
                                 <ul className="navItemsProfil">

Site Web/client/src/styles/component/_ajoutLien.scss

@@ -2,6 +2,7 @@
     border: solid black 2px;
     background-color: beige;
     border-radius: 10px;
+    position: fixed;
     width: 250px;
     height: 50px;
     text-align: center;

Site Web/client/src/styles/component/_poste.scss

@@ -25,6 +25,10 @@
         background-color: $color-3;
         border: 0.2px solid $color-5;
     }
+    // a {
+    //     width: 100%;
+    //     white-space:pre-wrap;
+    // }
 
 }
 

Site Web/client/src/styles/pages/_profil.scss

@@ -334,10 +334,11 @@ height: 85%;
 
 .reco{
 background-color: #a8a8a8;
-margin: 0% 0% 0% 2.5%;
+margin: 5% 0% 0% 0%;
 border-radius: 25px;
-width: 100%;
+width: 19%;
 height: 300px;
+position: fixed;
 }
 
 .reco span{

Site Web/client/src/styles/pages/_searchBar.scss

@@ -20,4 +20,95 @@
         padding-left: 10%;
         padding-bottom: 15px;
     }
-}
+}
+
+// div {
+//   border: 5px ridge;
+// } 
+
+.Card {
+    width: 380px;
+  }
+  
+  .CardInner {
+    padding: 16px 16px;
+
+  }
+  
+  .container {
+    display: flex;
+  }
+  
+  .Icon {
+    min-width: 46px;
+    min-height: 46px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    border: none;
+      
+    svg {
+      transform: translate(-1px, -1px);    
+    }
+  }
+  
+  
+  .InputContainer {
+    width: 100%;
+  }
+  
+  .InputContainer input {
+
+    padding: 16px 32px;
+    border: none;
+    display: block;
+    font-weight: 600;
+
+    width: 100%;
+    
+    &::placeholder {
+      color: #6d7f8f;
+    }
+    
+    &:focus {
+      outline: none;
+
+      background-color: lighten(#edecec, 3%);
+    }
+  };
+    
+  .InputContainer {
+    --top-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3;
+    --bottom-shadow: inset -2px -2px 4px rgba(255,255,255, .7);
+    
+    position: relative;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    
+    &:before,
+    &:after {
+      left: 0;
+      top: 0;
+      display: block;
+      content: "";
+      pointer-events: none;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+    
+    &:before {
+      box-shadow: var(--bottom-shadow);
+    }
+    
+    &:after {
+      box-shadow: var(--top-shadow);
+    }
+  }
+  .search-form {
+    display: flex;
+    flex-direction: row;
+  }
+  
+