Fixed forgetpassword

package.json

@@ -18,8 +18,9 @@
     "@mui/material": "^5.15.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-paginate": "^8.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
+    "react-paginate": "^8.2.0",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.23.1"
   },

src/App.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
@@ -14,20 +14,22 @@ import Register from "./pages/Register";
 import Login from "./pages/Login";
 
 function App() {
+  const [registered, setRegistered] = useState(false);
+
   return (
     <BrowserRouter>
-    <Navbar/>
+      <Navbar registered={registered} setRegistered={setRegistered} />
       <Routes>
+        <Route path="/" element={<Home />} />
         <Route path="/places" element={<Homeque />} />
         <Route path="/explore" element={<Explore />} />
         <Route path="/detail" element={<DetailView />} />
         <Route path="/aboutus" element={<AboutUs />} />
-        <Route path="/register" element={<Register />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/" element={<Home />} />
-        <Route path="*" element={<NotFound />} />
-        <Route path="/Faq" element={<Faq />} />
+        <Route path="/register" element={<Register registered={registered} setRegistered={setRegistered} />} />
+        <Route path="/login" element={<Login registered={registered} setRegistered={setRegistered} />} />
+        <Route path="/faq" element={<Faq />} />
         <Route path="/contact" element={<ContactUs />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </BrowserRouter>
   );

src/components/Navbar.jsx

@@ -1,19 +1,17 @@
 import React, { useState } from "react";
+import toast from "react-hot-toast";
 import { Link } from "react-router-dom";
 
-function Navbar() {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleMenu = () => {
-    setIsOpen(!isOpen);
-  };
+function Navbar(props) {
 
-  const [btnclick, setBtnclick] = useState(false);
-  const btnClick = () => {
-    setBtnclick(!btnclick);
-  };
+  const logOut=()=>{
 
+      props.setRegistered(false)
+      toast.success("Logged Out Successfully")
+  }
+
   return (
-    <nav className={` ${isOpen ? "block" : "flex"} md:flex items-center shadow-xl fixed top-0 w-full bg-white z-10 px-4 py-2 sm:px-8 md:px-12 lg:px-16 md:justify-between lg:justify-around`}>
+    <nav className={`  block  md:flex items-center shadow-xl fixed top-0 w-full bg-white z-10 px-4 py-2 sm:px-8 md:px-12 lg:px-16 md:justify-between lg:justify-around`}>
       <style>
         @import
         url('https://fonts.googleapis.com/css2?family=Agbalumo&family=Montserrat:wght@500&display=swap');
@@ -27,9 +25,9 @@ function Navbar() {
 
 
         <div className="md:hidden">
-        <button className="focus:outline-none" onClick={toggleMenu} >
+        <button className="focus:outline-none" >
           <svg
-            className={`w-6 h-6 ${isOpen ? "hidden" : "block"}`}
+            className={`w-6 h-6 block`}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -43,7 +41,7 @@ function Navbar() {
             />
           </svg>
           <svg
-            className={`w-6 h-6 ${isOpen ? "block" : "hidden"}`}
+            className={`w-6 h-6 hidden`}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -66,36 +64,35 @@ function Navbar() {
 
       </div>
       <div
-        className={`${
-            isOpen ? "block text-center" : "hidden"
-          } md:flex md:items-center md:w-auto w-full`}
+        className={`block text-center`
+          }
       >
         <ul
           className={` md:flex md:justify-center md:pt-0 pt-4 list-none`}
         >
-          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" onClick={toggleMenu}>
+          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" >
             <Link to="/">Home</Link>
           </li>
-          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" onClick={toggleMenu}>
+          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" >
             <Link to="/places">Places</Link>
           </li>
-          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" onClick={toggleMenu}>
+          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" >
             <Link to="/aboutus">About Us</Link>
           </li>
-          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" onClick={toggleMenu}>
+          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" >
             <Link to="/Faq">FAQs</Link>
           </li>
-          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" onClick={toggleMenu}>
+          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" >
             <Link to="/register">
-              <button className="btn">
+              {props.registered?<li></li>:<button className="btn">
                 <img
                   src="user.png"
                   style={{
                     width: "22px",
                     Height: "20px",
                   }}
                 />
-              </button>
+              </button>}
             </Link>
           </li>
           {/*<li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0">
@@ -104,9 +101,14 @@ function Navbar() {
           <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0">
             <Link to="/login">Login</Link>
         </li>*/}
-          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" onClick={toggleMenu}>
+          <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" >
             <Link to="/contact">Contact Us</Link>
           </li>
+            {
+              props.registered? <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0 cursor-pointer" onClick={logOut}>
+              Log Out
+            </li>:<li></li>
+            }
         </ul>
       </div>
     </nav>

src/main.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-
+import {Toaster} from 'react-hot-toast'
 ReactDOM.createRoot(document.getElementById('root')).render(
+
   <React.StrictMode>
+
     <App />
+    <Toaster/>
   </React.StrictMode>,
 )

src/pages/Home.jsx

@@ -22,7 +22,7 @@ const Home = () => {
   } else {
     return (
       <div>
-        <Navbar />
+
         <section className="mt-[5px]">
           <img
             src="https://img.freepik.com/premium-vector/mumbai-skyline-landscape-view-city-mumbai-with-characteristics-buildings-monuments_743272-109.jpg?w=4320"