Hamburger menu

frontend/package.json

@@ -11,6 +11,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@material-tailwind/react": "^2.1.10",
     "@react-oauth/google": "^0.12.1",
     "axios": "^1.7.7",
@@ -36,7 +40,7 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-plugin-react": "^7.35.0",

frontend/src/App.jsx

@@ -1,30 +1,32 @@
-import React, { useEffect } from "react";
-import Herosection from "./Pages/Herosection";
-import LoginPage from "./Pages/LoginPage";
-import Register from "./Pages/Register";
-import PasswordRecovery from "./Pages/PasswordRecovery";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import chatbotsvg from "./assets/svg/chatbot.svg";
-import { useNavigate, Outlet } from "react-router-dom";
-import RailwayStations from "./Pages/stations";
-import NavigationPage from "./Pages/navigation";
-import "./App.css";
-import BookingPage from "./Pages/booking";
-import MapPage from "./Pages/3Dmaps";
-import SchedulePage from "./Pages/schedule";
-import NotificationPage from "./Pages/notification";
-import Chatbot from "./components/chatbot";
-import ContactUs from "./Pages/ContactUs";
-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";
-import Error from "./Pages/Error";
-import User from "./Pages/User";
+import React, { useEffect } from 'react';
+import Herosection from './Pages/Herosection';
+import LoginPage from './Pages/LoginPage';
+import Register from './Pages/Register';
+import PasswordRecovery from './Pages/PasswordRecovery'; // From main
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import chatbotsvg from './assets/svg/chatbot.svg';
+import { useNavigate, Outlet } from 'react-router-dom';
+import RailwayStations from './Pages/stations';
+import NavigationPage from './Pages/navigation';
+import './App.css';
+import BookingPage from './Pages/booking';
+import MapPage from './Pages/3Dmaps';
+import SchedulePage from './Pages/schedule';
+import NotificationPage from './Pages/notification';
+import Chatbot from './components/chatbot';
+import ContactUs from './Pages/ContactUs';
+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';
+import Error from './Pages/Error';
+import PrivacyPolicy from './Pages/PrivacyPolicy'; // From HamburgerMenu
+import User from './Pages/User'; // From main
+import Footer from './components/Footer';
 
 function App() {
   return (
@@ -34,7 +36,7 @@ function App() {
           <Route path='/' element={<Herosection />} />
           <Route path='/Login' element={<LoginPage />} />
           <Route path='/Register' element={<Register />} />
-          <Route path='/password-recovery' element={<PasswordRecovery />} />
+          <Route path='/password-recovery' element={<PasswordRecovery />} /> {/* From main */}
           <Route path='/Stations' element={<RailwayStations />} />
           <Route path='/Navigation' element={<NavigationPage />} />
           <Route path='/Booking' element={<BookingPage />} />
@@ -51,16 +53,11 @@ function App() {
           <Route path='/aboutus' element={<AboutUs />} />
           <Route path='/emergency' element={<Emergency />} />
           <Route path='/help-and-support' element={<HelpAndSupport />} />
-          <Route path='/help-and-support' element={<HelpAndSupport />} />
+          <Route path='/privacy-policy' element={<PrivacyPolicy />} /> {/* From HamburgerMenu */}
+          <Route path='/user' element={<User />} /> {/* From main */}
           <Route path='*' element={<Error />} />
-          <Route path='/user' element={<User />} />
-          {/* This route is just for testing protected routes it can be removed later when there is a route other than login or signup */}
         </Routes>
       </Router>
-
-      {/* <div className='fixed bottom-0 right-0 z-50 m-4 cursor-pointer'>
-      <img src={chatbotsvg} alt="chatbot" className='w-16 h-16' />
-    </div> */}
     </>
   );
 }
@@ -73,27 +70,23 @@ export function ProtectedRoute() {
   // Async function to verify the token
   const verifyToken = async () => {
     try {
-      const res = await fetch("http://localhost:3000/auth/verify", {
-        method: "GET",
+      const res = await fetch('http://localhost:3000/auth/verify', {
+        method: 'GET',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
-        credentials: "include",
+        credentials: 'include',
       });
 
       const data = await res.json();
-      console.log("Token Verification error:", data.error); // For debugging
+      console.log('Token Verification error:', data.error); // For debugging
 
       if (data.error || res.status === 400 || res.status === 500) {
-        navigate("/Login");
-      }
-
-      if (res.status === 400 || res.status === 500) {
-        navigate("/Login");
+        navigate('/Login');
       }
     } catch (error) {
-      console.error("Error verifying token:", error);
-      navigate("/Login");
+      console.error('Error verifying token:', error);
+      navigate('/Login');
     }
   };
 

frontend/src/Pages/HamburgerMenu.css

@@ -0,0 +1,115 @@
+.hamburger-icon {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 20px;
+    height: 30px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+    z-index: 1000;
+}
+
+.hamburger-icon .bar {
+    height: 3px;
+    background-color: white;
+    width: 20px;
+    margin: 3px 0;
+}
+
+.menu-container {
+    width: 300px; /* Increased width from 250px to 300px */
+    height: 100vh;
+    background-color: white;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+}
+
+.menu-header {
+    background-color: #0078D7;
+    color: white;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 150px;
+    position: relative;
+}
+
+.profile-icon {
+    border-radius: 50%;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    width: 60px;
+    height: 60px;
+}
+
+.profile-info h3 {
+    margin-top: 5px;
+    padding: 0px;
+    text-align: center;
+    font-size: 18px;
+}
+
+.profile-info p {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    font-size: 14px;
+}
+
+.menu-items {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.menu-items li {
+    padding: 15px 20px;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.menu-items li span {
+    margin-right: 10px;
+}
+
+.menu-items li a {
+    display: flex;
+    align-items: center;
+    color: black;
+    text-decoration: none;
+    width: 100%;
+}
+
+.menu-items li a svg, /* Selects the icons (SVG) */
+.menu-items li a i {
+    margin-right: 20px;
+    color: #0078D7; /* Changes icon color to blue */
+}
+
+.menu-footer {
+    margin-top: auto;
+    padding: 20px;
+    text-align: center;
+}
+
+.privacy-link {
+    color: #0078D7;
+    text-decoration: none;
+}
+
+.app-version {
+    font-size: 12px;
+    color: #888;
+    margin-top: 10px;
+    text-align: center;
+}