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 { 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'
const AppBarButton = styled(Button<typeof RouterLink>)(({ theme }) => ({
@@ -20,67 +35,109 @@ const DrawerButton = styled(ListItemButton<typeof RouterLink>)(({ theme }) => ({
},
}))
const CustomToobar = () => {
const [open, setOpen] = React.useState(false)
return (
<AppBar
sx={{
backgroundColor: theme => (theme.palette.mode === 'dark' ? 'transparent' : undefined),
}}>
<Toolbar>
<AppBarButton component={RouterLink} to="/" sx={{ mr: 'auto' }}>
<Typography variant="h5">Michele Tartari</Typography>
</AppBarButton>
<Stack direction="row" spacing={2} sx={{ display: { xs: 'none', md: '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>
<IconButton sx={{ display: { md: 'none' } }} onClick={() => setOpen(true)}>
<MenuIcon />
</IconButton>
<SwipeableDrawer anchor="right" open={open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)}>
<List>
<ListItem disablePadding>
type CustomToobarProps = {
drawerWidth?: number
}
const CustomToobar: React.FC<CustomToobarProps> = ({ drawerWidth = 240 }) => {
const [mobileOpen, setMobileOpen] = React.useState(false)
const handleDrawerToggle = () => {
setMobileOpen(prevState => !prevState)
}
const drawer = (
<Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
<Typography variant="h6" sx={{ my: 2 }}>
Michele Tartari
</Typography>
<Divider />
<List>
<ListItem key="Home" disablePadding>
<DrawerButton component={RouterLink} to="/">
<ListItemText primary="Home" />
</DrawerButton>
</ListItem>
{/* <ListItem disablePadding>
<DrawerButton component={RouterLink} to="/">
<Typography variant="h6">Home</Typography>
</DrawerButton>
</ListItem>
<ListItem disablePadding>
<DrawerButton component={RouterLink} to="/projects">
<Typography variant="h6">Projects</Typography>
</DrawerButton>
</ListItem>
<ListItem disablePadding>
<DrawerButton component={RouterLink} to="/curriculum">
<Typography variant="h6">Curriculum</Typography>
</DrawerButton>
</ListItem>
<ListItem disablePadding>
<DrawerButton component={RouterLink} to="/contacts">
<Typography variant="h6">Contacts</Typography>
</DrawerButton>
</ListItem>
</List>
</SwipeableDrawer>
</Toolbar>
</AppBar>
</ListItem> */}
<ListItem key="Projects" disablePadding>
<DrawerButton component={RouterLink} to="/projects">
<ListItemText primary="Projects" />
</DrawerButton>
</ListItem>
<ListItem key="Curriculum" disablePadding>
<DrawerButton component={RouterLink} to="/curriculum">
<ListItemText primary="Curriculum" />
</DrawerButton>
</ListItem>
<ListItem key="Contacts" disablePadding>
<DrawerButton component={RouterLink} to="/contacts">
<ListItemText primary="Contacts" />
</DrawerButton>
</ListItem>
</List>
</Box>
)
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>
</>
)
}