So I've been working off of this nextjs example in github that uses Supabase (https://github.com/vercel/next.js/tree/f6c4c2768bae701df144705510949d97f11109a9/examples/with-supabase) and I'm stuck on one part when trying to expand upon the example. I essentially want to have my topnav to worth with useState, and I put the AuthButton in the topnav as well. So now I get an error saying that You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.

Here is a sample of my code and it seems to break on the line where I have {isSupabaseConnected && <AuthButton />}

... TopNav {
  const cookieStore = cookies();

  const canInitSupabaseClient = () => {
    try {
      createClient(cookieStore);
      return true;
    } catch (e) {
      return false;
    }
  };

  const isSupabaseConnected = canInitSupabaseClient();

  return (
      <div> ...
          {isSupabaseConnected && <AuthButton />}
        </div>
      </div>
      <MobileMenu isSupabaseConnected={isSupabaseConnected} />
    </div>
  );
};

"use client";
type MobileMenuProps = {
  isSupabaseConnected: boolean;
};

const MobileMenu = ({ isSupabaseConnected }: MobileMenuProps) => {
  const [isOpen, setIsOpen] = useState(false);

  console.log(isSupabaseConnected);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="mobile-topnav">
      <div className="mobile-topnav-items">
        <div className="mobile-topnav-left">
          <Link href="/">
            <CollectionCoffeeLogo className="mobile-topnav-logo" />
          </Link>
        </div>
        <div className="mobile-topnav-right">
          <button onClick={toggleMenu}>
            {isOpen ? <ExitIcon /> : <MenuIcon />}
          </button>
        </div>
      </div>
      {isOpen ? <div>{isSupabaseConnected && <AuthButton />}</div> : null}
    </div>
  );
};

export default MobileMenu;