NavBar (#724)

ui100/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
+    "@mui/icons-material": "^6.1.8",
     "@mui/material": "^6.1.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

ui100/src/ApiConsole.tsx

@@ -2,7 +2,8 @@ import {useEffect, useState} from "react";
 import {Configuration, MetadataApi} from "./api";
 import buildVisualizerGraph from "./model/visualizer.ts";
 import {GraphCanvas} from "reagraph";
-import {Box, Grid, Grid2} from "@mui/material";
+import {Box} from "@mui/material";
+import NavBar from "./NavBar.tsx";
 
 const ApiConsole = () => {
     const [version, setVersion] = useState("no version set");
@@ -48,8 +49,7 @@ const ApiConsole = () => {
 
     return (
         <div>
-            <h1>zrok</h1>
-            <h2>{version}</h2>
+            <NavBar version={version} />
             <Box>
                 <div style={{position: "relative", width: "100%", height: "500px"}}>
                     <GraphCanvas nodes={nodes} edges={edges}/>

ui100/src/NavBar.tsx

@@ -0,0 +1,25 @@
+import {AppBar, Box, IconButton, Toolbar, Typography} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+
+interface NavBarProps {
+    version: string;
+}
+
+const NavBar = ({ version }: NavBarProps) => {
+    return (
+        <Box ssx={{ flexGrow: 1 }}>
+            <AppBar position="static">
+                <Toolbar>
+                    <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" sx={{ flexGrow: 1 }} display={{ xs: "none", sm: "none", md: "block" }}>
+                        zrok { version !== "" ? " | " + version : ""}
+                    </Typography>
+                </Toolbar>
+            </AppBar>
+        </Box>
+    );
+}
+
+export default NavBar;