Merge pull request dhairyagothi#296 from Premkolte/main

Navbar button Routes and Pages.
PraveenUppar · Oct 18, 2024 · 4f034ac · 4f034ac
2 parents b628c2c + fbc702c
commit 4f034ac
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -182,10 +182,15 @@ npm run start
 │   │   ├── App.jsx
 │   │   ├── Pages/
 │   │   │   ├── 3Dmaps.jsx
+│   │   │   ├── AboutUs.jsx
 │   │   │   ├── ContactUs.jsx
+│   │   │   ├── Emergency.jsx
+│   │   │   ├── ForaFriend.jsx
+│   │   │   ├── HelpandSupport.jsx
 │   │   │   ├── Herosection.css
 │   │   │   ├── Herosection.jsx
 │   │   │   ├── LoginPage.jsx
+│   │   │   ├── Payment.jsx
 │   │   │   ├── Register.jsx
 │   │   │   ├── booking.jsx
 │   │   │   ├── contributor.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -18,7 +18,10 @@ import Settings from './components/Settings';
 import Help from './components/help';
 import About from './components/about';
 import Contributor from './Pages/contributor';
-
+import Payment from './Pages/Payment';
+import HelpAndSupport from './Pages/HelpandSupport';
+import Emergency from './Pages/Emergency';
+import AboutUs from './Pages/AboutUs';
 
 
 function App() {
@@ -42,8 +45,11 @@ function App() {
         <Route path='/help' element={<Help/>} />
         <Route path='/about' element={<About/>} />
         <Route path='/contributor' element={<Contributor/>} />
-
-
+        <Route path='/payment' element={<Payment/>} />
+        <Route path='/aboutus' element={<AboutUs/>} />
+        <Route path='/emergency' element={<Emergency/>} />  
+        <Route path='/helpandsupport' element={<HelpAndSupport/>} />
+
         {/* This route is just for testing protected routes it can be removed later when there is a route other than login or signup */}
 
       </Routes>

diff --git a/frontend/src/Pages/AboutUs.jsx b/frontend/src/Pages/AboutUs.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const AboutUs = () => {
+  return (
+    <div className="min-h-screen flex justify-center items-center bg-blue-100">
+      <h1 className="text-3xl font-semibold text-blue-900">About Us Page</h1>
+    </div>
+  );
+};
+
+export default AboutUs;
diff --git a/frontend/src/Pages/Emergency.jsx b/frontend/src/Pages/Emergency.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Emergency = () => {
+  return (
+    <div className="min-h-screen flex justify-center items-center bg-blue-100">
+      <h1 className="text-3xl font-semibold text-blue-900">Emergency Page</h1>
+    </div>
+  );
+};
+
+export default Emergency;
diff --git a/frontend/src/Pages/ForaFriend.jsx b/frontend/src/Pages/ForaFriend.jsx
diff --git a/frontend/src/Pages/HelpandSupport.jsx b/frontend/src/Pages/HelpandSupport.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const HelpAndSupport = () => {
+  return (
+    <div className="min-h-screen flex justify-center items-center bg-blue-100">
+      <h1 className="text-3xl font-semibold text-blue-900">Help and Support Page</h1>
+    </div>
+  );
+};
+
+export default HelpAndSupport;
diff --git a/frontend/src/Pages/Payment.jsx b/frontend/src/Pages/Payment.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Payment = () => {
+  return (
+    <div className="min-h-screen flex justify-center items-center bg-blue-100">
+      <h1 className="text-3xl font-semibold text-blue-900">Payment Page</h1>
+    </div>
+
+
+  );
+};
+
+export default Payment;
diff --git a/frontend/src/components/navbar.jsx b/frontend/src/components/navbar.jsx
@@ -1,14 +1,43 @@
 import React, { useState } from 'react';
-import { FaBars, FaTimes, FaUser, FaMoneyCheckAlt, FaHandsHelping, FaBell, FaCogs, FaInfoCircle } from 'react-icons/fa';
+import { FaBars, FaTimes, FaUser, FaMoneyCheckAlt, FaHandsHelping, FaBell, FaCogs, FaInfoCircle, FaCreditCard } from 'react-icons/fa';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate for routing
 import Hamburger from '../Pages/hamburger';
 
+
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const navigate = useNavigate(); // Initialize useNavigate
 
   const toggleMenu = () => {
     setIsOpen((prev) => !prev);
   };
 
+  // Handle navigation to the pages
+  const handlePaymentClick = () => {
+    navigate('/payment');
+    setIsOpen(false); // Close the sidebar after navigating
+  };
+
+  const handleHelpAndSupportClick = () => {
+    navigate('/help-and-support');
+    setIsOpen(false);
+  };
+
+  const handleEmergencyClick = () => {
+    navigate('/emergency');
+    setIsOpen(false);
+  };
+
+  const handleSettingsClick = () => {
+    navigate('/settings');
+    setIsOpen(false);
+  };
+
+  const handleAboutUsClick = () => {
+    navigate('/about-us');
+    setIsOpen(false);
+  };
+
   return (
     <>
       {/* Navigation Toggle for All Screens (Mobile and Larger Screens) */}
@@ -39,36 +68,29 @@ const Navbar = () => {
         {/* Menu Items */}
         <nav className="mt-4">
           <ul className="space-y-4">
-            <li className="flex items-center px-4 py-2 hover:bg-gray-100">
-              <FaMoneyCheckAlt className="mr-3 text-blue-500" />
-              <span className='text-lg'>Payment</span>
+            <li className="flex items-center px-4 py-2 bg-amber-500 text-white cursor-pointer hover:bg-amber-600" onClick={handlePaymentClick}>
+              <FaCreditCard className="mr-3 text-white" />
+              <span className="text-lg">Make a Payment</span>
             </li>
-            <li className="flex items-center px-4 py-2 hover:bg-gray-100">
+            <li className="flex items-center px-4 py-2 hover:bg-gray-100 cursor-pointer" onClick={handleHelpAndSupportClick}>
               <FaHandsHelping className="mr-3 text-blue-500" />
-              <span className='text-lg'>For a Friend</span>
+              <span className="text-lg">Help and Support</span>
             </li>
-            <li className="flex items-center px-4 py-2 hover:bg-gray-100">
+            <li className="flex items-center px-4 py-2 hover:bg-gray-100 cursor-pointer" onClick={handleEmergencyClick}>
               <FaBell className="mr-3 text-blue-500" />
-              <span className='text-lg'>Help and Support</span>
-            </li>
-            <li className="flex items-center px-4 py-2 hover:bg-gray-100">
-              <FaBell className="mr-3 text-blue-500" />
-              <span className='text-lg'>Emergency</span>
-            </li>
-            <li className="flex items-center px-4 py-2 hover:bg-gray-100">
-              <FaCogs className="mr-3 text-blue-500" />
-              <span className='text-lg'>Settings</span>
+              <span className="text-lg">Emergency</span>
             </li>
-            <li className="flex items-center px-4 py-2 hover:bg-gray-100">
+            <li className="flex items-center px-4 py-2 hover:bg-gray-100 cursor-pointer" onClick={handleAboutUsClick}>
               <FaInfoCircle className="mr-3 text-blue-500" />
-              <span className='text-lg'>About Us</span>
+              <span className="text-lg">About Us</span>
             </li>
           </ul>
         </nav>
 
         {/* Footer */}
         <div className="absolute bottom-0 w-full p-4 text-center text-gray-500 text-sm">
           App version 1.0.0.0
+
         </div>
       </div>
     </>

diff --git a/repo_structure.txt b/repo_structure.txt
@@ -57,10 +57,15 @@
 │   │   ├── App.jsx
 │   │   ├── Pages/
 │   │   │   ├── 3Dmaps.jsx
+│   │   │   ├── AboutUs.jsx
 │   │   │   ├── ContactUs.jsx
+│   │   │   ├── Emergency.jsx
+│   │   │   ├── ForaFriend.jsx
+│   │   │   ├── HelpandSupport.jsx
 │   │   │   ├── Herosection.css
 │   │   │   ├── Herosection.jsx
 │   │   │   ├── LoginPage.jsx
+│   │   │   ├── Payment.jsx
 │   │   │   ├── Register.jsx
 │   │   │   ├── booking.jsx
 │   │   │   ├── contributor.jsx