dropdown menu

client/src/app.css

@@ -2,6 +2,7 @@
 
 :root {
   --clr-primary: #1976d2;
+  --clr-primary-dark: #104a83;
   --clr-light-gray: #ddd;
   --clr-dark-gray: #aaa;
   --clr-darker-gray: #555;
@@ -73,6 +74,10 @@ body {
   background: white;
 }
 
+.btn-inverted:hover {
+  color: var(--clr-primary-dark);
+}
+
 .btn-disabled, .btn[disabled] {
   color: var(--clr-dark-gray);
   background: var(--clr-light-gray);

client/src/components/level.css

@@ -268,3 +268,29 @@ td code  {
   z-index: 1;
   padding: .5rem;
 }
+
+.menu.dropdown {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  right: 0;
+  top: 100%;
+  background-color: #fff;
+  z-index: 1;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: -.1rem .3rem .3rem 0 rgba(0, 0, 0, 0.1);
+}
+
+.menu.dropdown.hidden {
+  display: none;
+}
+
+#menu-btn {
+  padding: 0;
+  font-size: 1.3rem;
+}
+
+.menu.dropdown .svg-inline--fa {
+  width: 1.8rem;
+}

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, faHome, faCircleInfo, faArrowRight, faArrowLeft, faShield, faRotateLeft } from '@fortawesome/free-solid-svg-icons'
+import { faBars, 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';
@@ -418,6 +418,8 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle, toggleImpressum})
 
   const { commandLineMode, setCommandLineMode } = React.useContext(InputModeContext)
 
+  const [navOpen, setNavOpen] = React.useState(false)
+
   return <div className="app-bar" style={isLoading ? {display: "none"} : null} >
     <div>
       <span className="app-bar-title">
@@ -428,37 +430,41 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle, toggleImpressum})
       <span className="app-bar-title">
         {levelTitle}
       </span>
-        {levelId > 0 && <>
-          <Button disabled={levelId <= 0} inverted="true" to=""
-              onClick={(ev) => { setCommandLineMode(!commandLineMode) }}
-              title="toggle Editor mode">
-            Editor
-          </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"
+          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>
+    }
+    {levelId > 0 && <>
           <Button disabled={levelId <= 0} inverted="true"
               to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
-              title="previous level">
+              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}>
-            Next&nbsp;<FontAwesomeIcon icon={faArrowRight} />
-          </Button>
-        }
-
-        <Button title="information, Impressum, privacy policy" inverted="true" to="" onClick={toggleImpressum}>
-          <FontAwesomeIcon icon={faCircleInfo} /> Info &amp; Impressum
-        </Button>
-        <Button to={`/${gameId}`} inverted="true" title="back to world selection">
-          <FontAwesomeIcon icon={faHome} /> Home
-        </Button>
-        <Button to="" inverted="true">
-          <FontAwesomeIcon icon={faBars} />
-        </Button>
-    </div>
-
+    <Button to={`/${gameId}`} inverted="true" title="back to world selection">
+      <FontAwesomeIcon icon={faHome} />&nbsp;Home
+    </Button>
+    <Button disabled={levelId <= 0} inverted="true" to=""
+        onClick={(ev) => { setCommandLineMode(!commandLineMode); setNavOpen(false) }}
+        title="toggle Editor mode">
+      <FontAwesomeIcon icon={faCode} />&nbsp;Toggle Editor
+    </Button>
+    <Button title="information, Impressum, privacy policy" inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}>
+      <FontAwesomeIcon icon={faCircleInfo} />&nbsp;Info &amp; Impressum
+    </Button>
   </div>
+</div>
+
 }
 
 function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCode, initialSelections, onDidChangeContent, onDidChangeSelection) {