How to active side menu in react js - reactjs

How to active side menu in react application. I am using ListItem for display side menu in my application. But in side menu when I click on ListItem then it will redirect to new page. So How can I selected or active side menu. I tried to active using state but page is redirect to another page. So state will not work.
//import React from "react";
import React, { Component, Fragment } from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import { withStyles } from "#material-ui/core/styles";
import Drawer from "#material-ui/core/Drawer";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import List from "#material-ui/core/List";
import CssBaseline from "#material-ui/core/CssBaseline";
import Typography from "#material-ui/core/Typography";
import Divider from "#material-ui/core/Divider";
import IconButton from "#material-ui/core/IconButton";
import MenuIcon from "#material-ui/icons/Menu";
import ChevronLeftIcon from "#material-ui/icons/ChevronLeft";
import ChevronRightIcon from "#material-ui/icons/ChevronRight";
import ListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import { Link } from "./Router";
import TimerIcon from "#material-ui/icons/Timer";
import AssignmentIcon from "#material-ui/icons/Assignment";
import ReportIcon from "#material-ui/icons/Report";
import TimelineIcon from "#material-ui/icons/Timeline";
import TodoIcon from "#material-ui/icons/PlayCircleFilledWhite";
const drawerWidth = 240;
const styles = theme => ({
root: {
display: "flex"
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
menuButton: {
marginLeft: 12,
marginRight: 36
},
hide: {
display: "none"
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap"
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
drawerClose: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
overflowX: "hidden",
width: theme.spacing.unit * 7 + 1,
[theme.breakpoints.up("sm")]: {
width: theme.spacing.unit * 9 + 1
}
},
toolbar: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
...theme.mixins.toolbar
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3
}
});
class MiniDrawer extends React.Component {
state = {
open: false,
selectedIndex: 0
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
render() {
const { classes, theme } = this.props;
return (
<Fragment>
<CssBaseline />
<AppBar
position="fixed"
className={classNames(classes.appBar, {
[classes.appBarShift]: this.state.open
})}
>
<Toolbar disableGutters={!this.state.open}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(classes.menuButton, {
[classes.hide]: this.state.open
})}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
Initio Technologies
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
className={classNames(classes.drawer, {
[classes.drawerOpen]: this.state.open,
[classes.drawerClose]: !this.state.open
})}
classes={{
paper: classNames({
[classes.drawerOpen]: this.state.open,
[classes.drawerClose]: !this.state.open
})
}}
open={this.state.open}
>
<div className={classes.toolbar}>
<IconButton onClick={this.handleDrawerClose}>
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
</IconButton>
</div>
<Divider />
<List>
<ListItem
button
key="Time Tracker"
component={Link}
to="/timetracker"
>
<ListItemIcon>
<TimerIcon />
</ListItemIcon>
<ListItemText primary="Time Tracker" />
</ListItem>
<ListItem
button
key="Project"
component={Link}
to="/project"
>
<ListItemIcon>
<AssignmentIcon />
</ListItemIcon>
<ListItemText primary="Project" />
</ListItem>
<ListItem button key="Kanban" component={Link} to="/kanban">
<ListItemIcon>
<TimelineIcon />
</ListItemIcon>
<ListItemText primary="Kanban" />
</ListItem>
<ListItem
button
key="Todo"
component={Link}
to="/todo"
>
<ListItemIcon>
<TodoIcon />
</ListItemIcon>
<ListItemText primary="Todo" />
</ListItem>
<ListItem button key="Reports" component={Link} to="/reports">
<ListItemIcon>
<ReportIcon />
</ListItemIcon>
<ListItemText primary="Reports" />
</ListItem>
</List>
<Divider />
</Drawer>
</Fragment>
);
}
}
MiniDrawer.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired
};
export default withStyles(styles, { withTheme: true })(MiniDrawer);
Anyone please suggest me a solution.
Thanks

There are two ways to what I can think:
Have a Wrapper Component something like this:
const Wrapper = () => (
<React.Fragment>
<Sidebar />
<Content />
</React.Fragment>
)
In Content you can use route based rendering to switch the content. And thus manage state in sidebar.
Get the location of where your app is and setting the active item using this key.
You can use react-router to handle routing.
Hope this helps!

Related

converting material ui functional component Mini variant drawer to class component Reactjs

I am using mini variant drawer from material-ui official website
https://material-ui.com/components/drawers/#drawer
I am trying to convert into class component, but alot of issues, craches comes up. Some of them are hooks related and occurs through node modules.
Can any body have used this component in class component
import React from 'react'
import clsx from 'clsx'
import {
createStyles,
makeStyles,
useTheme,
Theme
} from '#material-ui/core/styles'
import Drawer from '#material-ui/core/Drawer'
import AppBar from '#material-ui/core/AppBar'
import Toolbar from '#material-ui/core/Toolbar'
import List from '#material-ui/core/List'
import CssBaseline from '#material-ui/core/CssBaseline'
import Typography from '#material-ui/core/Typography'
import Divider from '#material-ui/core/Divider'
import IconButton from '#material-ui/core/IconButton'
import MenuIcon from '#material-ui/icons/Menu'
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft'
import ChevronRightIcon from '#material-ui/icons/ChevronRight'
import ListItem from '#material-ui/core/ListItem'
import ListItemIcon from '#material-ui/core/ListItemIcon'
import ListItemText from '#material-ui/core/ListItemText'
import InboxIcon from '#material-ui/icons/MoveToInbox'
import MailIcon from '#material-ui/icons/Mail'
const drawerWidth = 240
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex'
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
backgroundColor: 'transparent',
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
menuButton: {
marginRight: 36
},
hide: {
display: 'none'
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap'
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
drawerClose: {
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
overflowX: 'hidden',
width: theme.spacing(7) + 1,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1
}
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar
},
content: {
flexGrow: 1,
padding: theme.spacing(3)
}
})
)
export default function MiniDrawer () {
const classes = useStyles()
const theme = useTheme()
const [open, setOpen] = React.useState(true)
const handleDrawerOpen = () => {
setOpen(true)
}
const handleDrawerClose = () => {
console.log('close clicked =')
setOpen(false)
console.log('open =', open)
}
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position='fixed'
className={clsx(classes.appBar, {
[classes.appBarShift]: open
})}
>
<Toolbar>
<IconButton
color='inherit'
aria-label='open drawer'
onClick={handleDrawerOpen}
edge='start'
className={clsx(classes.menuButton, {
[classes.hide]: open
})}
>
<MenuIcon />
</IconButton>
<Typography variant='h6' noWrap>
Mini variant drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant='permanent'
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open
})
}}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
</IconButton>
</div>
<Divider />
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<Typography paragraph></Typography>
<Typography paragraph></Typography>
</main>
</div>
)
}
You cannot use hooks in a class component. Create a state property in your class and use it instead.
From react docs: Converting a Function to a Class
You can convert a function component like Clock to a class in five steps:
Create an ES6 class, with the same name, that extends React.Component.
Add a single empty method to it called render().
Move the body of the function into the render() method.
Replace props with this.props in the render() body.
Delete the remaining empty function declaration.
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

How to contain the width of the main component in Material UI Drawer component?

I'm trying to use a Drawer in Material UI.
I want the width of the main div to take up whatever available space is left in the viewport after the menu drawer has used its space.
This is my component. I've tried setting width to auto and inherit on the content class, but it doesn't change anything.
I want the main div (where the content for a list item in the drawer) is rendered, to take only as much space is available without scrolling horizontally.
This code sandbox shows the problem: https://codesandbox.io/s/material-tab-scrolling-h13pi?file=/test.jsx
import React, { useState, useEffect } from 'react';
import { Switch, Route, Link, BrowserRouter } from "react-router-dom";
import clsx from 'clsx';
import { makeStyles, useTheme } from '#material-ui/core/styles';
import Drawer from '#material-ui/core/Drawer';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import List from '#material-ui/core/List';
import CssBaseline from '#material-ui/core/CssBaseline';
import Typography from '#material-ui/core/Typography';
import Divider from '#material-ui/core/Divider';
import IconButton from '#material-ui/core/IconButton';
import Menu from '#material-ui/core/Menu';
import MenuItem from '#material-ui/core/MenuItem';
import Container from '#material-ui/core/Container'
import MenuIcon from '#material-ui/icons/Menu';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import ChevronRightIcon from '#material-ui/icons/ChevronRight';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import InboxIcon from '#material-ui/icons/MoveToInbox';
import MailIcon from '#material-ui/icons/Mail';
import AccountCircle from '#material-ui/icons/AccountCircle';
import PaletteIcon from '#material-ui/icons/Palette';
import CenterFocusWeakIcon from '#material-ui/icons/CenterFocusWeak';
import RoomServiceIcon from '#material-ui/icons/RoomService';
import StorefrontIcon from '#material-ui/icons/Storefront';
import AssignmentIcon from '#material-ui/icons/Assignment';
import NotificationsIcon from '#material-ui/icons/Notifications';
import AccountBoxIcon from '#material-ui/icons/AccountBox';
import ContactSupportIcon from '#material-ui/icons/ContactSupport';
import BookIcon from '#material-ui/icons/Book';
import TuneIcon from '#material-ui/icons/Tune';
import SettingsIcon from '#material-ui/icons/Settings';
import CloseIcon from '#material-ui/icons/Close';
import DashboardFooter from "./DashboardFooter";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: 36,
},
hide: {
display: 'none',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerClose: {
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(7) + 1,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1,
},
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
// autoWidth: false
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
},
}));
export default function MiniDrawer() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
// const { performingAction, user, userData, roles } = this.props;
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
{process.env.REACT_APP_TITLE}
</Typography>
<IconButton color="inherit"><CloseIcon /></IconButton>
</Toolbar>
</AppBar>
<BrowserRouter>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
}),
}}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</div>
<List>
<ListItem button key="1" component={Link} to={"/DSM" }>
<ListItemIcon><PaletteIcon /></ListItemIcon>
<ListItemText primary="DS"></ListItemText>
</ListItem>
<ListItem button key="2" component={Link} to={"/MMM" }>
<ListItemIcon><CenterFocusWeakIcon /></ListItemIcon>
<ListItemText>MM</ListItemText>
</ListItem>
<ListItem button key="3" component={Link} to={"/RCM" }>
<ListItemIcon><StorefrontIcon /></ListItemIcon>
<ListItemText>Centre</ListItemText>
</ListItem>
<ListItem button key="4" component={Link} to={"/TT" }>
<ListItemIcon><AssignmentIcon /></ListItemIcon>
<ListItemText>TT</ListItemText>
</ListItem>
</List>
<Divider />
<List>
<ListItem button key="5" component={Link} to={"/Profile" }>
<ListItemIcon> <AccountBoxIcon /></ListItemIcon>
<ListItemText>Profile</ListItemText>
</ListItem>
<ListItem button key="6" component={Link} to={"/Account" }>
<ListItemIcon> <SettingsIcon /></ListItemIcon>
<ListItemText>Account</ListItemText>
</ListItem>
<ListItem button key="7" component={Link} to={"/Mail" }>
<ListItemIcon> <MailIcon /></ListItemIcon>
<ListItemText>Mail</ListItemText>
</ListItem>
<ListItem button key="8" component={Link} to={"/Notifications" }>
<ListItemIcon> <NotificationsIcon /></ListItemIcon>
<ListItemText>Notifications</ListItemText>
</ListItem>
</List>
<Divider />
<List>
<ListItem button key="9" component={Link} to={"/CM" }>
<ListItemIcon> <BookIcon /></ListItemIcon>
<ListItemText>Centre</ListItemText>
</ListItem>
<ListItem button key="10" component={Link} to={"/DCM" }>
<ListItemIcon><RoomServiceIcon /></ListItemIcon>
<ListItemText>Desk</ListItemText>
</ListItem>
<ListItem button key="11" component={Link} to={"/Support" }>
<ListItemIcon> <ContactSupportIcon /></ListItemIcon>
<ListItemText>Help and Support</ListItemText>
</ListItem>
</List>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<Switch>
<Route path="/DCM" component={""} />
<Route path="/MMM" render={() => <div>Page mm</div>} />
</Switch>
<DashboardFooter />
</main>
</BrowserRouter>
</div>
);
}
The main issue is the following in dash.jsx:
root: {
display: 'flex',
},
This is somehow defeating the mechanism in Tabs for its "scrollable tabs" functionality and results in the Tabs taking up as much width as is needed to display all of its tab buttons instead of showing scroll buttons. display: 'flex' makes it a little easier to manage the content width (such that it automatically adjusts based on the drawer width), but it isn't difficult to manage this in other ways.
Alternative 1
In my modified version of your sandbox, to remediate the effects of removing display: 'flex' from the root, I'm adding padding-left to the content with the same width as the drawer:
content: {
padding: theme.spacing(3),
paddingLeft: theme.spacing(7) + 1,
[theme.breakpoints.up("sm")]: {
paddingLeft: theme.spacing(9) + 1
}
},
contentDrawerOpen: {
paddingLeft: drawerWidth
},
...
<main className={clsx(classes.content, {[classes.contentDrawerOpen]: open})}>
Alternative 2
Another alternative is to leave display: 'flex', but specify the max-width appropriately on the content.
content: {
padding: theme.spacing(3),
maxWidth: `calc(100vw - ${theme.spacing(7) + 1}px)`,
[theme.breakpoints.up("sm")]: {
maxWidth: `calc(100vw - ${theme.spacing(9) + 1}px)`
}
},
contentDrawerOpen: {
maxWidth: `calc(100vw - ${drawerWidth}px)`
},
Alternative 3 (inspired by Ahmed Mokhtar's answer)
It also appears to be sufficient to just add overflow: "auto" to the content class for the <main> element:
content: {
padding: theme.spacing(3),
overflow: "auto"
},
This last alternative is definitely the simplest.
I fixed that by adding overflow: auto to main which I changed to use the Container component:
container: {
overflow: "auto"
}
{/* I added overflow: auto to this container*/}
<Container
component="main"
maxWidth={false}
className={classes.container}
>
<div className={classes.toolbar} />
<Switch>
<Route path="/dash" component={Dash} />
<Route path="/MatchmakerMenu" component={Dash} />
</Switch>
</Container>
CodeSandbox

VS Code thinks closing tags are missing - but all are there

My VS Code thinks I have 7 missing closing tags on this component. All of them are there.
Lines that VS Code doesn't like are marked with ** - with the error message commented in italics below the relevant closing tag.
I'm looking for tips on how I find the source of the error?
Dashboard2.jsx
import React, { useState, useEffect } from 'react';
import { Switch, Route, Link, BrowserRouter } from "react-router-dom";
import clsx from 'clsx';
import { makeStyles, useTheme } from '#material-ui/core/styles';
import Drawer from '#material-ui/core/Drawer';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import List from '#material-ui/core/List';
import CssBaseline from '#material-ui/core/CssBaseline';
import Typography from '#material-ui/core/Typography';
import Divider from '#material-ui/core/Divider';
import IconButton from '#material-ui/core/IconButton';
import Menu from '#material-ui/core/Menu';
import MenuItem from '#material-ui/core/MenuItem';
import Container from '#material-ui/core/Container'
import MenuIcon from '#material-ui/icons/Menu';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import ChevronRightIcon from '#material-ui/icons/ChevronRight';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import InboxIcon from '#material-ui/icons/MoveToInbox';
import MailIcon from '#material-ui/icons/Mail';
import AccountCircle from '#material-ui/icons/AccountCircle';
import PaletteIcon from '#material-ui/icons/Palette';
import CenterFocusWeakIcon from '#material-ui/icons/CenterFocusWeak';
import RoomServiceIcon from '#material-ui/icons/RoomService';
import StorefrontIcon from '#material-ui/icons/Storefront';
import AssignmentIcon from '#material-ui/icons/Assignment';
import NotificationsIcon from '#material-ui/icons/Notifications';
import AccountBoxIcon from '#material-ui/icons/AccountBox';
import ContactSupportIcon from '#material-ui/icons/ContactSupport';
import BookIcon from '#material-ui/icons/Book';
import TuneIcon from '#material-ui/icons/Tune';
import SettingsIcon from '#material-ui/icons/Settings';
import CloseIcon from '#material-ui/icons/Close';
import DashboardFooter from "./DashboardFooter";
import Dsm from "./Dsm/Menu";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: 36,
},
hide: {
display: 'none',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerClose: {
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(7) + 1,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1,
},
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
// autoWidth: false
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
},
}));
export default function MiniDrawer() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
// const { performingAction, user, userData, roles } = this.props;
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<CssBaseline />
**<AppBar**
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
// 'JSX element 'div' has no corresponding closing tag.'
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap style={{ letterSpacing: '.5rem'}}>
{process.env.REACT_APP_TITLE}
</Typography>
<IconButton color="inherit"><CloseIcon /></IconButton>
</Toolbar>
</AppBar>
<BrowserRouter>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
}),
}}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</div>
<List>
<ListItem button key="1" component={Link} to={"/Dsm" }>
<ListItemIcon><PaletteIcon /></ListItemIcon>
<ListItemText primary="DSM"></ListItemText>
</ListItem>
<ListItem button key="2" component={Link} to={"/MMM" }>
<ListItemIcon><CenterFocusWeakIcon /></ListItemIcon>
<ListItemText>MM</ListItemText>
</ListItem>
<ListItem button key="3" component={Link} to={"/CentreMenu" }>
<ListItemIcon><StorefrontIcon /></ListItemIcon>
<ListItemText>Centre</ListItemText>
</ListItem>
<ListItem button key="4" component={Link} to={"/ToolsMenu" }>
<ListItemIcon><AssignmentIcon /></ListItemIcon>
<ListItemText>Tools</ListItemText>
</ListItem>
</List>
<Divider />
<List>
<ListItem button key="5" component={Link} to={"/Profile" }>
<ListItemIcon> <AccountBoxIcon /></ListItemIcon>
<ListItemText>Profile</ListItemText>
</ListItem>
<ListItem button key="6" component={Link} to={"/Account" }>
<ListItemIcon> <SettingsIcon /></ListItemIcon>
<ListItemText>Account</ListItemText>
</ListItem>
<ListItem button key="7" component={Link} to={"/Mail" }>
<ListItemIcon> <MailIcon /></ListItemIcon>
<ListItemText>Mail</ListItemText>
</ListItem>
<ListItem button key="8" component={Link} to={"/Notifications" }>
<ListItemIcon> <NotificationsIcon /></ListItemIcon>
<ListItemText>Notifications</ListItemText>
</ListItem>
</List>
<Divider />
<List>
<ListItem button key="9" component={Link} to={"/KCentreMenu" }>
<ListItemIcon> <BookIcon /></ListItemIcon>
<ListItemText>KCentre</ListItemText>
</ListItem>
<ListItem button key="10" component={Link} to={"/DeskMenu" }>
<ListItemIcon><RoomServiceIcon /></ListItemIcon>
<ListItemText>Desk</ListItemText>
</ListItem>
<ListItem button key="11" component={Link} to={"/Support" }>
<ListItemIcon> <ContactSupportIcon /></ListItemIcon>
<ListItemText>Help and Support</ListItemText>
</ListItem>
</List>
</Drawer>
**<main className={classes.content}>**
**<div className={classes.toolbar} />**
**<Switch>**
**<Route path="/Dsm" component={Dsm} />**
//'Identifier expected.'
<Route path="/MM" component={Dsm} />
</Switch>
//'Unterminated string literal.'
'Expected corresponding JSX closing tag for 'p'.' - I think this is referring to the self closing div with the toolbar class - there is no p tag in this component
</main>
// 'JSX element 'main' has no corresponding closing tag.'
</BrowserRouter>
**</div>**
*//''</' expected.' - note this error message, pointing at this div, is reported twice*
);
}
I forced quit and restarted my vs code - the problems have gone now. the laptop has been hot all day. So strange.

Material-Ui reordered css upon react build when deploying to heroku

my build is not working correctly in build when i deploy to heroku. i have read about reordering the css but how do i verify this or make it work with material ui.
i have tried to look at the inspector and verify css is reordered.
this is the container and the whole screen and is being set off a good bit. the whole build in total has extra padding and the header is not working correctly. it can hopefully be seen at this address.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import { logoutUser } from '../../actions/authActions';
import { getSongs, getSong } from '../../actions/songActions';
import { clearCurrentProfile, getCurrentProfile } from '../../actions/profileActions';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
import Drawer from '#material-ui/core/Drawer';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import List from '#material-ui/core/List';
import Typography from '#material-ui/core/Typography';
import Divider from '#material-ui/core/Divider';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import ExpandMoreIcon from '#material-ui/icons/ExpandMore';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import FadeIn from 'react-fade-in';
import ListItem from '#material-ui/core/ListItem';
import Modal from '#material-ui/core/Modal';
import Editor from "./Editor";
import Viewer from "./Viewer";
import ANContainer from '../audio-and-notes/ANContainer';
import AddSongModal from './AddSongModal';
import Resources from '../resources/Resources';
import Songs from '../songs/Songs';
import Song from '../song/Song';
import Spinner from '../../common/Spinner';
import { MenuItem } from '#material-ui/core';
import InboxIcon from "#material-ui/icons/MoveToInbox";
import ListItemText from "#material-ui/core/ListItemText";
import Menu from "#material-ui/core/Menu";
import MailIcon from "#material-ui/icons/Mail";
import { ExpansionPanelDetails } from "#material-ui/core";
const logo = require('../../img/songbird-logo.png');
const drawerWidth = 276;
const styles = theme => ({
root: {
display: 'flex',
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
appBar: {
backgroundColor: "#203e55",
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginLeft: 12,
marginRight: 36,
},
menuButtonHidden: {
display: 'none',
},
//right side menu
menu2Button: {
marginLeft: 0,
marginRight: 0,
},
menu2ButtonHidden: {
display: 'none',
},
//songbook
drawerTitle: {
color: "white",
flexGrow: 1,
textAlign: "center"
},
//songbird
title: {
marginLeft: "300px",
flexGrow: 1,
fontFamily: 'Open Sans, sans-serif'
},
drawerPaper: {
backgroundColor: "#203e55",
color: "white",
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
//how much it pops out from the drawer pre-view
width: theme.spacing.unit * 0,
[theme.breakpoints.up('sm')]: {
width: theme.spacing.unit * 0,
},
},
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
height: '96.6vh',
overflow: 'auto',
},
h5: {
marginBottom: theme.spacing.unit * 2,
},
});
const options = ["Viewer", "Resources", "Notes"];
class AppContainer extends Component {
state = {
open: false,
left: false,
right: false,
anchorEl: null,
selectedIndex: 0
};
toggleDrawer = (side, open) => () => {
this.setState({ [side]: open
});
};
componentDidMount(){
this.props.getSongs();
this.props.getCurrentProfile();
}
//trying to maintain the component state for switcher
pageControl() {
if (this.state.selectedIndex === 0) {
return <Viewer />;
} else if (this.state.selectedIndex === 1) {
return <Resources />;
} else if (this.state.selectedIndex === 2) {
return <ANContainer />;
}
}
toggleDrawer = (side, open) => () => {
this.setState({
[side]: open,
});
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
handleClickListItem = event => {
this.setState({ anchorEl: event.currentTarget });
this.pageControl();
};
handleMenuItemClick = (event, index) => {
this.setState({ selectedIndex: index, anchorEl: null });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
openSongModal = () => {
//open popup here
}
onLogoutClick(e){
e.preventDefault();
this.props.clearCurrentProfile();
this.props.logoutUser();
}
render(){
//for routing
const { isAuthenticated, user } = this.props.auth;
const { profile, loading } = this.props.profile;
const { classes } = this.props;
const { anchorEl } = this.state;
//will display iframe for wix site if the user does not have an account
const unauthContent = (
<div>
<nav class="navbar">
<div class="nav-wrapper">
<Link to="/" class="brand-logo"><img className="navlogo" src={logo} /></Link>
<ul class="right hide-on-med-and-down">
<li><Link to="/register">Sign Up</Link></li>
<li><Link to="/login">Log In</Link></li>
</ul>
</div>
</nav>
<iframe
style={{height: "92vh", width: "100%"}}
src="https://www.songbirdapp.com/"
frameBorder="none">
</iframe>
</div>
);
//rendered content
return(
<div className={classes.root}>
<CssBaseline />
{/* NAVBAR SECTION!!! */}
<AppBar
position="absolute"
className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
>
<Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(
classes.menuButton,
this.state.open && classes.menuButtonHidden,
)}
>
<MenuIcon />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
Editor
</Typography>
<div className="hide-on-med-and-down">
</div>
{/* TO CHANGE THE VIEWER RESOURCE PANEL */}
<List
component="nav-wrapper"
style={{
display: "flex",
flexDirection: "row",
alignContent: "center",
justifyContent: "flex-end",
width: "14%",
backgroundColor: "transparent"
}}
>
<ListItem
button
aria-haspopup="true"
aria-controls="lock-menu"
aria-label="Select Resource"
onClick={this.handleClickListItem}
>
<ListItemText
style={{
color: "white"
}}
primary={options[this.state.selectedIndex]}
/>
<ExpandMoreIcon />
</ListItem>
</List>
<Menu
id="lock-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
{options.map((option, index) => (
<MenuItem
key={option}
disabled={index === 4}
selected={index === this.state.selectedIndex}
onClick={event =>
this.handleMenuItemClick(event, index) & this.pageControl()
}
>
{option}
</MenuItem>
))}
</Menu>
{/* End Resources */}
</Toolbar>
</AppBar>
{/* NAVBAR SECTION END */}
{/* LEFT DRAWER */}
<Drawer
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classes.toolbarIcon}>
<Typography variant="h6" className={classes.drawerTitle}>
Songs
</Typography>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon style={{color: "white"}}/>
</IconButton>
</div>
<Divider />
<List>
<AddSongModal />
<Songs />
</List>
<Divider />
<List>
<ListItem>
<Link className="menu-listitem" to="/myprofile">
{user.firstName} {user.lastName}
</Link>
</ListItem>
<ListItem>
<Link className="menu-listitem" to="/subscription">
Your Subscription
</Link>
</ListItem>
<ListItem>
<a className="logout-listitem"
href=""
onClick={this.onLogoutClick.bind(this)}
>
Logout</a>
</ListItem>
</List>
</Drawer>
{/* LEFT DRAWER END */}
<main className={classes.content}>
<div
className="row no-padding"
style={{
display: "flex",
margin: 0
}}
>
<div
className="col s12 no-padding"
style={{
margin: 0
}}
>
<Song />
</div>
<div className="col s12 m9 no-padding" style={{}}>
{this.pageControl()}
</div>
</div>
</main>
{/* RIGHT DRAWER TO BE USED FOR DRAFTS */}
{/* <Drawer
anchor="right"
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classes.toolbarIcon}>
<Typography variant="h6" className={classes.drawerTitle}>
Songs
</Typography>
<IconButton onClick={this.handleDrawerTwoClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<List>
<ListItem>Draft 04/12/2019 1PM</ListItem>
<ListItem>Draft 04/12/2019 12:30PM</ListItem>
<ListItem>Draft 04/10/2019 3PM</ListItem>
<ListItem>Draft 04/09/2019 11AM</ListItem>
<ListItem>Draft 04/09/2019 9PM</ListItem>
<ListItem>Draft 04/08/2019 8:34PM</ListItem>
</List>
</Drawer> */}
{/* RIGHT DRAWER END */}
</div>
);
}
}
AppContainer.propTypes = {
getCurrentProfile: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
profile: PropTypes.object.isRequired,
song: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
logoutUser: PropTypes.func.isRequired,
getSongs: PropTypes.func.isRequired,
};
const mapStateToProps = (state) => ({
profile: state.profile,
auth: state.auth,
song: state.song,
});
export default connect(mapStateToProps, { logoutUser, getCurrentProfile, clearCurrentProfile, getSongs, getSong })(withStyles(styles)(AppContainer));
https://ovrchr-songbirdapp.herokuapp.com/

Drawer Content Change

How to change the content when clicked on different items.
I have two different archives (Home.js and Sidebar.js), in Sidebar I declare the items, but in Home, I put some buttons. But I don't know how to pass the information that I want to change between the items listed in my sidebar.
I am using this Drawer example (https://material-ui.com/demos/drawers/#persistent-drawer).
Project Running
in my app.js i have
import React, { Component } from 'react';
import Footer from './componets/Footer';
import Home from './componets/Home';
import store from './store'
import { Provider } from 'react-redux';
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="content">
<Drawer/>
<Home/>
<Footer/>
</div>
</Provider>
);
}
}
export default App;
In my css file:
.conteudo{
display: grid;
grid-template-areas:
'home home home home'
'home home home home'
'footer footer footer footer'
}
I got a way to do it. But for every button in my drawer, i need to create a function that puts a number in my value. Have a way to declare one function and that every button in my class pass a number to my value?
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '#material-ui/core/styles';
import Drawer from '#material-ui/core/Drawer';
import CssBaseline from '#material-ui/core/CssBaseline';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import List from '#material-ui/core/List';
import Typography from '#material-ui/core/Typography';
import Divider from '#material-ui/core/Divider';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import Button from '#material-ui/core/Button'
import HomeIcon from '#material-ui/icons/Home'
import MeetingRoomIcon from '#material-ui/icons/MeetingRoom'
const drawerWidth = 240;
function Conteudo(props){
return(
<Typography component='div'>
{props.children}
</Typography>
)
}
Conteudo.propTypes ={
children: PropTypes.node.isRequired,
};
const styles = theme => ({
root: {
display: 'flex',
},
appBar: {
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginLeft: 12,
marginRight: 20,
},
hide: {
display: 'none',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
drawerHeader: {
display: 'flex',
alignItems: 'center',
padding: '0 8px',
...theme.mixins.toolbar,
justifyContent: 'flex-end',
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: -drawerWidth,
},
contentShift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
},
});
class PersistentDrawerLeft extends React.Component {
state = {
open: false,
value: 0
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
checkEvent = () => {
this.setState({value : 1})
console.log({value : 1})
}
checkEvent1 = () => {
this.setState({value : 0})
console.log({value : 0})
}
handleChange = (event, value) => {
this.setState({ value })
console.log(value)
}
render() {
const { classes, theme } = this.props;
const { open } = this.state;
const { value } = this.state;
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={classNames(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar disableGutters={!open}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(classes.menuButton, open && classes.hide)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
Drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
value ={value}
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>
<ListItem button onClick={this.checkEvent1} onChange={this.handleChange}>
<ListItemIcon>
<HomeIcon/>
</ListItemIcon>
<ListItemText primary='Central'/>
</ListItem>
<ListItem button onClick={this.checkEvent} onChange={this.handleChange}>
<ListItemIcon>
<MeetingRoomIcon/>
</ListItemIcon>
<ListItemText primary='BedRoom'/>
</ListItem>
</List>
<Divider />
</Drawer>
<main
className={classNames(classes.content, {
[classes.contentShift]: open,
})}
>
<div className={classes.drawerHeader} onChange={this.handleChange}/>
{value === 0 && <Conteudo> <Button variant="contained" color="primary">Default</Button> </Conteudo>}
{value === 1 && <Conteudo><Button variant="contained" color="secondary">Default</Button> </Conteudo>}
{value === 2 && <Conteudo><Button variant="contained" color="danger">Default</Button> </Conteudo>}
</main>
</div>
);
}
}
PersistentDrawerLeft.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(PersistentDrawerLeft);

Resources