charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-17 21:40:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

modif style cardnav

Browse Source
This commit is contained in:
AntoninoP 2024-07-05 19:28:31 +02:00
parent 1a6672f0c3
commit e43f2799bd
4 changed files with 84 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

15
src/components/navbar/Navbar.jsx
View File

@ -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>

25
src/components/navbar/Navbar.module.scss
View File

@ -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;
}