From 8ed6b91a798a4afcee9167ba37e367c616efe2ca Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Fri, 22 Nov 2024 14:12:27 -0500
Subject: [PATCH] NavBar (#724)

---
 ui100/package-lock.json  | 27 +++++++++++++++++++++++++++
 ui100/package.json       |  1 +
 ui100/src/ApiConsole.tsx |  6 +++---
 ui100/src/NavBar.tsx     | 25 +++++++++++++++++++++++++
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 ui100/src/NavBar.tsx

diff --git a/ui100/package-lock.json b/ui100/package-lock.json
index 86eae05e..475bc082 100644
--- a/ui100/package-lock.json
+++ b/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",
diff --git a/ui100/package.json b/ui100/package.json
index 356025d5..b919b4d7 100644
--- a/ui100/package.json
+++ b/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",
diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx
index 2b28c8f6..ef502cc5 100644
--- a/ui100/src/ApiConsole.tsx
+++ b/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}/>
diff --git a/ui100/src/NavBar.tsx b/ui100/src/NavBar.tsx
new file mode 100644
index 00000000..0d022144
--- /dev/null
+++ b/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;
\ No newline at end of file