Add the link to the settings page

front/assets/account.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" fill="#e6edf3"/></svg>

front/style/home.css

@@ -17,7 +17,7 @@ body {
     text-align: center;
     background-color: var(--main-color);
     margin : 0px;
-    border : RED 2px solid;
+    /* border : var(--accent-color) 1px ésolid; */
     display: flex;
     flex-direction: row;
     /* border-radius: 0.75cap; */
@@ -64,15 +64,51 @@ body {
     margin-top : 5%;
 }
 
-#img-account {
 
+#img-account {
+    width: 100%;
+    cursor: pointer;
 }
 
 #header-right, #header-left {
     width: 10%;
-    border: yellow 2px solid;
+    /* border: yellow 2px solid; */
+}
+
+#header-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#username {
+    color : var(--main-contrast-color);
+    margin : 0;
+}
+
+#clickable-header-right:hover #username {
+    color : var(--accent-color);
 }
 
 #header-center {
     width: 80%;
 }
+
+#clickable-header-right {
+    width: 40%;
+    border-radius: 1cap;
+    padding : 2%;
+}
+
+#clickable-header-right:hover {
+    border : orange 1px solid;
+}
+
+.clickable {
+    cursor : pointer;
+}
+
+#img-account {
+    width: 100%;
+}

front/views/Home.tsx

@@ -1,7 +1,8 @@
 import "../style/home.css"
 import "../style/personnal_space.css"
 import "../style/side_menu.css"
-import { CSSProperties } from "react"
+// import AccountSvg from "../assets/account.svg?react"
+import { CSSProperties, useRef } from "react"
 
 interface Tactic {
     id : number
@@ -27,6 +28,7 @@ export default function Home({ lastTactics, allTactics, teams, username } : { la
 }
 
 export function Title({username} : {username : string}) {
+    
     return (
         <div id="header">
             <div id="header-left">
@@ -36,8 +38,11 @@ export function Title({username} : {username : string}) {
                 <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
             </div>
             <div id="header-right">
-                <img id="img-account" src="account.svg" color="white"/>
-                {username}
+                <div className="clickable" id="clickable-header-right">
+                    {/* <AccountSvg id="img-account" /> */}
+                    <img id="img-account" src="account.svg" onClick={() => {location.pathname="/settings"}} />
+                    <p id="username">{username}</p>
+                </div>
             </div>
         </div>
     )
@@ -118,8 +123,6 @@ function TableData({allTactics} : {allTactics : Tactic[]} ) {
         } 
     }
 
-    console.log(listTactic);
-
     const data = listTactic.map((tactic, rowIndex) => 
         <tr key={rowIndex+"row"}>
             {tactic}

public/account.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" fill="#e6edf3"/></svg>