'use client' import { useState, useEffect } from 'react' import Link from 'next/link' import { motion, AnimatePresence } from 'framer-motion' const navLinks = [ { name: 'ANASAYFA', href: '/' }, { name: 'PROJELER', href: '/projects' }, { name: 'HAKKIMIZDA', href: '/about' }, { name: 'İLETİŞİM', href: '/contact' }, ] // Slot machine style link – text rolls down from top on hover function SlotLink({ href, children, className = '' }: { href: string, children: string, className?: string }) { return ( {children} ) } export default function Navbar() { const [isScrolled, setIsScrolled] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 80) } window.addEventListener('scroll', handleScroll) return () => window.removeEventListener('scroll', handleScroll) }, []) return ( <> {/* INITIAL NAVBAR */} {/* Mobile: Logo left + hamburger right */}
A.N.T
{/* Desktop Links – centered */}
{navLinks.map((link) => ( {link.name} ))}
{/* Mobile Menu Toggle */}
{/* SCROLLED COMPACT NAVBAR */} {isScrolled && !isMobileMenuOpen && (
{navLinks.map((link) => ( {link.name} ))}
{/* Scrolled Mobile Toggle */}
)}
{/* MOBILE OVERLAY MENU */} {isMobileMenuOpen && (
setIsMobileMenuOpen(false)} className="text-[24px] font-bebas tracking-tighter">A.N.T
{navLinks.map((link) => ( setIsMobileMenuOpen(false)} className="text-[40px] font-bebas tracking-tight text-black hover:pl-4 transition-all duration-300" > {link.name} ))}
)}
) }