+ btn s'abonner dans la navbar

src/components/navbar/Navbar.jsx

@@ -4,16 +4,19 @@ import styles from './Navbar.module.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser, faCog, faSignOutAlt, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from "prop-types";
+import { useNavigate } from 'react-router-dom';
 
 const Navbar = ({ 
   user, 
   hasShadow = true, 
   showBackButton = false, 
   onBackClick, 
-  backButtonText = "Retour au dashboard" 
+  backButtonText = "Retour au dashboard",
+  Subsribebtn = true
 }) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
+  const navigate = useNavigate();
 
   const handleLogout = () => {
     auth.signOut();
@@ -45,7 +48,15 @@ const Navbar = ({
       {showBackButton && (
         <div className={styles.backButton} onClick={onBackClick}>
           <FontAwesomeIcon icon={faArrowLeft} className={styles.backIcon} />
-          <span>{backButtonText}</span> {}
+          <span>{backButtonText}</span>
+        </div>
+      )}
+
+      {Subsribebtn && (  // Updated: Conditional rendering for the subscribe button
+        <div className={styles.subscribeSection}>
+          <div className={styles.subscribeBtn} onClick={() => navigate('/Pricing')}>
+            S&apos;abonner
+          </div>
         </div>
       )}
 
@@ -90,6 +101,7 @@ Navbar.propTypes = {
   showBackButton: PropTypes.bool,  
   onBackClick: PropTypes.func, 
   backButtonText: PropTypes.string, 
+  Subsribebtn: PropTypes.bool // Updated: Prop type corrected
 };
 
 export default Navbar;

src/components/navbar/Navbar.module.scss

@@ -89,6 +89,18 @@
   font-size: 1.5rem;
 }
 
+
+.subscribeBtn{
+  padding: .5rem 1rem;
+  border-radius: .4rem;
+  background-color: #2f2f2f;
+  color: white;
+  cursor: pointer;
+  border: none;
+  margin-right: 2rem;
+}
+
+
 @media (max-width: 650px) {
   .backButton{
     font-size: 1.25rem;

src/pages/CreateServer/modpack/modpack.jsx

@@ -35,7 +35,7 @@ const Modpack = ({ user }) => {
 
   const handleCancel = () => {
     console.log("Annuler cliqué, index sélectionné avant :", selectedModpackIndex);
-    setSelectedModpackIndex(null); // Remise à zéro de l'index sélectionné
+    setSelectedModpackIndex(null); 
   };
   
   const handleCreate = async () => {

src/pages/CreateServer/modpack/modpack.module.scss

@@ -21,7 +21,7 @@
   padding: 2rem;
   width: 30rem;
   text-align: center;
-  transition: all 0.3s ease; /* Ajout de la transition pour l'état sélectionné/non-sélectionné */
+  transition: all 0.3s ease;
   cursor: pointer;
   position: relative;