Merge pull request #378 from aslams2020/main

Added "Scroll Down Progress Bar" to The Website

src/App.js

@@ -19,10 +19,12 @@ import AccountSettings from "./settings/AccountSettings";
 import NotFoundPage from "./pages/PNF";
 import ForgotPassword from "./pages/Forgotpassword.js";
 import ResetPassword from "./pages/ResetPassword.js";
+import ProgressBar from './components/ProgressBar.js';
 
 const App = () => {
   return (
     <>
+      <ProgressBar />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/user/add-products" element={<PForm />} />
@@ -32,6 +34,7 @@ const App = () => {
         <Route path="/user/reset-password/:token" element={<ResetPassword />} />
         <Route element={<PrivateRoute />}>
           <Route path="/admin/dashboard" element={<AdminD></AdminD>} />
+          <Route path="/admin/" element={<AdminD></AdminD>} />
           <Route path="/scanqr" element={<QRCodeVerification />} />
           <Route path="/user/add-products" element={<PForm />} />
           <Route path="/user/settings" element={<Settings></Settings>} />
@@ -46,6 +49,7 @@ const App = () => {
         <Route path="/user/review" element={<Review />} />
         <Route path="*" element={<NotFoundPage></NotFoundPage>} />
       </Routes>
+
     </>
   );
 };

src/components/ProgressBar.css

@@ -0,0 +1,16 @@
+#progressBar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 8px;
+    background: linear-gradient(90deg, rgba(8, 106, 68, 1) 0%, rgba(8, 170, 106, 1) 50%, rgba(8, 106, 68, 1) 100%);
+    z-index: 99;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    /* transition: width 0.3s ease-in-out; */
+  }
+
+  #progressBar:hover {
+    background: linear-gradient(90deg, rgba(8, 170, 106, 1) 0%, rgba(8, 106, 68, 1) 100%);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }

src/components/ProgressBar.js

@@ -0,0 +1,24 @@
+
+import React, { useEffect } from 'react';
+import './ProgressBar.css';
+
+const ProgressBar = () => {
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (winScroll / height) * 100;
+      document.getElementById('progressBar').style.width = scrolled + '%';
+    };
+
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return <div id="progressBar"></div>;
+
+};
+
+export default ProgressBar;