From e43f2799bd8981e015934727bea5be890ec79483 Mon Sep 17 00:00:00 2001
From: AntoninoP <antoninopiraino70@gmail.com>
Date: Fri, 5 Jul 2024 19:28:31 +0200
Subject: [PATCH] modif style cardnav

---
 package-lock.json                        | 48 ++++++++++++++++++++++++
 package.json                             |  2 +
 src/components/navbar/Navbar.jsx         | 15 ++++++--
 src/components/navbar/Navbar.module.scss | 25 ++++++++++--
 4 files changed, 84 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1189417..5b7e14b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "servii-front",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
         "@types/jest": "^29.5.12",
@@ -1825,6 +1827,52 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.0.tgz",
       "integrity": "sha512-zuWxyfXNbsKbm96HhXzainONPFqRcoZblQ++e9cAIGUuHfl2cFSBzW01jtesqWG/lqaUyX3H8O1y9oWboGNQBA=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.9.15",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
diff --git a/package.json b/package.json
index 0b461b8..62ebf2f 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
     "test": "jest"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index 79eaf48..ab1b3ff 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -1,6 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { auth } from '../../service/firebase';
 import styles from './Navbar.module.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUser, faCog, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+
 
 const Navbar = ({ user }) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -42,9 +45,15 @@ const Navbar = ({ user }) => {
       </div>
       {dropdownOpen && (
         <div className={styles.dropdownMenu} ref={dropdownRef}>
-          <div className={styles.menuItem} onClick={toggleDropdown}>Informations</div>
-          <div className={styles.menuItem} onClick={toggleDropdown}>Paramètres</div>
-          <div className={styles.menuItem} onClick={handleLogout}>Se déconnecter</div>
+          <div className={styles.menuItem} onClick={toggleDropdown}>
+            <FontAwesomeIcon icon={faUser} className={styles.icon}/> Informations
+          </div>
+          <div className={styles.menuItem} onClick={toggleDropdown}>
+            <FontAwesomeIcon icon={faCog} className={styles.icon}/> Paramètres
+          </div>
+          <div className={styles.menuItemLogout} onClick={handleLogout}>
+            <FontAwesomeIcon icon={faSignOutAlt} className={styles.icon}/> Se déconnecter
+          </div>
         </div>
       )}
     </div>
diff --git a/src/components/navbar/Navbar.module.scss b/src/components/navbar/Navbar.module.scss
index 4df6b30..40f6d45 100644
--- a/src/components/navbar/Navbar.module.scss
+++ b/src/components/navbar/Navbar.module.scss
@@ -29,13 +29,14 @@
   position: absolute;
   top: 4rem; 
   right: 4rem; 
-  background-color: black;
+  background-color: #050816;
   box-shadow: 0 0.167rem 0.833rem rgba(0, 0, 0, 0.15); 
   border-radius: 0.8rem; 
   overflow: hidden;
   z-index: 1001;
   width: 20rem; 
-  border: .1rem solid red;
+  border: .1rem solid #444444;
+  font-size: 1.1rem;
 }
 
 .menuItem {
@@ -45,7 +46,25 @@
   font-weight: bold;
 }
 
+.menuItemLogout {
+  padding: 1.25rem 2rem; 
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+  font-weight: bold;
+  border-top: .15rem solid #444444;
+}
+
 .menuItem:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: #05081679;
   color: var(--primary-color);
 }
+
+.menuItemLogout:hover{
+  background-color: red;
+  color: var(--primary-color);
+}
+
+.icon{
+  margin-right: 1rem;
+  font-size: 1.25rem;
+}
\ No newline at end of file