Skip to content
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

nav #80

Closed
wants to merge 1 commit into from
Closed

nav #80

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
295 changes: 227 additions & 68 deletions client/src/Components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,217 @@
import React from "react";
import { Link } from "react-router-dom";
// import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import { useCart } from "../utils/CartContext";
import { useNavigate } from "react-router-dom";
import { useNavigate, Link } from "react-router-dom";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Logo from "./Logo";

const Header = () => {
// const Header = () => {
// const { loginWithRedirect, isAuthenticated, logout, user } = useAuth0();
// const { cartItems } = useCart();
// const navigate = useNavigate();
// const isTrue = true; // Variable to temporarily store true value

// // Function to navigate to the cart page if logged in, show prompt if not
// const handleCartClick = () => {
// if (isTrue) { //Change to isAuthenticated to enable authentication
// navigate("/cart");
// } else {
// toast.error("Please log in to access the cart.", {
// position: toast.POSITION.TOP_CENTER,
// autoClose: 3000,
// hideProgressBar: true,
// closeButton: false,
// });
// }
// };

// return (
// <header className="bg-gradient-to-r from-[#523f1b] to-[#7b5e2d] p-4 shadow-lg">
// <div className="container mx-auto flex justify-between items-center">
// {/* Brand Logo as a Link with Bounce Animation */}
// <Link
// to="/"
// className="text-white text-3xl font-semibold tracking-tight flex items-center"

// >
// <Logo/>
// </Link>
// <div className="content flex max-[500px]:flex-col-reverse flex-row items-center gap-4 ">
// {/* Display user name if authenticated */}
// {isAuthenticated && (
// <span className="text-white text-sm font-medium">
// Hello, {user.name}
// </span>
// )}

// {/* Navigation */}
// <nav className="space-x-4 flex items-center">


// {/* Login/Logout Button */}
// {isAuthenticated ? (
// <button
// className="text-white border border-white hover:bg-[#ead9c6] hover:text-[#523f1b] font-semibold py-2 px-4 rounded-full transition duration-300 ease-in-out"
// onClick={() => logout({ returnTo: window.location.origin })}
// >
// Log Out
// </button>
// ) : (
// <button
// className="text-white border border-white hover:bg-[#ead9c6] hover:text-[#523f1b] font-semibold py-2 px-4 rounded-full transition duration-300 ease-in-out"
// onClick={() => loginWithRedirect()}
// >
// Log In
// </button>
// )}

// {/* Cart Button with Hover Animation */}
// <button
// className="relative text-white hover:text-blue-500 transform transition-transform duration-300 ease-in-out hover:scale-105"
// onClick={handleCartClick}
// >
// {/* New Cart SVG */}
// <svg
// xmlns="http://www.w3.org/2000/svg"
// width="32"
// height="32"
// viewBox="0 0 48 48"
// >
// <path
// fill="#ffffff" // Fill color set to white
// d="M14 36c-2.21 0-3.98 1.79-3.98 4s1.77 4 3.98 4 4-1.79-4-4-1.79-4-4-4zM2 4v4h4l7.19 15.17-2.7 4.9c-.31.58-.49 1.23-.49 1.93 0 2.21 1.79 4 4 4h24v-4H14.85c-.28 0-.5-.22-.5-.5 0-.09.02-.17.06-.24L16.2 26h14.9c1.5 0 2.81-.83 3.5-2.06l7.15-12.98c.16-.28.25-.61.25-.96a2 2 0 0 0-2-2H10.43l-1.9-4H2zm32 32c-2.21 0-3.98 1.79-3.98 4s1.77 4 3.98 4 4-1.79-4-4-1.79-4-4-4z"
// ></path>
// </svg>

// {isTrue && ( //Change to isAuthenticated to enable authentication
// <span className="absolute top-0 right-0 bg-red-500 text-white w-4 h-4 rounded-full flex items-center justify-center text-xs font-semibold">
// {cartItems.length}
// </span>
// )}
// </button>
// </nav>

// </div>
// </div>
// </header>
// );
// };

// export default Header;
import { useState } from 'react';
import { Menu, Search, Book, User, ShoppingCart, Home, Settings } from 'lucide-react';
const handleHomeClick = () => {
navigate("./Header.jsx");
};

// Function to navigate to the catalog page
const handleCatalogClick = () => {
navigate("./Blog");
};


const NavigationBar = () => {
const { loginWithRedirect, isAuthenticated, logout, user } = useAuth0();
const { cartItems } = useCart();
const navigate = useNavigate();
const isTrue = true; // Variable to temporarily store true value

// Function to navigate to the cart page if logged in, show prompt if not
const handleCartClick = () => {
if (isTrue) { //Change to isAuthenticated to enable authentication
navigate("/cart");
} else {
toast.error("Please log in to access the cart.", {
position: toast.POSITION.TOP_CENTER,
autoClose: 3000,
hideProgressBar: true,
closeButton: false,
});
}
};




// const { cartItems } = useCart();
// const { loginWithRedirect } = useAuth0();
// const { isAuthenticated, user, logout } = useAuth0();
const [isMenuOpen, setIsMenuOpen] = useState(false);
// Function to navigate to the cart page if logged in, show prompt if not

return (
<header className="bg-gradient-to-r from-[#523f1b] to-[#7b5e2d] p-4 shadow-lg">
<div className="container mx-auto flex justify-between items-center">
{/* Brand Logo as a Link with Bounce Animation */}
<Link
to="/"
className="text-white text-3xl font-semibold tracking-tight flex items-center"

>
<Logo/>
</Link>
<div className="relative">
{/* Main Navigation Bar */}

<nav className="bg-[#4A3B24] text-white shadow-lg">
<div className="max-w-7xl mx-auto px-4">
{/* Add your content here */}
</div>
<div className="flex items-center justify-between h-20">
{/* Logo and Brand */}
<div className="flex items-center space-x-4">
<button
className="lg:hidden p-2 rounded-md hover:bg-[#5A4B34]"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
<div className="content flex max-[500px]:flex-col-reverse flex-row items-center gap-4 ">
{/* Display user name if authenticated */}
{isAuthenticated && (
{isAuthenticated && (
<span className="text-white text-sm font-medium">
Hello, {user.name}
</span>
)}
</div>
{/* Display user name if authenticated */}
{isAuthenticated && (
<span className="text-white text-sm font-medium"> Hello, {user.name}
</span> )}
<Menu className="h-6 w-6" />
</button>
<div className="flex items-center space-x-2">

<div className="container mx-auto flex justify-between items-center">
</div>

<Link
to="/"
className="text-white text-3xl font-semibold tracking-tight flex items-center"

>
<Logo/>
</Link>
{/* <span className="text-xl font-semibold">My Library</span> */}
</div>
</div>
<div className="content flex max-[500px]:flex-col-reverse flex-row items-center gap-4 ">

{isAuthenticated && (
<span className="text-white text-sm font-medium">
Hello, {user.name}
</span>
)}

{/* Navigation */}
<nav className="space-x-4 flex items-center">

)}

{/* Login/Logout Button */}
{isAuthenticated ? (



{/* Desktop Navigation Links */}
<div className="hidden lg:flex items-center space-x-8">
<a href="/" className="flex items-center space-x-1 hover:text-gray-300">
<Home className="h-5 w-5" />

<button onClick={handleHomeClick} className="focus:outline-none">Home</button>
</a>
<a href="/catalog" className="flex items-center space-x-1 hover:text-gray-300">
<Book className="h-5 w-5" />
<span>Catalog</span>
</a>
<a href="/search" className="flex items-center space-x-1 hover:text-gray-300">
<Search className="h-5 w-5" />
<button onClick={handleCatalogClick} className="focus:outline-none">Advanced Search</button>
</a>
</div>


{/* Right Side Items */}
<div className="flex items-center space-x-4">
<div className="relative">
<ShoppingCart className="h-6 w-6 hover:text-gray-300 cursor-pointer" />
<span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
{isAuthenticated && (
<span className="absolute top-0 right-0 bg-red-500 text-white w-4 h-4 rounded-full flex items-center justify-center text-xs font-semibold">
{cartItems.length}
</span>
)}
0
</span>
</div>
<button className="flex items-center space-x-2 bg-[#5A4B34] px-4 py-2 rounded-md hover:bg-[#6A5B44]">
{isAuthenticated ? (
<button
className="text-white border border-white hover:bg-[#ead9c6] hover:text-[#523f1b] font-semibold py-2 px-4 rounded-full transition duration-300 ease-in-out"
onClick={() => logout({ returnTo: window.location.origin })}
Expand All @@ -66,37 +226,36 @@ const Header = () => {
Log In
</button>
)}


{/* <User className="h-5 w-5" /> */}
{/* <span>Log In</span> */}
</button>
<Settings className="h-6 w-6 hover:text-gray-300 cursor-pointer" />

</div>
</div>
</div>
</nav>

{/* Cart Button with Hover Animation */}
<button
className="relative text-white hover:text-blue-500 transform transition-transform duration-300 ease-in-out hover:scale-105"
onClick={handleCartClick}
>
{/* New Cart SVG */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 48 48"
>
<path
fill="#ffffff" // Fill color set to white
d="M14 36c-2.21 0-3.98 1.79-3.98 4s1.77 4 3.98 4 4-1.79-4-4-1.79-4-4-4zM2 4v4h4l7.19 15.17-2.7 4.9c-.31.58-.49 1.23-.49 1.93 0 2.21 1.79 4 4 4h24v-4H14.85c-.28 0-.5-.22-.5-.5 0-.09.02-.17.06-.24L16.2 26h14.9c1.5 0 2.81-.83 3.5-2.06l7.15-12.98c.16-.28.25-.61.25-.96a2 2 0 0 0-2-2H10.43l-1.9-4H2zm32 32c-2.21 0-3.98 1.79-3.98 4s1.77 4 3.98 4 4-1.79-4-4-1.79-4-4-4z"
></path>
</svg>

{isTrue && ( //Change to isAuthenticated to enable authentication
<span className="absolute top-0 right-0 bg-red-500 text-white w-4 h-4 rounded-full flex items-center justify-center text-xs font-semibold">
{cartItems.length}
</span>
)}
</button>
</nav>

</div>
</div>
</header>
{/* Mobile Menu */}
{isMenuOpen && (
<div className="lg:hidden absolute w-full bg-[#4A3B24] shadow-lg z-50">
<div className="px-2 pt-2 pb-3 space-y-1">
<a href="/" className="block px-3 py-2 rounded-md text-white hover:bg-[#5A4B34]">
Home
</a>
<a href="/catalog" className="block px-3 py-2 rounded-md text-white hover:bg-[#5A4B34]">
Catalog
</a>
<a href="/search" className="block px-3 py-2 rounded-md text-white hover:bg-[#5A4B34]">
Advanced Search
</a>
</div>
</div>
)}
</div>
);
};

export default Header;
export default NavigationBar;