pure html | Next.js | Page 1

prisma stream Aug 16, 2023, 9:10 AM

#

I would need to see your code

blissful pelican Aug 16, 2023, 9:10 AM

#

Like this:

 <button
        id="nav-button"
        popovertarget="navigation"
        className="group relative flex-col items-center justify-center gap-1.5 fill-none hover:text-white active:stroke-fabred stroke-current sm:flex sm:h-20 sm:w-20 md:h-24 md:w-24 hover:bg-fabgrey"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="1.5"
          className={`w-${w} h-${h}`}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
          />
        </svg>
      </button>
      <div
        popover
        id="navigation"
        anchor="nav-button"
        className="flex flex-col w-[250px] bg-white text-fabgrey text-center divide divide-fabred font-semibold text-lg rounded-md"
      >
        <ul>
          <li>SHOP</li>
          <li>MEDIA</li>
          <li>CONTACT</li>
        </ul>
      </div>

prisma stream Aug 16, 2023, 9:11 AM

#

Generally speaking Next.js can be tricky with hydration issues, I'll check your code

#

Can you explain what is not working?

blissful pelican Aug 16, 2023, 9:24 AM

#

It doesn't toggle visibility

prisma stream Aug 16, 2023, 9:28 AM

#

try this

#

https://ui.shadcn.com/docs/components/popover

blissful pelican Aug 16, 2023, 9:34 AM

#

Yeah, I'm currently using the Radix Popover . But what I'm trying to do is find a solution that makes my nav links visible to crawlers when the Popver content is hidden. Which generally doesn't happen with any of the pre-built components that I've seen.

prisma stream Aug 16, 2023, 9:47 AM

#

you can always create a hidden list thats only for crawlers

#pure html