Add a working Navbar

package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-query": "^3.39.3",
+    "react-router-dom": "^5.3.4",
     "stream": "^0.0.3"
   },
   "devDependencies": {

src/App.tsx

@@ -1,89 +1,13 @@
-import React from "react";
-import { Tabs, Tab, useTheme, Box } from "@mui/material";
-import { DetectorMotionTabPanel } from "./screens/DetectorMotion";
-import { BeamlineStatsTabPanel } from "./screens/BeamlineStats";
-import { OavMover } from "./screens/OavMover";
+import { useTheme, Box } from "@mui/material";
 import "./App.css";
-import { ParamsPanel } from "./screens/CollectionPanel";
 import { ColourSchemeButton, Footer } from "@diamondlightsource/sci-react-ui";
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
-
-function a11yProps(index: number) {
-  return {
-    id: `simple-tab-${index}`,
-    "aria-controls": `simple-tabpanel-${index}`,
-  };
-}
-
-function CustomTabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
-    </div>
-  );
-}
-
-function FixedTargetPanels() {
-  const theme = useTheme();
-  const [value, setValue] = React.useState(0);
-  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
-  };
-  return (
-    <div>
-      <Box
-        component="section"
-        sx={{
-          borderBottom: 1,
-          borderColor: "divider",
-          color: theme.palette.text.secondary,
-        }}
-      >
-        <Tabs
-          value={value}
-          onChange={handleChange}
-          aria-label="basic tabs example"
-          textColor="secondary"
-          centered
-        >
-          <Tab label="Beamline info" {...a11yProps(0)} />
-          <Tab label="Detector position" {...a11yProps(1)} />
-          <Tab label="OAV view" {...a11yProps(2)} />
-          <Tab label="Fixed Target Collection" {...a11yProps(3)} />
-        </Tabs>
-      </Box>
-      <CustomTabPanel value={value} index={0}>
-        <BeamlineStatsTabPanel />
-      </CustomTabPanel>
-      <CustomTabPanel value={value} index={1}>
-        <DetectorMotionTabPanel />
-      </CustomTabPanel>
-      <CustomTabPanel value={value} index={2}>
-        <OavMover />
-      </CustomTabPanel>
-      <CustomTabPanel value={value} index={3}>
-        <ParamsPanel />
-      </CustomTabPanel>
-    </div>
-  );
-}
+import { Switch, Route } from "react-router-dom";
+import { BeamlineI24 } from "./routes/BeamlineI24";
+import { FixedTarget } from "./routes/FixedTarget";
+import { SerialNavBar } from "./components/SerialNavBar";
 
 function App() {
   const theme = useTheme();
-
   return (
     <Box
       sx={[
@@ -97,7 +21,15 @@ function App() {
         }),
       ]}
     >
-      <FixedTargetPanels />
+      <SerialNavBar />
+      <Switch>
+        <Route exact path="/">
+          <BeamlineI24 />
+        </Route>
+        <Route path="/fixed-target">
+          <FixedTarget />
+        </Route>
+      </Switch>
       <Footer
         logo={theme.logos?.short}
         color={theme.palette.primary.main}

src/components/SerialNavBar.tsx

@@ -0,0 +1,30 @@
+import {
+  Navbar,
+  NavLinks,
+  NavLink,
+  type ImageColourSchemeSwitchType,
+} from "@diamondlightsource/sci-react-ui";
+import { Link } from "react-router-dom";
+import i24ssx from "../assets/i24ssx.svg";
+
+const ssxLogo: ImageColourSchemeSwitchType = {
+  src: i24ssx,
+  srcDark: i24ssx,
+  alt: "i24 ssx",
+  width: "100",
+};
+
+export function SerialNavBar() {
+  return (
+    <Navbar logo={ssxLogo} containerWidth={false}>
+      <NavLinks>
+        <NavLink linkComponent={Link} to="/">
+          Home
+        </NavLink>
+        <NavLink linkComponent={Link} to="/fixed-target">
+          Fixed Target
+        </NavLink>
+      </NavLinks>
+    </Navbar>
+  );
+}

src/main.tsx

@@ -4,6 +4,7 @@ import "./index.css";
 import App from "./App.tsx";
 import { Provider } from "react-redux";
 import { store } from "@diamondlightsource/cs-web-lib";
+import { BrowserRouter } from "react-router-dom";
 
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ThemeProvider } from "@diamondlightsource/sci-react-ui";
@@ -19,7 +20,9 @@ createRoot(document.getElementById("root")!).render(
     <ThemeProvider theme={I24DiamondTheme}>
       <Provider store={store}>
         <QueryClientProvider client={queryClient}>
-          <App />
+          <BrowserRouter basename="/mx-daq-ui/">
+            <App />
+          </BrowserRouter>
         </QueryClientProvider>
       </Provider>
     </ThemeProvider>

src/routes/BeamlineI24.tsx

@@ -0,0 +1,76 @@
+import { Box, Tab, Tabs, useTheme } from "@mui/material";
+import { BeamlineStatsTabPanel } from "../screens/BeamlineStats";
+import { DetectorMotionTabPanel } from "../screens/DetectorMotion";
+import { OavMover } from "../screens/OavMover";
+import React from "react";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+export function BeamlineI24() {
+  const theme = useTheme();
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+  return (
+    <Box>
+      <Box
+        component="section"
+        sx={{
+          borderBottom: 1,
+          borderColor: "divider",
+          color: theme.palette.text.secondary,
+        }}
+      >
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          aria-label="basic tabs example"
+          textColor="secondary"
+          centered
+        >
+          <Tab label="Beamline info" {...a11yProps(0)} />
+          <Tab label="Detector position" {...a11yProps(1)} />
+          <Tab label="OAV view" {...a11yProps(2)} />
+        </Tabs>
+      </Box>
+      <CustomTabPanel value={value} index={0}>
+        <BeamlineStatsTabPanel />
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={1}>
+        <DetectorMotionTabPanel />
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={2}>
+        <OavMover />
+      </CustomTabPanel>
+    </Box>
+  );
+}