"use client";
import { useState } from "react";

import MobileMenu from "./mobile-menu";
import MenuIcon from "./menu-icon";
import Menu from "./menu";

import Overlay from "../overlay";
import { openDialog } from "@/utils/dialogFunction";

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);

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

  return (
    <>
      <header className="fixed top-0 right-0 w-full h-20 border-b-[1px] z-30 bg-primary-100 backdrop-blur-md">
        <div className="nav-container grid lg:grid-cols-12 grid-cols-2 lg:gap-8 gap-4 h-full">
          <div className="flex items-center lg:col-span-3"><a href="/"><img src="/logo/logo-black.svg" alt="TrendFox Logo" className="max-h-14" /></a></div>
          <div className="hidden lg:flex lg:items-center lg:justify-center lg:col-span-6">
            <Menu />
          </div>
          <div className="hidden lg:flex lg:items-center lg:justify-end lg:col-span-3">
             <button className="accent"  onClick={() => openDialog()}>Get&nbsp;Free&nbsp;Monthly&nbsp;Toolkit</button>
          </div>
          <div className="lg:hidden relative">
            <MenuIcon isOpen={isOpen} toggleOpen={toggleOpen} />
          </div>
        </div>
      </header>
      <div className="lg:hidden">
        <MobileMenu isOpen={isOpen} />
        <Overlay isOpen={isOpen} onClick={() => setIsOpen(false)} />
      </div>
    </>
  );
};

export default Navigation;

Well I fucked up somewhere now I need to convert that to server component. In to Menu component i will be fetching something and it doesn't let me as it's parent is client component. Is there any quick fix or do I need to waste my day on this shit.