redo elevation prop change, Sidebar renders under Topbar now
This commit is contained in:
parent
05b19413e1
commit
3609cf5d5d
|
@ -8,7 +8,7 @@ export default function Header() {
|
|||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<AppBar position="static" component="footer" elevation={0}>
|
||||
<AppBar position="static" component="footer">
|
||||
<Container>
|
||||
<Toolbar disableGutters className={classes.toolbar}>
|
||||
<Typography align="center" className={classes.copyright}>
|
||||
|
|
|
@ -31,7 +31,7 @@ export default function Header() {
|
|||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<AppBar position="fixed" elevation={0}>
|
||||
<AppBar position="fixed">
|
||||
<Container>
|
||||
<Toolbar disableGutters className={classes.toolbar}>
|
||||
<div className={classes.searchInputWrapper}>
|
||||
|
|
|
@ -57,7 +57,7 @@ function PageLayout({ children }: Props) {
|
|||
[classes.shiftContent]: isDesktop,
|
||||
})}
|
||||
>
|
||||
<TopBar openSidebar={openSidebar} t={t} />
|
||||
<TopBar openSidebar={open ? closeSidebar : openSidebar} t={t} />
|
||||
<Toolbar />
|
||||
<Sidebar
|
||||
onClose={closeSidebar}
|
||||
|
|
|
@ -7,7 +7,13 @@ import useStyles from './useStyles';
|
|||
import * as ROUTES from '@config/routes';
|
||||
import { Route } from './components/Nav/types';
|
||||
|
||||
import { Divider, SwipeableDrawer, DrawerProps } from '@material-ui/core';
|
||||
import { useTheme } from '@material-ui/core/styles';
|
||||
import {
|
||||
Divider,
|
||||
SwipeableDrawer,
|
||||
DrawerProps,
|
||||
Toolbar,
|
||||
} from '@material-ui/core';
|
||||
import DashboardIcon from '@material-ui/icons/Dashboard';
|
||||
|
||||
import Nav from './components/Nav/Nav';
|
||||
|
@ -25,6 +31,7 @@ export interface Props {
|
|||
const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => {
|
||||
const classes = useStyles();
|
||||
const { key } = useServer();
|
||||
const theme = useTheme();
|
||||
|
||||
const routes: Route[] = [
|
||||
{
|
||||
|
@ -39,13 +46,14 @@ const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => {
|
|||
return (
|
||||
<SwipeableDrawer
|
||||
anchor="left"
|
||||
classes={{ paper: classes.drawer }}
|
||||
classes={{ paper: classes.drawerPaper }}
|
||||
ModalProps={{ style: { zIndex: theme.zIndex.appBar - 1 } }}
|
||||
onClose={onClose}
|
||||
onOpen={onOpen}
|
||||
open={open}
|
||||
variant={variant}
|
||||
disableBackdropTransition
|
||||
>
|
||||
<Toolbar />
|
||||
<div className={clsx(classes.root, className)}>
|
||||
<ServerInfo t={t} />
|
||||
<Divider />
|
||||
|
|
|
@ -38,7 +38,6 @@ function ListItem({ route, nestedLevel }: Props) {
|
|||
button
|
||||
component={Box}
|
||||
pl={nestedLevel}
|
||||
dense
|
||||
>
|
||||
<ListItemIcon>{route.Icon}</ListItemIcon>
|
||||
<ListItemText primary={route.name} />
|
||||
|
|
|
@ -2,12 +2,9 @@ import { makeStyles } from '@material-ui/core/styles';
|
|||
import { DRAWER_WIDTH } from './contants';
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
drawer: {
|
||||
drawerPaper: {
|
||||
zIndex: `${theme.zIndex.appBar - 1} !important` as any,
|
||||
width: DRAWER_WIDTH,
|
||||
[theme.breakpoints.up('lg')]: {
|
||||
marginTop: 64,
|
||||
height: 'calc(100% - 64px) !important',
|
||||
},
|
||||
},
|
||||
root: {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
|
|
|
@ -13,7 +13,7 @@ export interface Props {
|
|||
|
||||
const TopBar = ({ className, openSidebar }: Props) => {
|
||||
return (
|
||||
<AppBar className={clsx(className)} elevation={0}>
|
||||
<AppBar className={clsx(className)}>
|
||||
<Toolbar>
|
||||
<Hidden lgUp>
|
||||
<IconButton color="inherit" onClick={openSidebar}>
|
||||
|
|
|
@ -21,7 +21,6 @@ const createTheme = (): Theme => {
|
|||
},
|
||||
MuiAppBar: {
|
||||
color: 'default',
|
||||
elevation: 0,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
Reference in New Issue
Block a user