I am building an e-commerce application with Next.js 13 for fun. I have difficulties when I try to make a Login modal that pops up when I click on a button in <Header/> component.
My approach would be make a useState in the parent, which is the rootLayout here, pass the setter to <Header/>, and pass the state to the modal.
But my question is, since I will be using useState to toggle the visibility of the modal, I will need to use client component by declaring "use client". But if I use "use client" in my root layout, and use the useState hook here, will it make my whole app client component? If that's the case, then this is not ideal. How should I implement it? Is it a bad layout? Should I change it? Thanks.
This is my root layout:
import "./globals.css";
import Header from "./Header";
import LoginForm from "@components/LoginForm";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head />
<body className="relative">
<Header /> <-------------------------- THIS IS THE HEADER/NAVBAR COMPONENT
<main className="p-5">
<div>{children}</div>
</main>
<LoginForm /> <------------------------ THIS IS THE LOGIN MODAL COMPONENT
</body>
</html>
);
}
