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);
-    width: 1px;
-    height: 1px;
+    transform: scale(.5); 
+    margin-left: -19px;
 }
 
 .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,11 +8,22 @@ import { AppData } from "../../context/data"
 export default function Header() {
   const [data] = React.useContext(AppData)
 
-  return <div>
-    <h1>
-      CordaCheckers<OnlineToggle />
+  return (
+    <div className='app-header'>
+      <h1 >
+        CordaCheckers
       </h1>
-    <nav className='app-header'>
+      <OnlineToggle />
+      <nav>
+        <NavLink to="/about" className={""}>
+          About
+        </NavLink>
+        <NavLink to="/game" className={data.gamesFetching && "woble"}>
+          <span>G</span>
+          <span>a</span>
+          <span>m</span>
+          <span>e</span>
+        </NavLink>
         <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
           <span>L</span>
           <span>e</span>
@@ -26,17 +37,7 @@ export default function Header() {
           <span>r</span>
           <span>d</span>
         </NavLink>
-
-      <NavLink to="/game" className={data.gamesFetching && "woble"}>
-        <span>G</span>
-        <span>a</span>
-        <span>m</span>
-        <span>e</span>
-      </NavLink>
-
-      <NavLink to="/about" className={""}>
-        About
-      </NavLink>
       </nav>
     </div>
+  )
 }

webapp/src/components/OnlineTgl/index.css

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