Next.js Discord

Discord Forum

How to fill up the whole page for a MobileNavbar client component if Homepage is a server component?

Unanswered
New Zealand posted this in #help-forum
Open in Discord
New ZealandOP
Beginner question:
How do you properly create a Mobile Navbar client component (Hamburger menu) that takes up the whole page for mobile navigation, if I want my Homepage to be a server component? I know you can

Problem:
The MobileNavbar client component is inside the nav element in the Homepage server component, I'm troubled since I cannot use hooks in my Homepage to create an event flag to track when it is clicked.

What I tried:
I tried to create it in the MobileNavbar client component, the functionality works but the UI is broken. It only fills/takes up the whole section and not the whole page

Homepage server component code:
- MobileNavbar client component is inside the nav element (needed)
- I could put it outside and it will work properly, but then the Hamburger Menu (MobileNavbar) is not in navigation and will be inappropriate.
import { Button } from "@/components/ui/button";
import MobileNavbar from "./MobileNavbar";
import Image from "next/image";

export default function Home() {
  return (
    <body className="flex flex-col w-full h-full overflow-x-hidden">
      {/* Navbar */}
      <header>
        <nav className="flex justify-between items-center w-full h-12 p-4 mt-3">
          <section className="flex justify-center items-center gap-3">
            <Image
              src="/logo.svg"
              alt="Logo"
              width="40"
              height="40"
              className="rounded-full"
              />
            <a href="/" className="font-bold text-lg font-inter">Brand</a>
          </section>
          <section className="flex gap-5">
            <a href="/" className="font-bold font-manrope">Docs</a>
            <MobileNavbar />
          </section>
        </nav>
      </header>

      {/* Hero */}
      ...
  );
}

0 Replies