Merge pull request #222 from Vaishnavi22Thakur/feature/back-to-top-button

feat: add Back to Top button for better navigation on long pages

Author: yash-pouranik

apps/web-dashboard/src/components/Layout/BackToTop.jsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react';
+import { ArrowUp } from 'lucide-react';
+
+function BackToTop() {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+
+    useEffect(() => {
+        let ticking = false;
+
+        const handleScroll = () => {
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    setIsVisible(window.scrollY > 300);
+                    ticking = false;
+                });
+                ticking = true;
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        handleScroll();
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+    const handleClick = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    };
+
+    if (!isVisible) {
+        return null;
+    }
+
+    return (
+        <button
+            onClick={handleClick}
+            title="Back to Top"
+            aria-label="Back to Top"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            style={{
+                position: 'fixed',
+                bottom: '2rem',
+                right: '2rem',
+                zIndex: 1000,
+                backgroundColor: '#00f5d4',
+                color: '#000',
+                border: 'none',
+                borderRadius: '50%',
+                width: '45px',
+                height: '45px',
+                cursor: 'pointer',
+                boxShadow: '0 0 15px rgba(0, 245, 212, 0.4)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+                transition: 'transform 0.2s ease',
+            }}
+        >
+            <ArrowUp size={20} strokeWidth={2.5} />
+        </button>
+    );
+}
+
+export default BackToTop;

apps/web-dashboard/src/components/Layout/MainLayout.jsx

@@ -4,7 +4,7 @@ import Sidebar from './Sidebar';
 import Header from './Header';
 import ProjectNavbar from './ProjectNavbar';
 import { useLayout } from '../../context/LayoutContext';
-
+import BackToTop from './BackToTop';
 // Use the new official logo from public directory
 const logoImage = "https://cdn.jsdelivr.net/gh/yash-pouranik/urBackend@main/frontend/public/logo.png";
 
@@ -68,6 +68,7 @@ function MainLayout({ children }) {
                     {children}
                 </div>
             </div>
+            <BackToTop />
         </div>
     );
 }

apps/web-dashboard/src/pages/LandingPage/index.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
-
+import BackToTop from '../../components/Layout/BackToTop';
 import {
     Database,
     Shield,
@@ -907,6 +907,7 @@ function LandingPage() {
             </div>
 
             <Footer />
+            <BackToTop />
         </div>
     );
 }