feat: clickable username with context menu

src/App.css

@@ -29,7 +29,6 @@ footer {
   left: 8px;
 }
 
-
 /*=========Network Controls=========*/
 
 .infobutton {
@@ -367,7 +366,11 @@ button,
   position: relative;
   text-align: center;
   height: 140px;
-  margin-bottom: 20px;
+
+  span {
+    display: block;
+    margin: 2px;
+  }
 
   img {
     display: block;
@@ -390,6 +393,14 @@ button,
   }
 }
 
+.avatar {
+  background-color: lightsteelblue;
+  padding: 2px 8px;
+  width: fit-content;
+  margin: auto;
+  z-index: 3;
+}
+
 .networkroute {
   z-index: 10;
   position: absolute;

src/App.tsx

@@ -7,34 +7,25 @@ import { BrowserRouter, Routes, Route } from "react-router";
 import { SessionProvider } from "./Session";
 import { GraphComponent } from "./Network";
 import MVPChart from "./MVPChart";
+import Avatar from "./Avatar";
 
 function App() {
   return (
     <BrowserRouter>
-      <Header />
+      <SessionProvider>
-      <Routes>
+        <Header />
-        <Route index element={<Rankings />} />
+        <Avatar />
+        <Routes>
+          <Route index element={<Rankings />} />
 
-        <Route path="/network" element={
+          <Route path="/network" element={<GraphComponent />} />
-          <SessionProvider>
-            <GraphComponent />
-          </SessionProvider>
-        } />
 
-        <Route path="/analysis" element={
+          <Route path="/analysis" element={<Analysis />} />
-          <SessionProvider>
-            <Analysis />
-          </SessionProvider>
-        } />
 
-        <Route path="/mvp" element={
+          <Route path="/mvp" element={<MVPChart />} />
-          <SessionProvider>
+        </Routes>
-            <MVPChart />
+        <Footer />
-          </SessionProvider>
+      </SessionProvider>
-        } />
-
-      </Routes>
-      <Footer />
     </BrowserRouter>
   );
 }

src/Header.tsx

@@ -1,9 +1,11 @@
 export default function Header() {
-  return <div className="logo" id="logo">
+  return (
-    <a href={"/"}>
+    <div className="logo" id="logo">
-      <img alt="logo" height="66%" src="logo.svg" />
+      <a href={"/"}>
-      <h3 className="centered">cutt</h3>
+        <img alt="logo" height="66%" src="logo.svg" />
-    </a>
+        <h3 className="centered">cutt</h3>
-    <span className="grey">cool ultimate team tool</span>
+      </a>
-  </div>
+      <span className="grey">cool ultimate team tool</span>
+    </div>
+  );
 }

src/Network.tsx

@@ -49,7 +49,8 @@ export const GraphComponent = () => {
   }
   const footer = document.getElementsByTagName("footer");
   if (footer) {
-    (footer.item(0) as HTMLElement).className = "fixed-footer";
+    footer.length &&
+      ((footer.item(0) as HTMLElement).className = "fixed-footer");
   }
 
   async function loadData() {