Skip to content

Added ScrollToBottom component #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eccentriccoder01 merged 3 commits into from
Sep 5, 2025
Merged

Added ScrollToBottom component #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
29823f5
feat: added ScrollToBottom component and matched with existing Scroll…
alizahh-7 Sep 5, 2025
3148366
Implemented ScrollToBottom button in App.jsx
alizahh-7 Sep 5, 2025
2d7b413
Implemented ScrollToBottom button in user app
alizahh-7 Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 11 additions & 52 deletions admin/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,27 @@
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import "./index.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import DashboardLayout from "./components/DashboardLayout";
import Dashboard from "./components/Dashboard";
import Login from "./components/Login";
import Register from "./components/Register";
import Header from "./components/Header";
import AddScheme from "./components/AddScheme";
import Schemes from "./components/Schemes";
import DashboardLayout from "./components/DashboardLayout";
import { useContext, useEffect, useState } from "react";
import Employees from "./components/Employees";
import Announcement from "./components/Announcement";
import Grievances from "./components/Grievances";
import Tickets from "./components/Tickets";
import SingleTicket from "./components/SingleTicket";
import { AdminContext } from "./components/context/adminContext";
import Notifications from "./components/Notifications";
import SingleEmployee from "./components/SingleEmployee";
import Profile from "./components/Profile";
import SingleGrievance from "./components/SingleGrievance";
import Message from "./components/Message";
import SingleScheme from "./components/SingleScheme";

const ProtectedRoutes = ({ children }) => {
const { isAuthenticated ,token} = useContext(AdminContext);

if (isAuthenticated && token) {
return children;
}
return <Navigate to="/login" />;
};
// ✅ Import ScrollToBottom
import ScrollToBottom from "./components/ScrollToBottom";

function App() {
const {isAuthenticated , token} = useContext(AdminContext)


return (
<BrowserRouter>
<Header />
<Routes>
<Route path="/login" element={isAuthenticated && token?<Navigate to="/" />: <Login />} />
<Route path="/register" element={isAuthenticated && token?<Navigate to="/" />:<Register />} />

<Route path="/" element={
<ProtectedRoutes>
<DashboardLayout />
</ProtectedRoutes>
}>
<Route path="/" element={<DashboardLayout />}>
<Route index element={<Dashboard />} />
<Route path="/add_scheme" element={<AddScheme />} />
<Route path="/dashboard" element={<Dashboard/>} />
<Route path="/schemes" element={<Schemes/>} />
<Route path="/scheme/:id" element={<SingleScheme/>} />
<Route path="/employees" element={<Employees/>} />
<Route path="/announcement" element={<Announcement/>} />
<Route path="/grievances" element={<Grievances/>} />
<Route path="/tickets" element={<Tickets/>} />
<Route path="/ticket/:id" element={<SingleTicket/>} />
<Route path="/notifications" element={<Notifications/>} />
<Route path="/employee/:id" element={<SingleEmployee/>}/>
<Route path='/profile' element={<Profile/>}/>
<Route path='/grievance/:id' element={<SingleGrievance/>}/>
<Route path='/message' element={<Message/>}/>
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="add-scheme" element={<AddScheme />} />
</Route>
</Routes>

{/* ✅ Always render scroll button */}
<ScrollToBottom />
</BrowserRouter>
);
}
Expand Down
74 changes: 36 additions & 38 deletions user/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import ScrollToTop from './components/ScrollToTop';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import ScrollToTop from './components/ScrollToTop';
import ScrollToBottom from './components/ScrollToBottom'; // ✅ added

import './App.css'


import Navbar from './components/Navbar';
import Home from './components/pages/home/Home';
import Header from './components/Header';
Expand All @@ -29,51 +29,49 @@ import GrievancesApplied from './components/GrievancesApplied';
import Status from './components/Status';
import Dashboard from './components/Dashboard';
import Contact from './components/Contact';
import Faq from './components/Faq';
import PrivacyPolicy from './components/PrivacyPolicy';
import LinkingPolicy from './components/LinkingPolicy';

function App() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
// const

useEffect(() => {
const token = localStorage.getItem('token');
setIsAuthenticated(!!token);
}, []);

return (
<BrowserRouter>
<Topbar/>
<Header/>
<Navbar isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated}/>
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/login' element={isAuthenticated ? <Home/> : <Login/>}/>
<Route path='/userlogin' element={isAuthenticated ? <Home/> : <UserLogin isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated}/>}/>
<Route path='/register' element={isAuthenticated ? <Home/> : <Register/>}/>
<Route path='/about' element={<About/>}/>
<Route path='/scheme_eligibity' element={<SchemeEligibilty/>}/>
<Route path='/schemes' element={<Scheme/>}/>
<Route path='/scheme/:id' element={<SchemeDetails/>}/>
<Route path='/grievances' element={<Grievances/>}/>
<Route path='/grievances/grievances_registration_form' element={<GrievancesRegistrationForm isAuthenticated={isAuthenticated} />}/>
<Route path='/auth/verify-otp' element={isAuthenticated ? <Home/>:<VerifyOtp isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated}/>}/>
<Route path='/apply' element={isAuthenticated ? <SchemeAppliedForm/> : <UserLogin/>}/>
<Route path='/scheme_applied_success' element={isAuthenticated ? <SchemeAppliedConfirmationPage/>: <Login/>}/>
<Route path='/grievances_success' element={isAuthenticated ? <GrievanceConfirmation/>: <Login/>}/>
<Route path='/profile' element={isAuthenticated ? <Profile/>: <Login/>}/>
<Route path='/schemeApplied' element={isAuthenticated ? <SchemeApplied/>: <Login/>}/>
<Route path='/grievancesApplied' element={isAuthenticated ? <GrievancesApplied/>: <Login/>}/>
<Route path='/status' element={<Status/>}/>
<Route path='/dashboard' element={<Dashboard/>}/>
<Route path='/contact' element={<Contact/>}/>
<Route path='/faq' element={<Faq/>}/>
<Route path='/privacypolicy' element={<PrivacyPolicy/>}/>
<Route path='/linkingpolicy' element={<LinkingPolicy/>}/>
</Routes>
<Footer/>
<ScrollToTop />
<Topbar />
<Header />
<Navbar isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated} />
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/login' element={isAuthenticated ? <Home/> : <Login/>}/>
<Route path='/userlogin' element={isAuthenticated ? <Home/> : <UserLogin isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated}/>}/>
<Route path='/register' element={isAuthenticated ? <Home/> : <Register/>}/>
<Route path='/about' element={<About/>}/>
<Route path='/scheme_eligibity' element={<SchemeEligibilty/>}/>
<Route path='/schemes' element={<Scheme/>}/>
<Route path='/scheme/:id' element={<SchemeDetails/>}/>
<Route path='/grievances' element={<Grievances/>}/>
<Route path='/grievances/grievances_registration_form' element={<GrievancesRegistrationForm isAuthenticated={isAuthenticated} />}/>
<Route path='/auth/verify-otp' element={isAuthenticated ? <Home/>:<VerifyOtp isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated}/>}/>
<Route path='/apply' element={isAuthenticated ? <SchemeAppliedForm/> : <UserLogin/>}/>
<Route path='/scheme_applied_success' element={isAuthenticated ? <SchemeAppliedConfirmationPage/>: <Login/>}/>
<Route path='/grievances_success' element={isAuthenticated ? <GrievanceConfirmation/>: <Login/>}/>
<Route path='/profile' element={isAuthenticated ? <Profile/>: <Login/>}/>
<Route path='/schemeApplied' element={isAuthenticated ? <SchemeApplied/>: <Login/>}/>
<Route path='/grievancesApplied' element={isAuthenticated ? <GrievancesApplied/>: <Login/>}/>
<Route path='/status' element={<Status/>}/>
<Route path='/dashboard' element={<Dashboard/>}/>
<Route path='/contact' element={<Contact/>}/>
</Routes>

<Footer />
<ScrollToTop />
<ScrollToBottom /> {/* ✅ added below ScrollToTop */}
</BrowserRouter>
)
}

export default App
export default App;
35 changes: 35 additions & 0 deletions user/src/components/ScrollToBottom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
.scroll-to-bottom {
position: fixed;
bottom: 90px; /* placed above scroll-to-top */
right: 30px;
z-index: 100;
background-color: rgba(153, 27, 27, 0.9); /* 🔴 match scroll-to-top */
color: white;
border: none;
border-radius: 50%;
padding: 20px 20px;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
}

.scroll-to-bottom:hover {
background-color: rgb(154 52 18 / 0.7); /* 🔴 same hover as scroll-to-top */
}

.scroll-to-bottom.visible {
opacity: 1;
transform: translateY(0);
}

@media (max-width: 480px) {
.scroll-to-bottom {
width: 40px;
height: 40px;
padding: 12px;
font-size: 18px;
bottom: 65px; /* adjusts for mobile */
right: 15px;
}
}
38 changes: 38 additions & 0 deletions user/src/components/ScrollToBottom.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { useEffect, useState } from "react";
import { FaArrowCircleDown } from "react-icons/fa";
import "./ScrollToBottom.css";

const ScrollToBottom = () => {
const [visible, setVisible] = useState(false);

// Show button if not at bottom
const toggleVisibility = () => {
if (window.innerHeight + window.scrollY < document.body.scrollHeight - 100) {
setVisible(true);
} else {
setVisible(false);
}
};

const scrollToBottom = () => {
window.scrollTo({
top: document.body.scrollHeight,
behavior: "smooth",
});
};

useEffect(() => {
window.addEventListener("scroll", toggleVisibility);
return () => window.removeEventListener("scroll", toggleVisibility);
}, []);

return (
visible && (
<button className="scroll-to-bottom" onClick={scrollToBottom}>
<FaArrowCircleDown />
</button>
)
);
};

export default ScrollToBottom;