mirror of https://github.com/linkerd/linkerd2.git
Fix sidebar not rendering to end of page (#1827)
Also make main content independently scrollable. Part of #1781 Signed-off-by: Andrew Seigner <siggy@buoyant.io>
This commit is contained in:
Andrew Seigner
GitHub
parent
1b2b02985b
commit
3cd13f2913
|
|
@ -36,84 +36,94 @@ import classNames from 'classnames';
|
|||
import { withContext } from './util/AppContext.jsx';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
|
||||
const drawerWidth = 250;
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
height: "100vh",
|
||||
width: "100%",
|
||||
zIndex: 1,
|
||||
overflowX: 'scroll',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
},
|
||||
appBar: {
|
||||
color: 'white',
|
||||
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',
|
||||
},
|
||||
drawerPaper: {
|
||||
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,
|
||||
}),
|
||||
width: theme.spacing.unit * 7,
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: theme.spacing.unit * 9,
|
||||
const styles = theme => {
|
||||
const drawerWidth = theme.spacing.unit * 31;
|
||||
const drawerWidthClosed = theme.spacing.unit * 9;
|
||||
const navLogoWidth = theme.spacing.unit * 22.5;
|
||||
const contentPadding = theme.spacing.unit * 3;
|
||||
|
||||
const enteringFn = prop => theme.transitions.create(prop, {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
});
|
||||
const leavingFn = prop => theme.transitions.create(prop, {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
});
|
||||
|
||||
const entering = enteringFn('width');
|
||||
const leaving = leavingFn('width');
|
||||
|
||||
return {
|
||||
root: {
|
||||
display: 'flex',
|
||||
},
|
||||
},
|
||||
toolbar: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '0 8px',
|
||||
...theme.mixins.toolbar,
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: theme.spacing.unit * 3,
|
||||
},
|
||||
linkerdLogoContainer: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
linkerdNavLogo: {
|
||||
minWidth: "180px",
|
||||
},
|
||||
navMenuItem: {
|
||||
paddingLeft: "24px",
|
||||
paddingRight: "24px",
|
||||
},
|
||||
});
|
||||
appBar: {
|
||||
position: "absolute",
|
||||
width: `calc(100% - ${drawerWidthClosed}px)`,
|
||||
color: 'white',
|
||||
transition: leaving,
|
||||
},
|
||||
appBarShift: {
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
transition: entering,
|
||||
},
|
||||
drawer: {
|
||||
width: drawerWidth,
|
||||
transition: entering,
|
||||
},
|
||||
drawerClose: {
|
||||
width: drawerWidthClosed,
|
||||
transition: leaving,
|
||||
},
|
||||
drawerPaper: {
|
||||
overflowX: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
width: drawerWidth,
|
||||
transition: entering,
|
||||
},
|
||||
drawerPaperClose: {
|
||||
transition: leaving,
|
||||
width: drawerWidthClosed,
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: drawerWidthClosed,
|
||||
},
|
||||
},
|
||||
toolbar: theme.mixins.toolbar,
|
||||
navToolbar: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: `0 ${theme.spacing.unit}px`,
|
||||
boxShadow: theme.shadows[4], // to match elevation == 4 on main AppBar
|
||||
...theme.mixins.toolbar,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: contentPadding,
|
||||
transition: entering,
|
||||
},
|
||||
contentDrawerClose: {
|
||||
width: `calc(100% - ${drawerWidthClosed}px)`,
|
||||
transition: leaving,
|
||||
},
|
||||
linkerdNavLogo: {
|
||||
minWidth: `${navLogoWidth}px`,
|
||||
transition: enteringFn(['margin', 'opacity']),
|
||||
},
|
||||
linkerdNavLogoClose: {
|
||||
opacity: "0",
|
||||
marginLeft: `-${navLogoWidth-theme.spacing.unit/2}px`,
|
||||
transition: leavingFn(['margin', 'opacity']),
|
||||
},
|
||||
navMenuItem: {
|
||||
paddingLeft: `${contentPadding}px`,
|
||||
paddingRight: `${contentPadding}px`,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
class NavigationBase extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -161,12 +171,8 @@ class NavigationBase extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
handleDrawerOpen = () => {
|
||||
this.setState({ drawerOpen: true });
|
||||
};
|
||||
|
||||
handleDrawerClose = () => {
|
||||
this.setState({ drawerOpen: false });
|
||||
handleDrawerClick = () => {
|
||||
this.setState(state => ({ drawerOpen: !state.drawerOpen }));
|
||||
};
|
||||
|
||||
handleHelpMenuClick = () => {
|
||||
|
|
@ -195,17 +201,8 @@ class NavigationBase extends React.Component {
|
|||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar
|
||||
position="absolute"
|
||||
className={classNames(classes.appBar, {[classes.appBarShift]: this.state.drawerOpen} )}>
|
||||
<Toolbar disableGutters={!this.state.drawerOpen}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="Open drawer"
|
||||
onClick={this.handleDrawerOpen}
|
||||
className={classNames(classes.menuButton, {[classes.hide]: this.state.drawerOpen} )}>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
|
||||
<Toolbar>
|
||||
<Typography variant="h6" color="inherit" noWrap>
|
||||
<BreadcrumbHeader {...this.props} />
|
||||
</Typography>
|
||||
|
|
@ -213,17 +210,18 @@ class NavigationBase extends React.Component {
|
|||
</AppBar>
|
||||
|
||||
<Drawer
|
||||
className={classNames(classes.drawer, {[classes.drawerClose]: !this.state.drawerOpen} )}
|
||||
variant="permanent"
|
||||
classes={{
|
||||
paper: classNames(classes.drawerPaper, {[classes.drawerPaperClose]: !this.state.drawerOpen} ),
|
||||
}}
|
||||
open={this.state.drawerOpen}>
|
||||
<div className={classNames(classes.linkerdLogoContainer, classes.toolbar)}>
|
||||
<div className={classes.linkerdNavLogo}>
|
||||
<div className={classNames(classes.navToolbar)}>
|
||||
<div className={classNames(classes.linkerdNavLogo, {[classes.linkerdNavLogoClose]: !this.state.drawerOpen} )}>
|
||||
{linkerdWordLogo}
|
||||
</div>
|
||||
<IconButton className="drawer-toggle-btn" onClick={this.handleDrawerClose}>
|
||||
<ChevronLeftIcon />
|
||||
<IconButton className="drawer-toggle-btn" onClick={this.handleDrawerClick}>
|
||||
{this.state.drawerOpen ? <ChevronLeftIcon /> : <MenuIcon />}
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -282,7 +280,8 @@ class NavigationBase extends React.Component {
|
|||
uuid={this.props.uuid} />
|
||||
}
|
||||
</Drawer>
|
||||
<main className={classes.content}>
|
||||
|
||||
<main className={classNames(classes.content, {[classes.contentDrawerClose]: !this.state.drawerOpen})}>
|
||||
<div className={classes.toolbar} />
|
||||
<div className="main-content"><ChildComponent {...this.props} /></div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in New Issue