import React, { useState, useRef, useEffect } from 'react' import { Link } from 'react-router-dom' import moustache from '../assets/moustache.png' const Navbar = () => { const [isOpen, setIsOpen] = useState(false) const [menuHeight, setMenuHeight] = useState(0) const menuRef = useRef(null) const toggleMenu = () => setIsOpen(!isOpen) useEffect(() => { if (menuRef.current) { setMenuHeight(isOpen ? menuRef.current.scrollHeight : 0) } }, [isOpen]) return ( <nav className="bg-black yeseva-one fixed top-0 left-0 w-full z-50 shadow-md"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-18"> {/* Logo and Title */} <Link to="/" className="flex items-center space-x-4 flex-shrink-0"> <img src={moustache} alt="Logo" className="h-16 w-auto" /> <p className="text-xl">Vitti Barberia</p> </Link> {/* Desktop Navigation */} <div className="hidden md:block"> <div className="ml-10 flex items-baseline space-x-4"> <Link to="/" className="hover:bg-gray-800 px-3 py-2 rounded-md text-sm font-medium">Home</Link> <a href="#" className="hover:bg-gray-800 px-3 py-2 rounded-md text-sm font-medium">About</a> <a href="#" className="hover:bg-gray-800 px-3 py-2 rounded-md text-sm font-medium">Services</a> <a href="#" className="hover:bg-gray-800 px-3 py-2 rounded-md text-sm font-medium">Contact</a> </div> </div> {/* Mobile Menu Button */} <div className="md:hidden"> <button onClick={toggleMenu} className="inline-flex items-center justify-center p-2 rounded-md text-white hover:bg-gray-800 focus:outline-none" > <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" > {isOpen ? ( <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> ) : ( <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /> )} </svg> </button> </div> </div> </div> {/* Mobile Dropdown Menu */} <div ref={menuRef} className="md:hidden overflow-hidden transition-all duration-300 ease-in-out" style={{ maxHeight: `${menuHeight}px` }} > <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <Link to="/" className="hover:bg-gray-800 block px-3 py-2 rounded-md text-base font-medium">Home</Link> <a href="#" className="hover:bg-gray-800 block px-3 py-2 rounded-md text-base font-medium">About</a> <a href="#" className="hover:bg-gray-800 block px-3 py-2 rounded-md text-base font-medium">Services</a> <a href="#" className="hover:bg-gray-800 block px-3 py-2 rounded-md text-base font-medium">Contact</a> </div> </div> </nav> ) } export default Navbar add a switch button to switch languages between english dutch and italian