I’m new to the MUI library. I’ve managed to build a nav bar and it works fine for one route (Dashboard). But for the candidate route it collapses as shown : Screengrab of candidate route where the nav bar collapses
Screen grab of the dashboard route where the nav bar doesn’t break :
Screen grab of Dashboard route where nav bar renders as expected
Drawer code:
import { styled, useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import MuiAppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MenuList from "@mui/material/MenuList";
import MenuItem from "@mui/material/MenuItem";
import PersonIcon from "@mui/icons-material/Person";
import DashboardIcon from "@mui/icons-material/Dashboard";
import LogoutIcon from "@mui/icons-material/Logout";
import { NavLink, withRouter, Switch, Route } from "react-router-dom";
import Routes from "./Routes";
const drawerWidth = 240;
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: `${drawerWidth}px`,
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
const DrawerHeader = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
justifyContent: "flex-end",
}));
const PersistentDrawerLeft = (props) => {
const theme = useTheme();
const [open, setOpen] = React.useState(true);
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
const activeRoute = (routeName) => {
return props.location.pathname === routeName ? true : false;
};
return (
<Box sx={{ display: "flex" }}>
<AppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{ mr: 2, ...(open && { display: "none" }) }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
Welcome!
</Typography>
</Toolbar>
</AppBar>
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box",
},
}}
variant="persistent"
anchor="left"
open={open}
>
<DrawerHeader>
<img
src={require("../images/icon.jpg")}
alt="icon"
style={{ height: "70px" }}
/>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "ltr" ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)}
</IconButton>
</DrawerHeader>
<Divider />
<MenuList>
{Routes.map((prop, key) => {
return (
<NavLink
to={prop.path}
style={{ textDecoration: "none", color: "gray" }}
key={key}
>
<MenuItem selected={activeRoute(prop.path)}>
<ListItemIcon>
{prop.sidebarName === "Dashboard" ? (
<DashboardIcon />
) : prop.sidebarName === "Candidate" ? (
<PersonIcon />
) : (
<LogoutIcon />
)}
</ListItemIcon>
<ListItemText primary={prop.sidebarName} />
</MenuItem>
</NavLink>
);
})}
</MenuList>
<Divider />
</Drawer>
<Switch>
{Routes.map((route) => (
<Route exact path={route.path} key={route.path}>
<route.component />
</Route>
))}
</Switch>
</Box>
);
}
export default withRouter(PersistentDrawerLeft);
Candidate form:
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import RadioGroup from "@material-ui/core/RadioGroup";
import Radio from "@material-ui/core/Radio";
import Button from "@material-ui/core/Button";
import Box from "@mui/material/Box";
import BasicDatePicker from "./BasicDatePicker";
import BasicSelect from "./BasicSelect";
const defaultValues = {
name: "",
email: "",
age: 0,
gender: "",
mobile: "",
currentCompany: "",
currentCtc: "",
expectedCtc: "",
status: "",
};
const NewCandidateForm = () => {
const [formValues, setFormValues] = useState(defaultValues);
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormValues({
...formValues,
[name]: value,
});
};
const handleSubmit = (event) => {
event.preventDefault();
};
return (
<Box
component="form"
sx={{
"& .MuiTextField-root": { m: 1, width: "25ch" },
}}
>
<form onSubmit={handleSubmit}>
<Grid
container
direction="column"
spacing={1}
>
{/* Name field */}
<Grid item>
<TextField
id="name-input"
name="name"
label="Name"
type="text"
value={formValues.name}
onChange={handleInputChange}
/>
</Grid>
{/* Date of Birth */}
<Grid item>
<BasicDatePicker />
</Grid>
{/* Gender */}
<Grid item>
<FormControl>
<FormLabel>Gender</FormLabel>
<RadioGroup
name="gender"
value={formValues.gender}
onChange={handleInputChange}
>
<FormControlLabel
key="male"
value="male"
control={<Radio size="small" />}
label="Male"
/>
<FormControlLabel
key="female"
value="female"
control={<Radio size="small" />}
label="Female"
/>
<FormControlLabel
key="other"
value="other"
control={<Radio size="small" />}
label="Other"
/>
</RadioGroup>
</FormControl>
</Grid>
{/* Email */}
<Grid item>
<TextField
id="email-input"
name="email"
label="Email"
type="email"
value={formValues.email}
onChange={handleInputChange}
/>
</Grid>
{/* Mobile */}
<Grid item>
<TextField
id="mobile-input"
name="mobile"
label="Mobile"
type="number"
value={formValues.mobile}
onChange={handleInputChange}
/>
</Grid>
{/* Status select */}
<BasicSelect />
{/* Current Company */}
<Grid item>
<TextField
id="currentCompany-input"
label="Current Company"
name="currentCompany"
type="text"
value={formValues.currentCompany}
onChange={handleInputChange}
/>
</Grid>
{/* Current CTC */}
<Grid item>
<TextField
id="ctc-input"
label="Current CTC"
name="currentCtc"
type="number"
value={formValues.currentCtc}
onChange={handleInputChange}
/>
</Grid>
{/* Expected CTC */}
<Grid item>
<TextField
id="ectc-input"
label="Expected CTC"
name="expectedCtc"
type="nuber"
value={formValues.expectedCtc}
onChange={handleInputChange}
/>
</Grid>
<Button
className="SubmitFormButton"
variant="contained"
style={{ width: "250px", alignItems: "center", marginTop: "20px" }}
type="submit"
>
Submit
</Button>
</Grid>
</form>
</Box>
);
};
export default NewCandidateForm;
Rotue:
import React from "react";
import NewCandidateForm from "./NewCandidateForm";
import BarChart from "./BarChart";
import StackedChart from "./StackedChart";
import { styled } from "@mui/material/styles";
const roleData = {
count: [2, 3, 4, 10, 4, 3, 3, 2],
categories: [
"AL2",
"SAL1",
"SAL2",
"SDE1",
"SDE2",
"SDE3",
"Specialist Mgr",
"Sr. Specialist Mgr",
],
titleText: "Role coverage",
color: "#CB5757",
};
const spocData = {
count: [2, 3, 4],
categories: ["Data1", "Data2", "Data3"],
titleText: "SPOC",
color: "#CF9152",
};
const sourceData = {
count: [2, 5, 1, 7, 5, 4, 8, 3, 4, 7, 2, 1, 5],
categories: [
"Data1",
"Data2",
"Data3",
"Data4",
"Data5",
"Data6",
"Data7",
"Data8",
"Data9",
"Data10",
"Data11",
"Data12",
"Data13",
],
titleText: "Source",
color: "#91CF52",
};
const panelData = {
count: [3, 4, 6, 2, 4],
categories: ["Data1", "Data2", "Data3", "Data4", "Data5"],
titleText: "Panel Contribution",
color: "#52CFCF",
};
const podData = {
count: [3, 2, 3, 1],
categories: ["2-3 yrs", "4-6 yrs", "6-8 yrs", "10+ yrs"],
titleText: "POD Coverage",
color: "#5291CF",
};
const companyData = {
count: [2, 4, 5, 2, 1, 5],
categories: [
"Data1",
"Data2",
"Data3",
"Data4",
"Data5",
"Data6",
],
titleText: "Hired from",
color: "#CF52CF",
};
const drawerWidth = 340;
const open = true;
const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
({ theme, open }) => ({
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: `-${drawerWidth}px`,
...(open && {
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
}),
})
);
const DrawerHeader = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
justifyContent: "flex-end",
}));
const Home = () => {
return (
<Main open={open}>
<DrawerHeader />
<StackedChart />
<br />
<br />
<div style={{ marginTop: "100px", display: "flex", flexDirection: "row", flexWrap: "wrap",rowGap: "250px", coulmnGap:"100px"}}>
<BarChart data={roleData} style={{ padding: "200px" }} />
<BarChart data={spocData} />
<BarChart data={sourceData} />
<BarChart data={panelData} />
<BarChart data={podData} />
<BarChart data={companyData} />
</div>
</Main>
);
};
const CandidateForm = () => {
return (
<Main open={open}>
<DrawerHeader />
<NewCandidateForm />
{/* <h1>Test</h1> */}
</Main>
);
};
const Logout = () => {
return (
<Main open={open}>
<DrawerHeader />
<h1>Logout</h1>
</Main>
);
};
const Routes = [
{
path: "/",
sidebarName: "Dashboard",
component: Home,
},
{
path: "/candidate",
sidebarName: "Candidate",
component: CandidateForm,
},
{
path: "/logout",
sidebarName: "Logout",
component: Logout,
},
];
export default Routes;
When I tried to switch component in the above code with just the a h1 tag (that has been commented out), the nav bar works fine. Wonder if there’s a problem in the candidate form code that breaks the UI in the left pane.
Any help in debugging the issue will be much appreciated.