groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: stop hiding app bar on scroll

Browse Source
This commit is contained in:
Ali BARIN
2022-08-25 16:48:57 +02:00
parent 743b6d6587
commit 6271cedc25
2 changed files with 44 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
packages/web/src/components/AppBar/index.tsx
View File

@@ -13,7 +13,6 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import * as URLS from 'config/urls'; import * as URLS from 'config/urls';
import AccountDropdownMenu from 'components/AccountDropdownMenu'; import AccountDropdownMenu from 'components/AccountDropdownMenu';
import Container from 'components/Container'; import Container from 'components/Container';
import HideOnScroll from 'components/HideOnScroll';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Link } from './style'; import { Link } from './style';
@@ -50,53 +49,51 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
}; };
return ( return (
<HideOnScroll> <MuiAppBar>
<MuiAppBar> <Container maxWidth={maxWidth} disableGutters>
<Container maxWidth={maxWidth} disableGutters> <Toolbar>
<Toolbar> <IconButton
<IconButton size="large"
size="large" edge="start"
edge="start" color="inherit"
color="inherit" aria-label="open drawer"
aria-label="open drawer" onClick={drawerOpen ? onDrawerClose : onDrawerOpen}
onClick={drawerOpen ? onDrawerClose : onDrawerOpen} sx={{ mr: 2 }}
sx={{ mr: 2 }} >
> {drawerOpen && matchSmallScreens ? <MenuOpenIcon /> : <MenuIcon />}
{drawerOpen && matchSmallScreens ? <MenuOpenIcon /> : <MenuIcon />} </IconButton>
</IconButton>
<div style={{ flexGrow: 1 }}> <div style={{ flexGrow: 1 }}>
<Link to={URLS.DASHBOARD}> <Link to={URLS.DASHBOARD}>
<Typography <Typography
variant="h6" variant="h6"
component="h1" component="h1"
noWrap noWrap
> >
<FormattedMessage id="brandText" /> <FormattedMessage id="brandText" />
</Typography> </Typography>
</Link> </Link>
</div> </div>
<IconButton <IconButton
size="large" size="large"
edge="start" edge="start"
color="inherit" color="inherit"
onClick={handleAccountMenuOpen} onClick={handleAccountMenuOpen}
aria-controls={accountMenuId} aria-controls={accountMenuId}
aria-label="open profile menu" aria-label="open profile menu"
> >
<AccountCircleIcon /> <AccountCircleIcon />
</IconButton> </IconButton>
</Toolbar> </Toolbar>
</Container> </Container>
<AccountDropdownMenu <AccountDropdownMenu
anchorEl={accountMenuAnchorElement} anchorEl={accountMenuAnchorElement}
id={accountMenuId} id={accountMenuId}
open={isMenuOpen} open={isMenuOpen}
onClose={handleAccountMenuClose} onClose={handleAccountMenuClose}
/> />
</MuiAppBar> </MuiAppBar>
</HideOnScroll>
); );
} }

5
packages/web/src/components/Drawer/index.tsx
View File

@@ -8,7 +8,6 @@ import useMediaQuery from '@mui/material/useMediaQuery';
import Badge from '@mui/material/Badge'; import Badge from '@mui/material/Badge';
import ListItemLink from 'components/ListItemLink'; import ListItemLink from 'components/ListItemLink';
import HideOnScroll from 'components/HideOnScroll';
import useFormatMessage from 'hooks/useFormatMessage'; import useFormatMessage from 'hooks/useFormatMessage';
import { Drawer as BaseDrawer } from './style'; import { Drawer as BaseDrawer } from './style';
@@ -47,9 +46,7 @@ export default function Drawer(props: DrawerProps): React.ReactElement {
> >
{/* keep the following encapsulating `div` to have `space-between` children */} {/* keep the following encapsulating `div` to have `space-between` children */}
<div> <div>
<HideOnScroll unmountOnExit> <Toolbar />
<Toolbar />
</HideOnScroll>
<List sx={{ py: 0, mt: 3 }}> <List sx={{ py: 0, mt: 3 }}>
{links.map(({ Icon, primary, to }, index) => ( {links.map(({ Icon, primary, to }, index) => (