131 lines
3.9 KiB
TypeScript
131 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useRef } from 'react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import styles from './Navbar.module.css'
|
|
|
|
const navLinks = [
|
|
{ name: 'Home', href: '/' },
|
|
{ name: 'About', href: '#about' },
|
|
{ name: 'Gallery', href: '#gallery' },
|
|
{ name: 'Menu', href: '#menu' },
|
|
{ name: 'Blog', href: '#blog' },
|
|
{ name: 'Contact', href: '#contact' },
|
|
]
|
|
|
|
export default function Navbar() {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [scrolled, setScrolled] = useState(false)
|
|
const menuRef = useRef<HTMLDivElement>(null)
|
|
const hamburgerRef = useRef<HTMLButtonElement>(null)
|
|
|
|
const toggleMenu = () => {
|
|
setIsOpen(!isOpen)
|
|
}
|
|
|
|
const closeMenu = () => {
|
|
setIsOpen(false)
|
|
}
|
|
|
|
// Handle scroll for shadow effect
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if (window.scrollY > 50) {
|
|
setScrolled(true)
|
|
} else {
|
|
setScrolled(false)
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
}
|
|
}, [])
|
|
|
|
// Close menu when clicking outside
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (
|
|
isOpen &&
|
|
menuRef.current &&
|
|
!menuRef.current.contains(event.target as Node) &&
|
|
hamburgerRef.current &&
|
|
!hamburgerRef.current.contains(event.target as Node)
|
|
) {
|
|
closeMenu()
|
|
}
|
|
}
|
|
|
|
document.addEventListener('mousedown', handleClickOutside)
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside)
|
|
}
|
|
}, [isOpen])
|
|
|
|
// Prevent scrolling when mobile menu is open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
document.body.style.overflow = 'unset'
|
|
}
|
|
}, [isOpen])
|
|
|
|
return (
|
|
<nav className={`${styles.navbar} ${scrolled ? styles.navbarScrolled : ''}`}>
|
|
<div className={styles.logoContainer}>
|
|
<Link href="/" onClick={closeMenu}>
|
|
<Image
|
|
src="/images/antalya-logo.png"
|
|
alt="Antalya Restaurant"
|
|
width={200}
|
|
height={60}
|
|
className={styles.logoImage}
|
|
priority
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className={styles.desktopMenu}>
|
|
{navLinks.map((link) => (
|
|
<Link key={link.name} href={link.href} className={styles.navLink}>
|
|
{link.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Hamburger Button */}
|
|
<button
|
|
ref={hamburgerRef}
|
|
className={`${styles.hamburger} ${isOpen ? styles.hamburgerOpen : ''}`}
|
|
onClick={toggleMenu}
|
|
aria-label="Toggle menu"
|
|
>
|
|
<span className={styles.bar}></span>
|
|
<span className={styles.bar}></span>
|
|
<span className={styles.bar}></span>
|
|
</button>
|
|
|
|
{/* Mobile Menu Overlay */}
|
|
<div
|
|
ref={menuRef}
|
|
className={`${styles.mobileMenuOverlay} ${isOpen ? styles.mobileMenuOpen : ''}`}
|
|
>
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.name}
|
|
href={link.href}
|
|
className={styles.mobileNavLink}
|
|
onClick={closeMenu}
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|