NavBar (#724)

ui100/package-lock.json

@@ -10,6 +10,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",
@@ -1136,6 +1137,32 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.8.tgz",
+      "integrity": "sha512-6frsXcf1TcJKWevWwRup6V4L8lzI33cbHcAjT83YLgKw0vYRZKY0kjMI9fhrJZdRWXgFFgKKvEv3GjoxbqFF7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^6.1.8",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "6.1.8",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.8.tgz",

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>
+            <NavBar version={version} />
-            <h2>{version}</h2>
             <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;