Next.js Discord

Discord Forum

mobile navigation, please help

Unanswered
Tomistoma posted this in #help-forum
Open in Discord
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