106 lines
3.2 KiB
JavaScript
106 lines
3.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import styles from './Styles.module.css';
|
|
|
|
const Header = ({ username, scrollToProduct, scrollToCourse, setShowedModal, handleLogout }) => {
|
|
const navigate = useNavigate();
|
|
const [hoveredNav, setHoveredNav] = useState(null);
|
|
const [menuOpen, setMenuOpen] = useState(false); // toggle mobile menu
|
|
|
|
return (
|
|
<header className={styles.header}>
|
|
<img src="./kediri-technopark-logo.png" className={styles.logo} alt="Logo" />
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className={styles.nav}>
|
|
<a
|
|
className={`${styles.navLink} ${hoveredNav === 2 ? styles.navLinkHover : ''}`}
|
|
onMouseEnter={() => setHoveredNav(2)}
|
|
onMouseLeave={() => setHoveredNav(null)}
|
|
onClick={() => navigate('/')}
|
|
>
|
|
HOME
|
|
</a>
|
|
<a
|
|
className={`${styles.navLink} ${hoveredNav === 3 ? styles.navLinkHover : ''}`}
|
|
onMouseEnter={() => setHoveredNav(3)}
|
|
onMouseLeave={() => setHoveredNav(null)}
|
|
onClick={() => {
|
|
if (!username) scrollToProduct();
|
|
else navigate('/products');
|
|
}}
|
|
>
|
|
{username ? 'MY PRODUCTS' : 'PRODUCTS'}
|
|
</a>
|
|
<a
|
|
className={`${styles.navLink} ${hoveredNav === 3 ? styles.navLinkHover : ''}`}
|
|
onMouseEnter={() => setHoveredNav(3)}
|
|
onMouseLeave={() => setHoveredNav(null)}
|
|
onClick={() => {
|
|
if (!username) scrollToCourse();
|
|
else window.location.href = 'https://academy.kediritechnopark.com'
|
|
}}
|
|
>
|
|
{username ? 'MY ACADEMY' : 'ACADEMY'}
|
|
</a>
|
|
</nav>
|
|
|
|
{/* Burger Menu Button */}
|
|
<div className={styles.burger} onClick={() => setMenuOpen(!menuOpen)}>
|
|
☰
|
|
</div>
|
|
|
|
{/* Mobile Dropdown Menu */}
|
|
{menuOpen && (
|
|
<div className={styles.mobileMenu}>
|
|
{username ? (
|
|
<>
|
|
<div className={styles.username}>{username}</div>
|
|
|
|
<button className={styles.logoutButton} onClick={() => {
|
|
navigate('/products');
|
|
}}>
|
|
MY PRODUCTS
|
|
</button>
|
|
|
|
<button className={styles.logoutButton} onClick={() => {
|
|
setMenuOpen(false);
|
|
handleLogout();
|
|
}}>
|
|
Logout
|
|
</button>
|
|
</>
|
|
) : (
|
|
<button
|
|
className={styles.loginButton}
|
|
onClick={() => {
|
|
setMenuOpen(false);
|
|
setShowedModal('login');
|
|
}}
|
|
>
|
|
LOGIN
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Desktop Auth Buttons */}
|
|
<div className={styles.authButtons}>
|
|
{username && (
|
|
<div className={styles.loggedInContainer}>
|
|
<span className={styles.username}>{username}</span>
|
|
<button className={styles.logoutButton} onClick={handleLogout}>Logout</button>
|
|
</div>
|
|
)}
|
|
{!username && (
|
|
<button className={styles.loginButton} onClick={() => setShowedModal('login')}>
|
|
LOGIN
|
|
</button>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|