Skip to content

Update Navbar.jsx #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ashish20cs17 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Navbar.jsx #51

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 20 additions & 17 deletions src/components/navbar/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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;
export default Navbar;