djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix app header responsiveness

Browse source
This commit is contained in:
dominik-zeglen 2020-09-10 17:37:25 +02:00
parent a7c65f77e4
commit 95f11a3032
1 changed files with 8 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/AppLayout/AppLayout.tsx
View file

@ -1,6 +1,6 @@
import Hidden from "@material-ui/core/Hidden";
import LinearProgress from "@material-ui/core/LinearProgress"; import LinearProgress from "@material-ui/core/LinearProgress";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles, Theme } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { createConfigurationMenu } from "@saleor/configuration"; import { createConfigurationMenu } from "@saleor/configuration";
import useAppState from "@saleor/hooks/useAppState"; import useAppState from "@saleor/hooks/useAppState";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
@ -108,6 +108,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
const [appState, dispatchAppState] = useAppState(); const [appState, dispatchAppState] = useAppState();
const { location } = useRouter(); const { location } = useRouter();
const [isNavigatorVisible, setNavigatorVisibility] = React.useState(false); const [isNavigatorVisible, setNavigatorVisibility] = React.useState(false);
const isMdUp = useMediaQuery((theme: Theme) => theme.breakpoints.up("md"));
const menuStructure = createMenuStructure(intl); const menuStructure = createMenuStructure(intl);
const configurationMenu = createConfigurationMenu(intl); const configurationMenu = createConfigurationMenu(intl);
@ -141,7 +142,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
<AppHeaderContext.Provider value={appHeaderAnchor}> <AppHeaderContext.Provider value={appHeaderAnchor}>
<AppActionContext.Provider value={appActionAnchor}> <AppActionContext.Provider value={appActionAnchor}>
<div className={classes.root}> <div className={classes.root}>
<Hidden smDown> {isMdUp && (
<SideBar <SideBar
menuItems={menuStructure} menuItems={menuStructure}
location={location.pathname} location={location.pathname}
@ -149,7 +150,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
renderConfigure={renderConfigure} renderConfigure={renderConfigure}
onMenuItemClick={navigate} onMenuItemClick={navigate}
/> />
</Hidden> )}
<div className={classes.content}> <div className={classes.content}>
{appState.loading ? ( {appState.loading ? (
<LinearProgress className={classes.appLoader} color="primary" /> <LinearProgress className={classes.appLoader} color="primary" />
@ -160,10 +161,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
<div> <div>
<Container> <Container>
<div className={classes.header}> <div className={classes.header}>
<Hidden smDown> {isMdUp && <div ref={appHeaderAnchor} />}
<div ref={appHeaderAnchor} /> {!isMdUp && <>=</>}
</Hidden>
<Hidden mdUp>=</Hidden>
<div className={classes.spacer} /> <div className={classes.spacer} />
<div className={classes.userBar}> <div className={classes.userBar}>
<ThemeSwitch <ThemeSwitch
@ -186,9 +185,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
/> />
</div> </div>
</div> </div>
<Hidden mdUp> {!isMdUp && <div ref={appHeaderAnchor} />}
<div ref={appHeaderAnchor} />
</Hidden>
</Container> </Container>
</div> </div>
<main className={classes.view}> <main className={classes.view}>