change nav-bar on desktop

client/src/components/level.css

@@ -300,12 +300,15 @@ td code  {
 #menu-btn {
   padding: 0;
   font-size: 1.3rem;
+  margin-left: .5em;
+  margin-right: 0;
 }
 
-.menu.dropdown .svg-inline--fa {
+#home-btn {
-  width: 1.8rem;
+  margin-right: .5em;
+  margin-left: 0;
 }
 
-.nav-btns .btn {
+.menu.dropdown .svg-inline--fa {
- margin-left: .5em;
+  width: 1.8rem;
 }

client/src/components/level.tsx

@@ -464,20 +464,15 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle, toggleImpressum,
   const [navOpen, setNavOpen] = React.useState(false)
 
   return <div className="app-bar" style={isLoading ? {display: "none"} : null} >
-    {!mobile &&
+    {mobile ?
-      <div>
+      <>
-        <span className="app-bar-title">
-          {gameInfo.data?.worlds.nodes[worldId].title && `World: ${gameInfo.data?.worlds.nodes[worldId].title}`}
-        </span>
-      </div>
-    }
         <div>
           <span className="app-bar-title">
             {levelTitle}
           </span>
         </div>
         <div className="nav-btns">
-      {pageNumber == 0 ?
+          {mobile && pageNumber == 0 ?
             <Button to=""
                 title="show inventory" inverted="true" onClick={() => {setPageNumber(1)}}>
               <FontAwesomeIcon icon={faBook}/>
@@ -521,8 +516,51 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle, toggleImpressum,
             <FontAwesomeIcon icon={faCircleInfo} />&nbsp;Info &amp; Impressum
           </Button>
         </div>
-</div>
+      </>
-
+    :
+      <>
+        <div>
+          <Button to={`/${gameId}`} inverted="true" title="back to world selection" id="home-btn">
+            <FontAwesomeIcon icon={faHome} />
+          </Button>
+          <span className="app-bar-title">
+            {gameInfo.data?.worlds.nodes[worldId].title && `World: ${gameInfo.data?.worlds.nodes[worldId].title}`}
+          </span>
+        </div>
+        <div>
+          <span className="app-bar-title">
+            {levelTitle}
+          </span>
+        </div>
+        <div className="nav-btns">
+          {levelId > 0 && <>
+            <Button disabled={levelId <= 0} inverted="true"
+                to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
+                title="previous level"
+                onClick={() => setNavOpen(false)}>
+              <FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous
+            </Button>
+          </>}
+          {levelId < gameInfo.data?.worldSize[worldId] &&
+            <Button inverted="true"
+                to={`/${gameId}/world/${worldId}/level/${levelId + 1}`} title="next level"
+                disabled={difficulty >= 2 && !(completed || levelId == 0)}
+                onClick={() => setNavOpen(false)}>
+              <FontAwesomeIcon icon={faArrowRight} />&nbsp;{levelId ? "Next" : "Start"}
+            </Button>
+          }
+          <Button disabled={levelId <= 0} inverted="true" to=""
+              onClick={(ev) => { setCommandLineMode(!commandLineMode); setNavOpen(false) }}
+              title="toggle Editor mode">
+            <FontAwesomeIcon icon={faCode} />
+          </Button>
+          <Button title="information, Impressum, privacy policy" inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}>
+            <FontAwesomeIcon icon={faCircleInfo} />
+          </Button>
+        </div>
+      </>
+    }
+  </div>
 }
 
 function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCode, initialSelections, onDidChangeContent, onDidChangeSelection) {