A mostly working navbar

Author: noemifrisina

package-lock.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": {

package.json

@@ -6,6 +6,10 @@ import { OavMover } from "./screens/OavMover";
 import "./App.css";
 import { ParamsPanel } from "./screens/CollectionPanel";
 import { ColourSchemeButton, Footer } from "@diamondlightsource/sci-react-ui";
+import { Switch, Route } from "react-router-dom";
+import { BeamlineI24 } from "./routes/BeamlineI24";
+import { FixedTarget } from "./routes/FixedTarget";
+import { SerialNavBar } from "./components/SerialNavBar";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -81,9 +85,35 @@ function FixedTargetPanels() {
   );
 }
 
+// function App() {
+//   const theme = useTheme();
+
+//   return (
+//     <Box
+//       sx={[
+//         () => ({
+//           display: "flex",
+//           justifyContent: "space-between",
+//           flexDirection: "column",
+//           minHeight: "100vh",
+//           minWidth: "320px",
+//           margin: 0,
+//         }),
+//       ]}
+//     >
+//       <FixedTargetPanels />
+//       <Footer
+//         logo={theme.logos?.short}
+//         color={theme.palette.primary.main}
+//         leftSlot={<ColourSchemeButton />}
+//         containerWidth={false}
+//       />
+//     </Box>
+//   );
+// }
+
 function App() {
   const theme = useTheme();
-
   return (
     <Box
       sx={[
@@ -97,7 +127,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/App.tsx

@@ -0,0 +1,32 @@
+import {
+  Navbar,
+  NavLinks,
+  NavLink,
+  type ImageColourSchemeSwitchType,
+} from "@diamondlightsource/sci-react-ui";
+import { Link } from "react-router-dom";
+import i24ssx from "../assets/i24ssx.svg";
+
+// 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/assets/i24ssx.svg

@@ -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>
+            <App />
+          </BrowserRouter>
         </QueryClientProvider>
       </Provider>
     </ThemeProvider>

src/components/SerialNavBar.tsx

@@ -0,0 +1,74 @@
+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
+      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>
+      <CustomTabPanel value={value} index={0}>
+        <BeamlineStatsTabPanel />
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={1}>
+        <DetectorMotionTabPanel />
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={2}>
+        <OavMover />
+      </CustomTabPanel>
+    </Box>
+  );
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { Box } from "@mui/material";
+import { ParamsPanel } from "../screens/CollectionPanel";
+
+export function FixedTarget() {
+  return (
+    <Box>
+      <ParamsPanel />
+    </Box>
+  );
+}