From 20d0c5fe401ce1aa1db6f88d98e44d82b6818082 Mon Sep 17 00:00:00 2001
From: Atansuyi Solomon <atansuyisolomon@gmail.com>
Date: Sat, 21 Jun 2025 20:55:20 +0100
Subject: [PATCH] Add scroll-to-top button for improved navigation

---
 src/components/App.tsx               |  2 ++
 src/components/ScrollToTopButton.tsx | 47 ++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/components/ScrollToTopButton.tsx

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 65c3304..76c41f6 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -9,6 +9,7 @@ import { SnackbarProvider } from 'notistack';
 import { tools } from '../tools';
 import './index.css';
 import { darkTheme, lightTheme } from '../config/muiConfig';
+import ScrollToTopButton from './ScrollToTopButton';
 
 const AppRoutes = () => {
   const updatedRoutesConfig = [...routesConfig];
@@ -48,6 +49,7 @@ function App() {
           </BrowserRouter>
         </CustomSnackBarProvider>
       </SnackbarProvider>
+      <ScrollToTopButton />
     </ThemeProvider>
   );
 }
diff --git a/src/components/ScrollToTopButton.tsx b/src/components/ScrollToTopButton.tsx
new file mode 100644
index 0000000..fcd7e74
--- /dev/null
+++ b/src/components/ScrollToTopButton.tsx
@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+import Button from '@mui/material/Button';
+import { Icon } from '@iconify/react';
+
+export default function ScrollToTopButton() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setVisible(window.pageYOffset > 100);
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Button
+      onClick={scrollToTop}
+      variant="contained"
+      color="primary"
+      sx={{
+        position: 'fixed',
+        bottom: 20,
+        right: 20,
+        zIndex: 9999,
+        minWidth: '40px',
+        width: '40px',
+        height: '40px',
+        borderRadius: '50%',
+        padding: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+      aria-label="Scroll to top"
+    >
+      <Icon icon="mdi:arrow-up" fontSize={24} style={{ color: 'white' }} />
+    </Button>
+  );
+}