new design

src/Header.tsx

@@ -1,18 +1,70 @@
-import { Link, useLocation } from "react-router";
-import Avatar from "./Avatar";
+import { Link } from "react-router";
+import { useSession } from "./Session";
+import { useState } from "react";
 
 export default function Header() {
-  const location = useLocation();
+  const { user, teams, players } = useSession();
+  const [burgerActive, setBurgerActive] = useState(false);
   return (
-    <div className={location.pathname === "/network" ? "networkroute" : ""}>
-      <div className="logo">
-        <Link to="/">
-          <img alt="logo" height="66%" src="logo.svg" />
-          <h3 className="centered">cutt</h3>
+    <nav className="navbar" role="navigation" aria-label="main navigation">
+      <div className="navbar-brand">
+        <Link className="navbar-item" to="/">
+          <img
+            style={{ maxHeight: "unset" }}
+            className="image"
+            alt="cool ultimate team tool"
+            src="cutt.svg"
+          />
         </Link>
-        <span className="grey">cool ultimate team tool</span>
+
+        <a
+          role="button"
+          className={"navbar-burger" + (burgerActive ? " is-active" : "")}
+          aria-label="menu"
+          aria-expanded="false"
+          data-target="navbar"
+          onClick={() => setBurgerActive(!burgerActive)}
+        >
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
       </div>
-      <Avatar />
-    </div>
+
+      <div
+        className={"navbar-menu" + (burgerActive ? " is-active" : "")}
+        id="navbar"
+      >
+        <div className="navbar-start">
+          <Link className="navbar-item" to="/network">
+            <span>Sociogram</span>
+          </Link>
+          <Link className="navbar-item" to="/mvp">
+            <span>MVP</span>
+          </Link>
+          <Link className="navbar-item" to="/team">
+            <span>Team</span>
+          </Link>
+        </div>
+        <div className="navbar-end">
+          <div className="navbar-item">
+            {user?.username}
+            <div className="buttons">
+              {user ? (
+                <button className="button is-light">Log out</button>
+              ) : (
+                <>
+                  <button className="button is-success">
+                    <strong>Sign up</strong>
+                  </button>
+                  <button className="button is-light">Log in</button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
   );
 }