Added theme swapping.
This commit is contained in:
wildscotsmen
parent
c3974fe5ea
commit
0dd7ce50d2
|
|
@ -33,6 +33,9 @@ import ExpandLess from '@material-ui/icons/ExpandLess';
|
|||
import ExpandMore from '@material-ui/icons/ExpandMore';
|
||||
import Collapse from '@material-ui/core/Collapse';
|
||||
import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
|
||||
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
|
||||
import Switch from '@material-ui/core/Switch';
|
||||
import indigo from '@material-ui/core/colors/indigo';
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
|
|
@ -77,6 +80,17 @@ class ResponsiveDrawer extends React.Component {
|
|||
key: 'Home',
|
||||
open: false,
|
||||
open2: false,
|
||||
theme: createMuiTheme({
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
},
|
||||
palette: {
|
||||
primary: indigo,
|
||||
secondary: indigo
|
||||
}
|
||||
}),
|
||||
themeName: 'light',
|
||||
themeChecked: true
|
||||
};
|
||||
|
||||
handleDrawerToggle = () => {
|
||||
|
|
@ -97,8 +111,38 @@ class ResponsiveDrawer extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
handleChange = name => event => {
|
||||
this.setState({ [name]: event.target.checked });
|
||||
if (this.state.themeName === 'light') {
|
||||
this.setState({
|
||||
themeName: 'dark',
|
||||
theme: createMuiTheme({
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
},
|
||||
palette: {
|
||||
type: 'dark'
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.setState({
|
||||
themeName: 'light',
|
||||
theme: createMuiTheme({
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
},
|
||||
palette: {
|
||||
primary: indigo,
|
||||
secondary: indigo
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { classes, theme } = this.props;
|
||||
const { classes } = this.props;
|
||||
|
||||
const drawer = (
|
||||
<div>
|
||||
|
|
@ -178,70 +222,78 @@ class ResponsiveDrawer extends React.Component {
|
|||
);
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<CssBaseline />
|
||||
<AppBar position="fixed" className={classes.appBar}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="Open drawer"
|
||||
onClick={this.handleDrawerToggle}
|
||||
className={classes.menuButton}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="title" color="inherit" noWrap>
|
||||
Marten Tracker
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<nav className={classes.drawer}>
|
||||
<Hidden smUp implementation="css">
|
||||
<Drawer
|
||||
container={this.props.container}
|
||||
variant="temporary"
|
||||
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
|
||||
open={this.state.mobileOpen}
|
||||
onClose={this.handleDrawerToggle}
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
ModalProps={{
|
||||
keepMounted: true, // Better open performance on mobile.
|
||||
}}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
<Hidden xsDown implementation="css">
|
||||
<Drawer
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
variant="permanent"
|
||||
open
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
</nav>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.toolbar} />
|
||||
{this.state.key === 'Home' && <Home />}
|
||||
{this.state.key === 'Report' && <Report />}
|
||||
{this.state.key === 'Map' && <ViewMap />}
|
||||
{this.state.key === 'List' && <SightingList />}
|
||||
{this.state.key === 'About' && <About />}
|
||||
{this.state.key === 'Contact' && <Contact />}
|
||||
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
|
||||
{this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate'/>}
|
||||
{this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced'/>}
|
||||
{this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'}/>}
|
||||
{this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'}/>}
|
||||
{this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/>}
|
||||
{this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'}/>}
|
||||
</main>
|
||||
</div>
|
||||
<MuiThemeProvider theme={this.state.theme}>
|
||||
<div className={classes.root}>
|
||||
<CssBaseline />
|
||||
<AppBar position="fixed" color="primary" className={classes.appBar}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="Open drawer"
|
||||
onClick={this.handleDrawerToggle}
|
||||
className={classes.menuButton}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="title" color="inherit" noWrap>
|
||||
Marten Tracker
|
||||
</Typography>
|
||||
<Switch
|
||||
checked={this.state.themeChecked}
|
||||
onChange={this.handleChange('themeChecked')}
|
||||
value="themeChecked"
|
||||
color="default"
|
||||
/>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<nav className={classes.drawer}>
|
||||
<Hidden smUp implementation="css">
|
||||
<Drawer
|
||||
container={this.props.container}
|
||||
variant="temporary"
|
||||
anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
|
||||
open={this.state.mobileOpen}
|
||||
onClose={this.handleDrawerToggle}
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
ModalProps={{
|
||||
keepMounted: true, // Better open performance on mobile.
|
||||
}}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
<Hidden xsDown implementation="css">
|
||||
<Drawer
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
variant="permanent"
|
||||
open
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
</nav>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.toolbar} />
|
||||
{this.state.key === 'Home' && <Home />}
|
||||
{this.state.key === 'Report' && <Report />}
|
||||
{this.state.key === 'Map' && <ViewMap />}
|
||||
{this.state.key === 'List' && <SightingList key={this.state.themeName} />}
|
||||
{this.state.key === 'About' && <About />}
|
||||
{this.state.key === 'Contact' && <Contact />}
|
||||
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
|
||||
{this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate' />}
|
||||
{this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced' />}
|
||||
{this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'} />}
|
||||
{this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'} />}
|
||||
{this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'} />}
|
||||
{this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'} />}
|
||||
</main>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue