Merge pull request #405 from m-tartari/refactor/elevate_toolbar

♻️ refactor: elevate toolbar on scroll

src/components/molecules/Toobar/index.ts

@@ -1 +0,0 @@
-export { default } from './Toobar'

src/components/molecules/Toolbar/index.tsx

@@ -16,6 +16,7 @@ import {
   Toolbar,
   Typography,
   styled,
+  useScrollTrigger,
 } from '@mui/material'
 import MenuIcon from '@mui/icons-material/Menu'
 
@@ -36,12 +37,19 @@ const DrawerButton = styled(ListItemButton<typeof RouterLink>)(({ theme }) => ({
   },
 }))
 
-interface CustomToobarProps extends AppBarProps {
+interface CustomToolbarProps extends AppBarProps {
   drawerWidth?: number
+  window?: Window
 }
-const CustomToobar: React.FC<CustomToobarProps> = ({ drawerWidth = 240, ...props }) => {
+const CustomToolbar: React.FC<CustomToolbarProps> = ({ drawerWidth = 240, window, ...props }) => {
   const [mobileOpen, setMobileOpen] = React.useState(false)
 
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+    target: window ?? undefined,
+  })
+
   const handleDrawerToggle = () => {
     setMobileOpen(prevState => !prevState)
   }
@@ -88,7 +96,7 @@ const CustomToobar: React.FC<CustomToobarProps> = ({ drawerWidth = 240, ...props
         elevation={0}
         {...props}
         sx={{
-          backgroundColor: theme => (theme.palette.mode === 'dark' ? 'background.paper' : undefined),
+          backgroundColor: trigger ? theme => (theme.palette.mode === 'dark' ? 'background.paper' : undefined) : 'transparent',
           ...props.sx,
         }}>
         <Toolbar sx={{ display: 'flex' }}>
@@ -145,4 +153,4 @@ const CustomToobar: React.FC<CustomToobarProps> = ({ drawerWidth = 240, ...props
   )
 }
 
-export default CustomToobar
+export default CustomToolbar

src/components/molecules/index.ts

@@ -1,4 +1,4 @@
-export { default as Toobar } from './Toobar'
+export { default as Toolbar } from './Toolbar'
 export { default as Footer } from './Footer'
 
 export { default as CurriculumItem } from './CurriculumItem'

src/components/pages/MainPage/MainPage.tsx

@@ -3,7 +3,7 @@ import { Box, Typography } from '@mui/material'
 
 import { ViewportProvider } from 'components/utils/viewport'
 import { AcademyIconLink, DescriptionIconLink, ExternalAppIconLink, GitHubIconLink, VideoIconLink } from 'components/atoms'
-import { Footer, Hero, Toobar, ProjectSpotlight } from 'components/molecules'
+import { Footer, Hero, Toolbar, ProjectSpotlight } from 'components/molecules'
 
 const MainPage = () => {
   React.useEffect(() => {
@@ -18,7 +18,7 @@ const MainPage = () => {
   return (
     <ViewportProvider>
       <Box aria-label="page" sx={{ flexGrow: 1 }}>
-        <Toobar position="absolute" sx={{ backgroundColor: 'transparent' }} />
+        <Toolbar position="absolute" sx={{ backgroundColor: 'transparent' }} />
         <Hero scrollTarget={refIITLinfa} />
         {/*  1 IIT - Linfa */}
         <ProjectSpotlight

src/components/templates/Page/Page.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box, BoxProps, Container, Divider, Typography } from '@mui/material'
 
-import { Footer, Toobar } from 'components/molecules'
+import { Footer, Toolbar } from 'components/molecules'
 
 /**
  * React function component that implements the default page template.
@@ -16,7 +16,7 @@ const Page: React.FC<BoxProps> = ({ title, children, ...props }) => {
 
   return (
     <Box sx={{ flexGrow: 1 }} aria-label="page">
-      <Toobar />
+      <Toolbar />
       {title && (
         <>
           <Typography