Merge pull request #514 from m-tartari/refactor/toolbar/color-transitions

♻️ refactor(Toolbar): add background color transition

src/components/molecules/Toolbar/index.tsx

@@ -23,7 +23,7 @@ import MenuIcon from '@mui/icons-material/Menu'
 
 const AppBarButton = styled(Button<typeof RouterLink>)(({ theme }) => ({
   textTransform: 'none',
-  color: 'inherit',
+  color: theme.palette.mode === 'dark' ? 'inherit' : 'text.secondary',
   ':hover': {
     backgroundColor: 'transparent',
     ...(theme.palette.mode === 'dark' && {
@@ -106,6 +106,10 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ drawerWidth = 240, window
             backgroundColor: 'hsla(0, 0%, 100%, 0.75)',
             backdropFilter: 'blur(8px)',
           }),
+          transition: theme.transitions.create('background-color', {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeInOut,
+          }),
           ...props.sx,
         }}>
         <Toolbar
@@ -127,32 +131,21 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ drawerWidth = 240, window
             to="/"
             disableRipple
             sx={theme => ({
-              [theme.breakpoints.down('md')]: {
+              color: theme.palette.text.primary,
-                mx: 'auto',
+              [theme.breakpoints.down('md')]: { mx: 'auto' },
-              },
+              [theme.breakpoints.up('md')]: { mr: 'auto' },
-              [theme.breakpoints.up('md')]: {
-                mr: 'auto',
-              },
             })}>
-            <Typography variant="h6" color="text.primary">
+            <Typography variant="h6">Michele Tartari</Typography>
-              Michele Tartari
-            </Typography>
           </AppBarButton>
           <Stack component="div" direction="row" spacing={2} sx={{ display: { xs: 'none', md: 'flex' } }}>
             <AppBarButton component={RouterLink} to="/" disableRipple>
-              <Typography color={theme.palette.mode === 'dark' ? 'inherit' : 'text.secondary'} variant="h6">
+              <Typography variant="h6">Home</Typography>
-                Home
-              </Typography>
             </AppBarButton>
             <AppBarButton component={RouterLink} to="/projects" disableRipple>
-              <Typography color={theme.palette.mode === 'dark' ? 'inherit' : 'text.secondary'} variant="h6">
+              <Typography variant="h6">Projects</Typography>
-                Projects
-              </Typography>
             </AppBarButton>
             <AppBarButton component={RouterLink} to="/curriculum" disableRipple>
-              <Typography color={theme.palette.mode === 'dark' ? 'inherit' : 'text.secondary'} variant="h6">
+              <Typography variant="h6">Curriculum</Typography>
-                Curriculum
-              </Typography>
             </AppBarButton>
             <Button
               component={RouterLink}