From 875d376f682a4b7fee40b11a9fa4d69c45dd9b0f Mon Sep 17 00:00:00 2001
From: Ashish20cs17 <89733738+Ashish20cs17@users.noreply.github.com>
Date: Tue, 29 Apr 2025 15:59:00 +0530
Subject: [PATCH] Update Navbar.jsx

---
 src/components/navbar/Navbar.jsx | 37 +++++++++++++++++---------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index ad552b5..7249ba4 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import "./Navbar.css";
+import { Link } from 'react-router-dom';  // Import
+import "./Navbar.css";  // Ensure you have styles for both desktop and mobile views
 import { signOut } from "firebase/auth";
 import firebaseServices from "../firebase/firebaseSetup";
 import { RxHamburgerMenu } from "react-icons/rx";
@@ -9,44 +10,46 @@ const Navbar = ({ onNavigate }) => {
   const { auth } = firebaseServices;
 
   const handleHamburger = () => {
-    setShowmenu(!showmenu);
+    setShowmenu(!showmenu);  // Toggle the menu visibility on mobile view
   };
 
   const handleLogout = async () => {
     try {
-      await signOut(auth);
-      localStorage.removeItem("user");
-      onNavigate("login"); // Use onNavigate instead of useNavigate
-      setShowmenu(false);
+      await signOut(auth);  // Sign out user from Firebase
+      localStorage.removeItem("user");  // Remove user data from localStorage
+      onNavigate("login");  // Navigate to the login page
+      setShowmenu(false);  // Close the mobile menu after logout
     } catch (error) {
-      console.error("Logout error:", error);
+      console.error("Logout error:", error);  // Log any logout errors
     }
   };
 
-  // Function to navigate & close menu
+  // Function to navigate and close the menu
   const handleNavigation = (page) => {
-    onNavigate(page); // Use onNavigate prop
-    setShowmenu(false);
+    onNavigate(page);  // Navigate to the desired page
+    setShowmenu(false);  // Close the mobile menu after navigation
   };
 
   return (
     <div className="wrapper">
+      {/* Navigation Menu for Web and Mobile */}
       <nav className={showmenu ? "menu-mobile" : "menu-web"}>
         <ul>
-
-        <li onClick={() => handleNavigation("progress")}>Progress</li>
-        <li onClick={() => handleNavigation("start")}>Start</li>
+          {/* Navigation Items */}
           <li onClick={() => handleNavigation("home")}>Home Page</li>
-          
-          <li onClick={handleLogout}>Log out</li>
+          <li onClick={() => handleNavigation("start")}>Start</li> {/* Navigate to Start page */}
+          <li onClick={() => handleNavigation("progress")}>Progress</li>
+          <li onClick={handleLogout}>Log out</li>  {/* Logout functionality */}
         </ul>
       </nav>
 
+
+      {/* Hamburger Menu for Mobile */}
       <div className="hamburger">
-        <button onClick={handleHamburger}><RxHamburgerMenu /></button>
+        <button onClick={handleHamburger}><RxHamburgerMenu /></button>  {/* Display the hamburger icon */}
       </div>
     </div>
   );
 };
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;