mobile navigation, please help
Unanswered
Tomistoma posted this in #help-forum
TomistomaOP
import Link from 'next/link';
export default function Header() {
function openNav(e){
}
function closeNav(e){
}
return (
<>
<header className="py-6 md:py-10">
....
<div className="col-span-6 flex justify-end lg:col-span-3">
<a
href="tel:+48654654654"
className="mr-2 hidden font-semibold sm:flex sm:items-center lg:mr-4"
>
<img src="/images/icon-phone.svg" alt="" className="mr-3" /> 654 654
654
</a>
<a href="#" className="ml-2 mt-[.375rem] lg:hidden" onClick={openNav}>
<img src="/images/icon-nav.svg" alt="" />
</a>
</div>
</div>
</header>
<div className="fixed w-full h-full bg-white top-0 left-0 px-8 py-12 z-[999]">
<a href="" className="absolute right-6 top-9" onClick={closeNav}><img src="images/icon-close.svg" alt="Close menu" /></a>
<div className="mb-12">
<Link href="/"><img src="images/logo.svg" /></Link>
</div>
<nav>
<ul>
<li className="mb-4">
<Link href="#" className="text-2xl font-semibold text-gray-500">Strona główna</Link>
</li>
<li className="mb-4">
<Link href="#" className="text-2xl font-semibold text-gray-500">O nas</Link>
</li>
<li className="mb-4">
<Link href="#" className="text-2xl font-semibold text-gray-500">Aukcje samochodów</Link>
</li>
<li className="mb-4">
<Link href="#" className="text-2xl font-semibold text-gray-500">Kontakt</Link>
</li>
</ul>
</nav>
<div className="absolute bottom-8">
<p className="text-gray-400">Zapraszamy do kontaktu</p>
<a href="tel:+48654654654" className="mr-2 font-semibold flex items-center text-[18px]">
<img src="/images/icon-phone.svg" alt="" className="mr-3" /> 654 654 654
</a>
</div>
</div>
</>
);
}14 Replies
TomistomaOP
I have such menu, how can I make mobile navigation, open, close?
I get such error
You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.I want that server return
html
TomistomaOP
???
Wuchang bream
as per you error it looks that your are import
useState in a server component. using state hooks is not possible in server components.@Tomistoma put "use client"
TomistomaOP
but I want
this html return from server
TomistomaOP
could you help me?
TomistomaOP
??
You cant have user interaction without use client.
"use client" - it's also doing SSR