casl/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor(Toolbar): react to different screen sizes

Browse Source
This commit is contained in:
m-tartari
2024-02-01 20:22:18 +01:00
parent 3daf2cb4b2
commit 5bb41800ac
1 changed files with 116 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/molecules/Toobar/Toobar.tsx
+116 -59
View File
@@ -1,6 +1,21 @@
import React from 'react' import React from 'react'
import { Link as RouterLink } from 'react-router-dom' import { Link as RouterLink } from 'react-router-dom'
import { AppBar, Button, IconButton, List, ListItem, ListItemButton, Stack, SwipeableDrawer, Toolbar, Typography, styled } from '@mui/material' import {
AppBar,
Box,
Button,
Divider,
Drawer,
IconButton,
List,
ListItem,
ListItemButton,
ListItemText,
Stack,
Toolbar,
Typography,
styled,
} from '@mui/material'
import MenuIcon from '@mui/icons-material/Menu' import MenuIcon from '@mui/icons-material/Menu'
const AppBarButton = styled(Button<typeof RouterLink>)(({ theme }) => ({ const AppBarButton = styled(Button<typeof RouterLink>)(({ theme }) => ({
@@ -20,67 +35,109 @@ const DrawerButton = styled(ListItemButton<typeof RouterLink>)(({ theme }) => ({
}, },
})) }))
const CustomToobar = () => { type CustomToobarProps = {
const [open, setOpen] = React.useState(false) drawerWidth?: number
return ( }
<AppBar const CustomToobar: React.FC<CustomToobarProps> = ({ drawerWidth = 240 }) => {
sx={{ const [mobileOpen, setMobileOpen] = React.useState(false)
backgroundColor: theme => (theme.palette.mode === 'dark' ? 'transparent' : undefined),
}}> const handleDrawerToggle = () => {
<Toolbar> setMobileOpen(prevState => !prevState)
<AppBarButton component={RouterLink} to="/" sx={{ mr: 'auto' }}> }
<Typography variant="h5">Michele Tartari</Typography>
</AppBarButton> const drawer = (
<Stack direction="row" spacing={2} sx={{ display: { xs: 'none', md: 'flex' } }}> <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
<AppBarButton component={RouterLink} to="/"> <Typography variant="h6" sx={{ my: 2 }}>
<Typography variant="h6">Home</Typography> Michele Tartari
</AppBarButton> </Typography>
<AppBarButton component={RouterLink} to="/projects"> <Divider />
<Typography variant="h6">Projects</Typography> <List>
</AppBarButton> <ListItem key="Home" disablePadding>
<AppBarButton component={RouterLink} to="/curriculum"> <DrawerButton component={RouterLink} to="/">
<Typography variant="h6">Curriculum</Typography> <ListItemText primary="Home" />
</AppBarButton> </DrawerButton>
<Button </ListItem>
component={RouterLink} {/* <ListItem disablePadding>
to="/contacts"
color="primary"
variant="contained"
sx={{
textTransform: 'none',
}}>
<Typography variant="h6">Hire me</Typography>
</Button>
</Stack>
<IconButton sx={{ display: { md: 'none' } }} onClick={() => setOpen(true)}>
<MenuIcon />
</IconButton>
<SwipeableDrawer anchor="right" open={open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)}>
<List>
<ListItem disablePadding>
<DrawerButton component={RouterLink} to="/"> <DrawerButton component={RouterLink} to="/">
<Typography variant="h6">Home</Typography> <Typography variant="h6">Home</Typography>
</DrawerButton> </DrawerButton>
</ListItem> </ListItem> */}
<ListItem disablePadding> <ListItem key="Projects" disablePadding>
<DrawerButton component={RouterLink} to="/projects"> <DrawerButton component={RouterLink} to="/projects">
<Typography variant="h6">Projects</Typography> <ListItemText primary="Projects" />
</DrawerButton> </DrawerButton>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem key="Curriculum" disablePadding>
<DrawerButton component={RouterLink} to="/curriculum"> <DrawerButton component={RouterLink} to="/curriculum">
<Typography variant="h6">Curriculum</Typography> <ListItemText primary="Curriculum" />
</DrawerButton> </DrawerButton>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem key="Contacts" disablePadding>
<DrawerButton component={RouterLink} to="/contacts"> <DrawerButton component={RouterLink} to="/contacts">
<Typography variant="h6">Contacts</Typography> <ListItemText primary="Contacts" />
</DrawerButton> </DrawerButton>
</ListItem> </ListItem>
</List> </List>
</SwipeableDrawer> </Box>
</Toolbar> )
</AppBar>
return (
<>
<AppBar
sx={{
backgroundColor: theme => (theme.palette.mode === 'dark' ? 'transparent' : undefined),
}}>
<Toolbar sx={{ display: 'flex' }}>
<IconButton
color="primary"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' }, position: 'absolute', backgroundColor: 'primary' }}>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1, textAlign: { xs: 'center', sm: 'left' } }}>
Michele Tartari
</Typography>
<Stack component="div" direction="row" spacing={2} sx={{ display: { xs: 'none', sm: 'flex' } }}>
<AppBarButton component={RouterLink} to="/">
<Typography variant="h6">Home</Typography>
</AppBarButton>
<AppBarButton component={RouterLink} to="/projects">
<Typography variant="h6">Projects</Typography>
</AppBarButton>
<AppBarButton component={RouterLink} to="/curriculum">
<Typography variant="h6">Curriculum</Typography>
</AppBarButton>
<Button
component={RouterLink}
to="/contacts"
color="primary"
variant="contained"
sx={{
textTransform: 'none',
}}>
<Typography variant="h6">Hire me</Typography>
</Button>
</Stack>
</Toolbar>
</AppBar>
<nav>
<Drawer
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: 'block', md: 'none' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
}}>
{drawer}
</Drawer>
</nav>
</>
) )
} }