modify navbar,footer, back for button

Author: devsdenepal

src/App.jsx

@@ -21,6 +21,7 @@ import Navbar from './components/Navbar';
 import CourseDetail from './components/CourseDetail';
 import Dashboard from './components/dashboard';
 import courses from './components/courseData';
+import Footer from './components/Footer';
 
 function App() {
   const [user, setUser] = useState(null);
@@ -52,6 +53,7 @@ function App() {
         <Navbar loggedin={user ? 'true' : 'false'} />
         <div className="auth-wrapper">
           <div className="auth-inner">
+           
             <Routes>
               {/* Redirect to profile if the user is logged in */}
               <Route path="/" element={user ? <Navigate to="/profile" /> : <Login />} />
@@ -74,6 +76,7 @@ function App() {
           </div>
         </div>
       </div>
+       <Footer />
     </Router>
   );
 }

src/components/Footer.jsx

@@ -1,49 +1,29 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
 export default function Footer() {
-    return (
-      <footer className="bg-body-tertiary text-center text-lg-start align-items-center">
-        {/* Grid container */}
-        <div className="container p-4 pb-0">
-          <form action="">
-            {/* Grid row */}
-            <div className="row">
-              {/* Grid column */}
-              <div className="col-auto mb-4 mb-md-0">
-                <p className="pt-2">
-                  <strong>Sign up for our newsletter</strong>
-                </p>
-              </div>
-              {/* Grid column */}
-  
-              {/* Grid column */}
-              <div className="col-md-5 col-12 mb-4 mb-md-0">
-                {/* Email input */}
-                <div data-mdb-input-init className="form-outline mb-4">
-                  <input type="email" id="form5Example22" className="form-control" placeholder="Email Address"/>
-                </div>
-              </div>
-              {/* Grid column */}
-  
-              {/* Grid column */}
-              <div className="col-auto mb-4 mb-md-0">
-                {/* Submit button */}
-                <button data-mdb-ripple-init type="button" className="btn btn-primary mb-4">
-                  Subscribe
-                </button>
-              </div>
-              {/* Grid column */}
-            </div>
-            {/* Grid row */}
-          </form>
-        </div>
-        {/* Grid container */}
-  
-        {/* Copyright */}
+  const navigate = useNavigate();
+
+  return (
+    <footer className="bg-body-tertiary text-center text-lg-start align-items-center fixed-bottom">
+      {/* Back and Forward Buttons */}
+      <div className="d-flex justify-content-between p-3">
+        {/* Back Button - Left Side */}
+        <button className="btn btn-secondary" onClick={() => navigate(-1)}>
+          <i className="fa-solid fa-circle-left"></i> back
+        </button>
         <div className="text-center p-3" style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
-          ©
-          <a className="text-body" href="https://krimsonsquad.tech/">Krimsonsquad.tech</a> 2024
+          © <a className="text-body" href="https://krimsonsquad.tech/">Krimsonsquad.tech</a> 2024
         </div>
-        {/* Copyright */}
-      </footer>
-    );
-  }
-  
+        {/* Forward Button - Right Side */}
+        <button className="btn btn-secondary" onClick={() => navigate(1)}>
+          <i className="fa-solid fa-circle-right"></i> forward
+        </button>
+      </div>
+
+      {/* Copyright */}
+
+      {/* Copyright */}
+    </footer>
+  );
+}

src/components/Navbar.jsx

@@ -43,7 +43,7 @@ function Navbar({ loggedin }) {
   };
 
   return (
-    <nav className="navbar navbar-expand-lg">
+    <nav className="navbar navbar-expand-lg sticky-top">
       <div className="container-fluid">
         <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
           data-bs-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" aria-label="Toggle navigation">