♻️ refactor(toolbar): add swipable drawer menu

the drawer is visible only for small screens

src/components/molecules/Toobar/Toobar.tsx

@@ -1,5 +1,7 @@
+import React from 'react'
 import { Link as RouterLink } from 'react-router-dom'
-import { AppBar, Button, Stack, Toolbar, Typography, styled } from '@mui/material'
+import { AppBar, Button, IconButton, List, ListItem, ListItemButton, Stack, SwipeableDrawer, Toolbar, Typography, styled } from '@mui/material'
+import MenuIcon from '@mui/icons-material/Menu'
 
 const AppBarButton = styled(Button<typeof RouterLink>)(({ theme }) => ({
   textTransform: 'none',
@@ -9,8 +11,17 @@ const AppBarButton = styled(Button<typeof RouterLink>)(({ theme }) => ({
     color: theme.palette.primary.main,
   },
 }))
+const DrawerButton = styled(ListItemButton<typeof RouterLink>)(({ theme }) => ({
+  textTransform: 'none',
+  color: 'inherit',
+  ':hover': {
+    backgroundColor: 'transparent',
+    color: theme.palette.primary.main,
+  },
+}))
 
 const CustomToobar = () => {
+  const [open, setOpen] = React.useState(false)
   return (
     <AppBar
       sx={{
@@ -41,6 +52,33 @@ const CustomToobar = () => {
             <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="/">
+                <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>
   )