front: GameHeader as one line of elemnts

webapp/src/components/Header/index.css

@@ -1,19 +1,19 @@
-h1 {
-    display: inline-flex;
-}
-
 .OnlineTgl {
-    transform: scale(.25, .25);
+    transform: scale(.5); 
-    width: 1px;
+    margin-left: -19px;
-    height: 1px;
 }
 
 .app-header {
-    padding: auto;
+    display: flex;
+}
+
+.app-header nav {
     align-items: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
+
+    padding-top: 10px;
 }
 
 .app-header a {

webapp/src/components/Header/index.jsx

@@ -8,35 +8,36 @@ import { AppData } from "../../context/data"
 export default function Header() {
   const [data] = React.useContext(AppData)
 
-  return <div>
+  return (
-    <h1>
+    <div className='app-header'>
-      CordaCheckers<OnlineToggle />
+      <h1 >
-    </h1>
+        CordaCheckers
-    <nav className='app-header'>
+      </h1>
-      <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
+      <OnlineToggle />
-        <span>L</span>
+      <nav>
-        <span>e</span>
+        <NavLink to="/about" className={""}>
-        <span>a</span>
+          About
-        <span>d</span>
+        </NavLink>
-        <span>e</span>
+        <NavLink to="/game" className={data.gamesFetching && "woble"}>
-        <span>r</span>
+          <span>G</span>
-        <span>b</span>
+          <span>a</span>
-        <span>o</span>
+          <span>m</span>
-        <span>a</span>
+          <span>e</span>
-        <span>r</span>
+        </NavLink>
-        <span>d</span>
+        <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
-      </NavLink>
+          <span>L</span>
-
+          <span>e</span>
-      <NavLink to="/game" className={data.gamesFetching && "woble"}>
+          <span>a</span>
-        <span>G</span>
+          <span>d</span>
-        <span>a</span>
+          <span>e</span>
-        <span>m</span>
+          <span>r</span>
-        <span>e</span>
+          <span>b</span>
-      </NavLink>
+          <span>o</span>
-
+          <span>a</span>
-      <NavLink to="/about" className={""}>
+          <span>r</span>
-        About
+          <span>d</span>
-      </NavLink>
+        </NavLink>
-    </nav>
+      </nav>
-  </div>
+    </div>
+  )
 }

webapp/src/components/OnlineTgl/index.css

@@ -1,4 +1,3 @@
-
 .tgl {
   display: none;