From 3daf2cb4b2d5d35ca4f2400c962594782a1759dd Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Mon, 22 Jan 2024 18:53:06 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(toolbar):=20add?=
 =?UTF-8?q?=20swipable=20drawer=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the drawer is visible only for small screens
---
 src/components/molecules/Toobar/Toobar.tsx | 40 +++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/Toobar/Toobar.tsx b/src/components/molecules/Toobar/Toobar.tsx
index a6807ae..b6f2f4c 100644
--- a/src/components/molecules/Toobar/Toobar.tsx
+++ b/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>
   )