Skip to content

Commit fe8cf56

Browse files
adaudonadaudon
authored
Merge pull request #68 from DiamondLightSource/67-navbar
Add a working Navbar
2 parents 74a3e06 + 1ae9295 commit fe8cf56

File tree

8 files changed

+177
-117
lines changed

8 files changed

+177
-117
lines changed

‎package-lock.json‎

Lines changed: 19 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"react-dom": "^18.3.1",
2929
"react-error-boundary": "^4.1.2",
3030
"react-query": "^3.39.3",
31+
"react-router-dom": "^5.3.4",
3132
"stream": "^0.0.3"
3233
},
3334
"devDependencies": {

‎src/App.tsx‎

Lines changed: 22 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,33 @@
1-
import React from "react";
2-
import { Tabs, Tab, useTheme, Box } from "@mui/material";
3-
import { DetectorMotionTabPanel } from "./screens/DetectorMotion";
4-
import { BeamlineStatsTabPanel } from "./screens/BeamlineStats";
5-
import { OavMover } from "./screens/OavMover";
1+
import { useTheme, Box } from "@mui/material";
62
import "./App.css";
7-
import { ParamsPanel } from "./screens/CollectionPanel";
83
import { ColourSchemeButton, Footer } from "@diamondlightsource/sci-react-ui";
9-
10-
interface TabPanelProps {
11-
children?: React.ReactNode;
12-
index: number;
13-
value: number;
14-
}
15-
16-
function a11yProps(index: number) {
17-
return {
18-
id: `simple-tab-${index}`,
19-
"aria-controls": `simple-tabpanel-${index}`,
20-
};
21-
}
22-
23-
function CustomTabPanel(props: TabPanelProps) {
24-
const { children, value, index, ...other } = props;
25-
26-
return (
27-
<div
28-
role="tabpanel"
29-
hidden={value !== index}
30-
id={`simple-tabpanel-${index}`}
31-
aria-labelledby={`simple-tab-${index}`}
32-
{...other}
33-
>
34-
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
35-
</div>
36-
);
37-
}
38-
39-
function FixedTargetPanels() {
40-
const theme = useTheme();
41-
const [value, setValue] = React.useState(0);
42-
const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
43-
setValue(newValue);
44-
};
45-
return (
46-
<div>
47-
<Box
48-
component="section"
49-
sx={{
50-
borderBottom: 1,
51-
borderColor: "divider",
52-
color: theme.palette.text.secondary,
53-
}}
54-
>
55-
<Tabs
56-
value={value}
57-
onChange={handleChange}
58-
aria-label="basic tabs example"
59-
textColor="secondary"
60-
centered
61-
>
62-
<Tab label="Beamline info" {...a11yProps(0)} />
63-
<Tab label="Detector position" {...a11yProps(1)} />
64-
<Tab label="OAV view" {...a11yProps(2)} />
65-
<Tab label="Fixed Target Collection" {...a11yProps(3)} />
66-
</Tabs>
67-
</Box>
68-
<CustomTabPanel value={value} index={0}>
69-
<BeamlineStatsTabPanel />
70-
</CustomTabPanel>
71-
<CustomTabPanel value={value} index={1}>
72-
<DetectorMotionTabPanel />
73-
</CustomTabPanel>
74-
<CustomTabPanel value={value} index={2}>
75-
<OavMover />
76-
</CustomTabPanel>
77-
<CustomTabPanel value={value} index={3}>
78-
<ParamsPanel />
79-
</CustomTabPanel>
80-
</div>
81-
);
82-
}
4+
import { Switch, Route } from "react-router-dom";
5+
import { BeamlineI24 } from "./routes/BeamlineI24";
6+
import { FixedTarget } from "./routes/FixedTarget";
7+
import { SerialNavBar } from "./components/SerialNavBar";
838

849
function App() {
8510
const theme = useTheme();
86-
8711
return (
8812
<Box
89-
sx={[
90-
() => ({
91-
display: "flex",
92-
justifyContent: "space-between",
93-
flexDirection: "column",
94-
minHeight: "100vh",
95-
minWidth: "320px",
96-
margin: 0,
97-
}),
98-
]}
13+
sx={{
14+
display: "flex",
15+
justifyContent: "space-between",
16+
flexDirection: "column",
17+
minHeight: "100vh",
18+
minWidth: "320px",
19+
margin: 0,
20+
}}
9921
>
100-
<FixedTargetPanels />
22+
<SerialNavBar />
23+
<Switch>
24+
<Route exact path="/">
25+
<BeamlineI24 />
26+
</Route>
27+
<Route path="/fixed-target">
28+
<FixedTarget />
29+
</Route>
30+
</Switch>
10131
<Footer
10232
logo={theme.logos?.short}
10333
color={theme.palette.primary.main}

‎src/assets/i24ssx.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/SerialNavBar.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {
2+
Navbar,
3+
NavLinks,
4+
NavLink,
5+
type ImageColourSchemeSwitchType,
6+
} from "@diamondlightsource/sci-react-ui";
7+
import { Link } from "react-router-dom";
8+
import i24ssx from "../assets/i24ssx.svg";
9+
10+
const ssxLogo: ImageColourSchemeSwitchType = {
11+
src: i24ssx,
12+
srcDark: i24ssx,
13+
alt: "i24 ssx",
14+
width: "100",
15+
};
16+
17+
export function SerialNavBar() {
18+
return (
19+
<Navbar logo={ssxLogo} containerWidth={false} linkComponent={Link}>
20+
<NavLinks>
21+
<NavLink linkComponent={Link} to="/">
22+
Home
23+
</NavLink>
24+
<NavLink linkComponent={Link} to="/fixed-target">
25+
Fixed Target
26+
</NavLink>
27+
</NavLinks>
28+
</Navbar>
29+
);
30+
}

‎src/main.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import "./index.css";
44
import App from "./App.tsx";
55
import { Provider } from "react-redux";
66
import { store } from "@diamondlightsource/cs-web-lib";
7+
import { BrowserRouter } from "react-router-dom";
78

89
import { QueryClient, QueryClientProvider } from "react-query";
910
import { ThemeProvider } from "@diamondlightsource/sci-react-ui";
@@ -19,7 +20,9 @@ createRoot(document.getElementById("root")!).render(
1920
<ThemeProvider theme={I24DiamondTheme}>
2021
<Provider store={store}>
2122
<QueryClientProvider client={queryClient}>
22-
<App />
23+
<BrowserRouter basename="/mx-daq-ui/">
24+
<App />
25+
</BrowserRouter>
2326
</QueryClientProvider>
2427
</Provider>
2528
</ThemeProvider>

‎src/routes/BeamlineI24.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Box, Tab, Tabs, useTheme } from "@mui/material";
2+
import { BeamlineStatsTabPanel } from "../screens/BeamlineStats";
3+
import { DetectorMotionTabPanel } from "../screens/DetectorMotion";
4+
import { OavMover } from "../screens/OavMover";
5+
import React from "react";
6+
7+
interface TabPanelProps {
8+
children?: React.ReactNode;
9+
index: number;
10+
value: number;
11+
}
12+
13+
function a11yProps(index: number) {
14+
return {
15+
id: `simple-tab-${index}`,
16+
"aria-controls": `simple-tabpanel-${index}`,
17+
};
18+
}
19+
20+
function CustomTabPanel(props: TabPanelProps) {
21+
const { children, value, index, ...other } = props;
22+
23+
return (
24+
<div
25+
role="tabpanel"
26+
hidden={value !== index}
27+
id={`simple-tabpanel-${index}`}
28+
aria-labelledby={`simple-tab-${index}`}
29+
{...other}
30+
>
31+
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
32+
</div>
33+
);
34+
}
35+
36+
export function BeamlineI24() {
37+
const theme = useTheme();
38+
const [tab, setTab] = React.useState(0);
39+
40+
const handleChange = (_event: React.SyntheticEvent, newTab: number) => {
41+
setTab(newTab);
42+
};
43+
return (
44+
<Box>
45+
<Box
46+
component="section"
47+
sx={{
48+
borderBottom: 1,
49+
borderColor: "divider",
50+
color: theme.palette.text.secondary,
51+
}}
52+
>
53+
<Tabs
54+
value={tab}
55+
onChange={handleChange}
56+
aria-label="basic tabs example"
57+
textColor="secondary"
58+
centered
59+
>
60+
<Tab label="Beamline info" {...a11yProps(0)} />
61+
<Tab label="Detector position" {...a11yProps(1)} />
62+
<Tab label="OAV view" {...a11yProps(2)} />
63+
</Tabs>
64+
</Box>
65+
<CustomTabPanel value={tab} index={0}>
66+
<BeamlineStatsTabPanel />
67+
</CustomTabPanel>
68+
<CustomTabPanel value={tab} index={1}>
69+
<DetectorMotionTabPanel />
70+
</CustomTabPanel>
71+
<CustomTabPanel value={tab} index={2}>
72+
<OavMover />
73+
</CustomTabPanel>
74+
</Box>
75+
);
76+
}

0 commit comments

Comments
 (0)