From ad9ab7df49090fa3ea5018e8957a11fba87ddb06 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Thu, 15 Feb 2024 17:09:56 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(AppBar):=20improv?=
 =?UTF-8?q?e=20sizing=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/Toobar/Toobar.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/Toobar/Toobar.tsx b/src/components/molecules/Toobar/Toobar.tsx
index b155437..fcde22c 100644
--- a/src/components/molecules/Toobar/Toobar.tsx
+++ b/src/components/molecules/Toobar/Toobar.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import {
   AppBar,
+  AppBarProps,
   Box,
   Button,
   Divider,
@@ -35,10 +36,10 @@ const DrawerButton = styled(ListItemButton<typeof RouterLink>)(({ theme }) => ({
   },
 }))
 
-type CustomToobarProps = {
+interface CustomToobarProps extends AppBarProps {
   drawerWidth?: number
 }
-const CustomToobar: React.FC<CustomToobarProps> = ({ drawerWidth = 240 }) => {
+const CustomToobar: React.FC<CustomToobarProps> = ({ drawerWidth = 240, ...props }) => {
   const [mobileOpen, setMobileOpen] = React.useState(false)
 
   const handleDrawerToggle = () => {
@@ -84,8 +85,11 @@ const CustomToobar: React.FC<CustomToobarProps> = ({ drawerWidth = 240 }) => {
   return (
     <>
       <AppBar
+        elevation={0}
+        {...props}
         sx={{
           backgroundColor: theme => (theme.palette.mode === 'dark' ? 'background.paper' : undefined),
+          ...props.sx,
         }}>
         <Toolbar sx={{ display: 'flex' }}>
           <IconButton
@@ -93,13 +97,13 @@ const CustomToobar: React.FC<CustomToobarProps> = ({ drawerWidth = 240 }) => {
             aria-label="open drawer"
             edge="start"
             onClick={handleDrawerToggle}
-            sx={{ mr: 2, display: { sm: 'none' }, position: 'absolute', backgroundColor: 'primary' }}>
+            sx={{ mr: 2, display: { md: 'none' }, position: 'absolute', backgroundColor: 'primary' }}>
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1, textAlign: { xs: 'center', sm: 'left' } }}>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1, textAlign: { xs: 'center', md: 'left' } }}>
             Michele Tartari
           </Typography>
-          <Stack component="div" direction="row" spacing={2} sx={{ display: { xs: 'none', sm: 'flex' } }}>
+          <Stack component="div" direction="row" spacing={2} sx={{ display: { xs: 'none', md: 'flex' } }}>
             <AppBarButton component={RouterLink} to="/">
               <Typography variant="h6">Home</Typography>
             </AppBarButton>