Skip to content

Commit e624325

Browse files
OliverDudgeonOliverDudgeon
committed
fix(navigation): fix navigation issues that appeared in recent commit
1 parent 6e13112 commit e624325

File tree

3 files changed

+92
-99
lines changed

3 files changed

+92
-99
lines changed

‎src/layouts/navigation/MobileNavMenu.tsx‎

Lines changed: 57 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from "react";
22

33
import { MenuRounded as MenuRoundedIcon } from "@mui/icons-material";
44
import {
5+
Box,
56
Divider,
67
Grid2 as Grid,
78
IconButton,
@@ -17,17 +18,13 @@ import { NavLink } from "./NavLink";
1718
import { OUPContext } from "./OUPContext";
1819
import { UserMenuContent } from "./UserMenuContent";
1920

20-
export interface MobileNavMenuProps {
21-
links?: boolean;
22-
}
23-
2421
/**
2522
* Mobile modal navigation menu with
2623
* * Page links
2724
* * Project management
2825
* * User menu
2926
*/
30-
export const MobileNavMenu = ({ links = true }: MobileNavMenuProps) => {
27+
export const MobileNavMenu = () => {
3128
const [open, setOpen] = useState(false);
3229
const isDMAuthorized = useDMAuthorizationStatus();
3330

@@ -38,49 +35,61 @@ export const MobileNavMenu = ({ links = true }: MobileNavMenuProps) => {
3835
</IconButton>
3936
<ModalWrapper id="mobile-menu" open={open} title="" onClose={() => setOpen(false)}>
4037
<Grid container spacing={2}>
41-
{!!links && (
42-
<Grid size={12}>
43-
<Typography component="h3" variant="h6">
44-
Links
45-
</Typography>
46-
<List aria-label="main-mobile-navigation" component="nav">
47-
<NavLink stripQueryParameters={["taskId", "instanceId", "path"]} title="Datasets">
48-
{({ active }) => (
49-
<ListItemButton component="a" selected={active}>
50-
<ListItemText primary="Datasets" />
51-
</ListItemButton>
52-
)}
53-
</NavLink>
54-
<NavLink stripQueryParameters={["taskId", "instanceId", "path"]} title="Project">
55-
{({ active }) => (
56-
<ListItemButton component="a" selected={active}>
57-
<ListItemText primary="Project" />
58-
</ListItemButton>
59-
)}
60-
</NavLink>
61-
<NavLink stripQueryParameters={["taskId", "instanceId", "path"]} title="Run">
62-
{({ active }) => (
63-
<ListItemButton component="a" selected={active}>
64-
<ListItemText primary="Apps/Jobs" />
65-
</ListItemButton>
66-
)}
67-
</NavLink>
68-
<NavLink stripQueryParameters={["taskId", "instanceId", "path"]} title="Results">
69-
{({ active }) => (
70-
<ListItemButton component="a" selected={active}>
71-
<ListItemText primary="Results" />
72-
</ListItemButton>
73-
)}
74-
</NavLink>
75-
</List>
76-
</Grid>
77-
)}
78-
{!!isDMAuthorized && !!links && (
79-
<Grid size={12}>
80-
<Divider />
81-
</Grid>
82-
)}
83-
<Grid size={12}>{!!isDMAuthorized && <OUPContext header />}</Grid>
38+
<Grid
39+
size={12}
40+
sx={{ display: { xs: "block" }, "@media (min-width:655px)": { display: "none" } }}
41+
>
42+
<Typography component="h3" variant="h6">
43+
Links
44+
</Typography>
45+
<List aria-label="main-mobile-navigation" component="nav">
46+
<NavLink stripQueryParameters={["taskId", "instanceId", "path"]} title="Datasets">
47+
{({ active }) => (
48+
<ListItemButton component="a" selected={active}>
49+
<ListItemText primary="Datasets" />
50+
</ListItemButton>
51+
)}
52+
</NavLink>
53+
<NavLink stripQueryParameters={["taskId", "instanceId", "path"]} title="Project">
54+
{({ active }) => (
55+
<ListItemButton component="a" selected={active}>
56+
<ListItemText primary="Project" />
57+
</ListItemButton>
58+
)}
59+
</NavLink>
60+
<NavLink stripQueryParameters={["taskId", "instanceId", "path"]} title="Run">
61+
{({ active }) => (
62+
<ListItemButton component="a" selected={active}>
63+
<ListItemText primary="Apps/Jobs" />
64+
</ListItemButton>
65+
)}
66+
</NavLink>
67+
<NavLink stripQueryParameters={["taskId", "instanceId", "path"]} title="Results">
68+
{({ active }) => (
69+
<ListItemButton component="a" selected={active}>
70+
<ListItemText primary="Results" />
71+
</ListItemButton>
72+
)}
73+
</NavLink>
74+
</List>
75+
</Grid>
76+
<Grid
77+
size={12}
78+
sx={{ display: { xs: "block" }, "@media (min-width:655px)": { display: "none" } }}
79+
>
80+
<Divider />
81+
</Grid>
82+
<Grid size={12}>
83+
{!!isDMAuthorized && (
84+
<Box>
85+
<Typography gutterBottom variant="h3">
86+
Project
87+
</Typography>
88+
89+
<OUPContext />
90+
</Box>
91+
)}
92+
</Grid>
8493
<Grid size={12}>
8594
<UserMenuContent />
8695
</Grid>

‎src/layouts/navigation/NavBarContents.tsx‎

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -59,56 +59,43 @@ export const NavBarContents = () => {
5959
{/* Desktop Navigation */}
6060
<Box
6161
sx={{
62-
display: { xs: "none", md: "block" },
62+
display: { xs: "none" },
63+
"@media (min-width:655px)": {
64+
display: "block",
65+
},
6366
flex: 1,
6467
}}
6568
>
6669
<NavLinks linkWidth={120} />
6770
</Box>
6871

69-
{/* Tablet Navigation */}
70-
<Box
71-
sx={{
72-
display: { xs: "none", md: "none", "@media (min-width:655px)": "block" },
73-
flex: 1,
74-
}}
75-
>
76-
<NavLinks linkWidth={100} />
77-
</Box>
78-
7972
{/* Desktop Controls */}
8073
<Box
8174
sx={{
82-
display: { xs: "none", md: "flex" },
8375
justifyContent: "flex-end",
8476
alignItems: "center",
8577
flex: "1 0",
8678
minWidth: 0,
8779
ml: "auto",
80+
display: "flex",
8881
}}
8982
>
90-
{!!isDMAuthorized && <OUPContext />}
83+
{!!isDMAuthorized && <OUPContext sx={{ display: { xs: "none", md: "flex" } }} />}
9184
<SettingsButton disabled={!isDMAuthorized} onClick={handleOpenSettings} />
92-
<UserMenu />
93-
</Box>
9485

95-
{/* Mobile/Tablet Controls */}
96-
<Box
97-
sx={{
98-
display: { xs: "flex", md: "none" },
99-
flex: 1,
100-
justifyContent: "flex-end",
101-
alignItems: "center",
102-
ml: { xs: "auto", "@media (min-width:655px)": 0 },
103-
}}
104-
>
105-
<SettingsButton disabled={!isDMAuthorized} onClick={handleOpenSettings} />
10686
<Box
10787
sx={{
108-
display: { "@media (min-width:655px)": "none" },
88+
display: { xs: "none", md: "block" },
89+
}}
90+
>
91+
<UserMenu />
92+
</Box>
93+
<Box
94+
sx={{
95+
display: { xs: "block", md: "none" },
10996
}}
11097
>
111-
<MobileNavMenu links />
98+
<MobileNavMenu />
11299
</Box>
113100
</Box>
114101
</>

‎src/layouts/navigation/OUPContext.tsx‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,44 @@ import { useSelectedOrganisation } from "../../state/organisationSelection";
55
import { useSelectedUnit } from "../../state/unitSelection";
66

77
export interface OUPContextProps {
8-
header?: boolean;
8+
sx?: any;
99
}
1010

1111
/**
1212
* Displays current context user is working in.
1313
*/
14-
export const OUPContext = ({ header = false }: OUPContextProps) => {
14+
export const OUPContext = ({ sx }: OUPContextProps) => {
1515
const [unit] = useSelectedUnit();
1616
const [organisation] = useSelectedOrganisation();
1717
const currentProject = useCurrentProject();
1818

1919
if (!!unit || !!organisation || !!currentProject) {
2020
return (
21-
<>
22-
{!!header && (
23-
<Typography gutterBottom variant="h3">
24-
Project
25-
</Typography>
26-
)}
27-
<Box
28-
sx={{
21+
<Box
22+
sx={[
23+
{
2924
flexBasis: "200px",
25+
flexDirection: "column",
3026
minWidth: 0,
3127
outline: "2px solid",
3228
outlineColor: "primary.light",
3329
borderRadius: 2,
3430
p: 0.75,
3531
mr: 1,
36-
}}
37-
>
38-
<Typography noWrap>
39-
<em>Org</em>: {organisation?.name}
40-
</Typography>
41-
<Typography noWrap>
42-
<em>Unit</em>: {unit?.name}
43-
</Typography>
44-
<Typography noWrap>
45-
<em>Project</em>: {currentProject?.name}
46-
</Typography>
47-
</Box>
48-
</>
32+
},
33+
sx,
34+
]}
35+
>
36+
<Typography noWrap>
37+
<em>Org</em>: {organisation?.name}
38+
</Typography>
39+
<Typography noWrap>
40+
<em>Unit</em>: {unit?.name}
41+
</Typography>
42+
<Typography noWrap>
43+
<em>Project</em>: {currentProject?.name}
44+
</Typography>
45+
</Box>
4946
);
5047
}
5148
return null;

0 commit comments

Comments
 (0)