From 54e7c239ec62cc9d2d9c40a8cb7ab38c667f0476 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Wed, 12 Mar 2025 17:31:07 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20fix:=20fix=20typo=20in=20Too?=
 =?UTF-8?q?lbar=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/Toobar/index.ts                      | 1 -
 .../molecules/{Toobar/Toobar.tsx => Toolbar/index.tsx}        | 0
 src/components/molecules/index.ts                             | 2 +-
 src/components/pages/MainPage/MainPage.tsx                    | 4 ++--
 src/components/templates/Page/Page.tsx                        | 4 ++--
 5 files changed, 5 insertions(+), 6 deletions(-)
 delete mode 100644 src/components/molecules/Toobar/index.ts
 rename src/components/molecules/{Toobar/Toobar.tsx => Toolbar/index.tsx} (100%)

diff --git a/src/components/molecules/Toobar/index.ts b/src/components/molecules/Toobar/index.ts
deleted file mode 100644
index b58b1b1..0000000
--- a/src/components/molecules/Toobar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Toobar'
diff --git a/src/components/molecules/Toobar/Toobar.tsx b/src/components/molecules/Toolbar/index.tsx
similarity index 100%
rename from src/components/molecules/Toobar/Toobar.tsx
rename to src/components/molecules/Toolbar/index.tsx
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index a3bc420..5aac308 100644
--- a/src/components/molecules/index.ts
+++ b/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'
diff --git a/src/components/pages/MainPage/MainPage.tsx b/src/components/pages/MainPage/MainPage.tsx
index ffe67ce..bce7836 100644
--- a/src/components/pages/MainPage/MainPage.tsx
+++ b/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
diff --git a/src/components/templates/Page/Page.tsx b/src/components/templates/Page/Page.tsx
index ec0baf9..213d888 100644
--- a/src/components/templates/Page/Page.tsx
+++ b/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

From ecbe1d337a73b0deb9cdbc368039a59f8521aba9 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Wed, 12 Mar 2025 17:46:10 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20elevate=20?=
 =?UTF-8?q?toolbar=20on=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/Toolbar/index.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/molecules/Toolbar/index.tsx b/src/components/molecules/Toolbar/index.tsx
index fcde22c..d7954b1 100644
--- a/src/components/molecules/Toolbar/index.tsx
+++ b/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