Merge pull request #152 from Solomon002/add-scroll-to-top

Add scroll-to-top button for improved navigation

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>
   );
 }

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.scrollY > 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>
+  );
+}