toggle inventory on mobile

client/src/components/level.css

@@ -301,3 +301,7 @@ td code  {
 .menu.dropdown .svg-inline--fa {
   width: 1.8rem;
 }
+
+.nav-btns .btn {
+ margin-left: .5em;
+}

client/src/components/level.tsx

@@ -26,7 +26,7 @@ import { EditorConnection, EditorEvents } from '../../../node_modules/lean4-info
 import { EventEmitter } from '../../../node_modules/lean4-infoview/src/infoview/event';
 import type { Location } from 'vscode-languageserver-protocol';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBars, faCode, faPencilSquare, faXmark, faHome, faCircleInfo, faArrowRight, faArrowLeft, faShield, faRotateLeft } from '@fortawesome/free-solid-svg-icons'
+import { faBars, faBook, faCode, faPencilSquare, faXmark, faHome, faCircleInfo, faArrowRight, faArrowLeft, faShield, faRotateLeft } from '@fortawesome/free-solid-svg-icons'
 import { styled, useTheme, Theme, CSSObject } from '@mui/material/styles';
 
 import { GameIdContext } from '../app';
@@ -45,6 +45,7 @@ import { GameHint } from './infoview/rpc_api';
 import { Impressum } from './privacy_policy';
 import { store } from '../state/store';
 import { useWindowDimensions } from '../window_width';
+import { ArrowLeft } from '@mui/icons-material';
 
 function Level() {
 
@@ -307,8 +308,11 @@ function PlayableLevel({worldId, levelId}) {
       <LevelAppBar isLoading={level.isLoading}
         levelTitle={`${mobile ? '' : 'Level '}${levelId} / ${gameInfo.data?.worldSize[worldId]}` +
           (level?.data?.title && ` : ${level?.data?.title}`)}
-        worldId={worldId} levelId={levelId} toggleImpressum={toggleImpressum}/>
+        worldId={worldId} levelId={levelId} toggleImpressum={toggleImpressum}
+        pageNumber={pageNumber} setPageNumber={setPageNumber}/>
       {mobile?
+        // TODO: This is copied from the `Split` component below...
+        <>
           <div className={`app-content level-mobile ${level.isLoading ? 'hidden' : ''}`}>
             <div className={`exercise-panel ${pageNumber == 0 ? '' : 'hidden'}`}>
               <EditorContext.Provider value={editorConnection}>
@@ -321,6 +325,16 @@ function PlayableLevel({worldId, levelId}) {
               {impressum ? <Impressum handleClose={closeImpressum} /> : null}
             </div>
           </div>
+          <div className={`inventory-panel ${pageNumber == 1 ? '' : 'hidden'}`}>
+            {!level.isLoading &&
+              <>{inventoryDoc ?
+                <Documentation name={inventoryDoc.name} type={inventoryDoc.type} handleClose={closeInventoryDoc}/>
+                :
+                <Inventory levelInfo={level?.data} openDoc={openInventoryDoc} />
+              }</>
+            }
+          </div>
+        </>
       :
         <Split minSize={0} snapOffset={200} sizes={[25, 50, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
           <div className="chat-panel">
@@ -436,7 +450,7 @@ function Introduction({worldId}) {
 }
 
 /** The top-navigation bar */
-function LevelAppBar({isLoading, levelId, worldId, levelTitle, toggleImpressum}) {
+function LevelAppBar({isLoading, levelId, worldId, levelTitle, toggleImpressum, pageNumber = undefined, setPageNumber = undefined}) {
   const gameId = React.useContext(GameIdContext)
   const gameInfo = useGetGameInfoQuery({game: gameId})
 
@@ -462,9 +476,22 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle, toggleImpressum})
         {levelTitle}
       </span>
     </div>
+    <div className="nav-btns">
+      {pageNumber == 0 ?
+        <Button to=""
+            title="show inventory" inverted="true" onClick={() => {setPageNumber(1)}}>
+          <FontAwesomeIcon icon={faBook}/>
+        </Button>
+      : pageNumber == 1 &&
+        <Button to=""
+            title="show inventory" inverted="true" onClick={() => {setPageNumber(0)}}>
+          <FontAwesomeIcon icon={faArrowLeft}/>
+        </Button>
+      }
       <Button to="" id="menu-btn" onClick={(ev) => {setNavOpen(!navOpen)}} >
         {navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
       </Button>
+    </div>
     <div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
     {levelId < gameInfo.data?.worldSize[worldId] &&
       <Button inverted="true"

client/src/components/welcome.css

@@ -236,6 +236,7 @@ svg .disabled {
   padding-bottom: .5em;
   position:relative;
   height: 3em;
+  width: 100%;
 }
 
 .mobile-nav .btn-next, .mobile-nav .btn-previous {

client/src/components/welcome.tsx

@@ -204,7 +204,7 @@ function Welcome() {
               <FontAwesomeIcon icon={faArrowLeft} />&nbsp;<FontAwesomeIcon icon={faGlobe} />
             </Button>
             <Button className="btn btn-next" to=""
-                title="show inventory" onClick={() => {setPageNumber(1)}}>
+                title="world tree" onClick={() => {setPageNumber(1)}}>
               Game&nbsp;<FontAwesomeIcon icon={faArrowRight}/>
             </Button>
           </div>
@@ -237,7 +237,7 @@ function Welcome() {
         <div className="inventory-panel">
           <div className="mobile-nav">
             <Button className="btn btn-previous" to=""
-                title="back to introduction" onClick={() => {setPageNumber(1)}}>
+                title="world tree" onClick={() => {setPageNumber(1)}}>
               <FontAwesomeIcon icon={faArrowLeft} />&nbsp;Game
             </Button>
           </div>