108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
'use client';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
import { FiSearch, FiUser } from 'react-icons/fi';
|
|
import { HiShoppingBag } from 'react-icons/hi2';
|
|
|
|
// import logoWhite from '/public/images/logo-white.svg';
|
|
import logoBlack from '/public/images/logo-black.svg';
|
|
|
|
import styles from './navbar.module.css';
|
|
|
|
// components/Navbar.tsx
|
|
export function Navbar() {
|
|
const prevScrollY = useRef(0);
|
|
const [navBarStyle, setNavBarStyle] = useState('initial');
|
|
const [isVisible, setIsVisible] = useState('false');
|
|
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const currentScrollY = window.scrollY;
|
|
if (currentScrollY > prevScrollY.current && currentScrollY > 100) {
|
|
// Scrolling down and scrolled past 100px
|
|
setNavBarStyle('initial');
|
|
} else if (currentScrollY < prevScrollY.current && currentScrollY > 100) {
|
|
// Scrolling up and scrolled past 100px
|
|
setNavBarStyle('scrolledUp');
|
|
} else if (currentScrollY <= 100) {
|
|
setNavBarStyle('initial');
|
|
}
|
|
prevScrollY.current = currentScrollY;
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []); // Empty dependency array
|
|
|
|
// const navClasses = `${styles.navBar} ${
|
|
// navBarStyle === 'scrolledUp'
|
|
// ? styles.navBarScrolledUp
|
|
// : styles.navBarInitial
|
|
// }`;
|
|
|
|
//Hack for now
|
|
const navClasses = `${styles.navBar} ${
|
|
navBarStyle === 'scrolledUp' ? styles.navBarScrolledUp : styles.navBarScrolledUp
|
|
}`;
|
|
|
|
function toggleMenu() {
|
|
if (isVisible === 'true') {
|
|
setIsVisible('false');
|
|
setIsExpanded(false);
|
|
} else {
|
|
setIsVisible('true');
|
|
setIsExpanded(true);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<button
|
|
className={styles.mobileNavToggle}
|
|
aria-controls='primary-navigation'
|
|
aria-expanded={isExpanded}
|
|
onClick={toggleMenu}
|
|
>
|
|
<span className='sr-only'>Menu</span>
|
|
</button>
|
|
<nav data-visible={isVisible} className={navClasses}>
|
|
{/* Left side */}
|
|
<div>
|
|
<Link href='/about-us' className='font-light hover:underline'>
|
|
About Us
|
|
</Link>
|
|
<Link href='/products' className='font-light hover:underline'>
|
|
Shop
|
|
</Link>
|
|
</div>
|
|
{/* Middle */}
|
|
<div className='flex-shrink'>
|
|
<Link href='/' className='text-lg font-bold'>
|
|
<Image
|
|
src={logoBlack}
|
|
// src={navBarStyle === 'scrolledUp' ? logoWhite : logoBlack}
|
|
alt='Logo'
|
|
className='h-full logo'
|
|
width={100}
|
|
height={100}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
{/* Right side */}
|
|
<div className=''>
|
|
<button aria-label='Search' className='rounded-full hover:shadow-md'>
|
|
<FiSearch size={20} className='m-2.5' />
|
|
</button>
|
|
<button aria-label='Profile' className='rounded-full hover:shadow-md'>
|
|
<FiUser size={20} className='m-2.5' />
|
|
</button>
|
|
<a aria-label='Shopping Cart' href='/cart' className='rounded-full hover:shadow-md'>
|
|
<HiShoppingBag size={20} className='m-2.5' />
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|