Change parent layout
Unanswered
Rohu posted this in #help-forum
RohuOP
Hi there 👋
I have an app that I'm starting with Next 13. I have a basic layout for the welcome page (i.e. RootLayout), with a header then {children}.
In one of the other pages, let's call it "ContentPage", I want to have a layout (ContentLayout) with a sidebar and then {children}. Assuming composition of layouts, the rendering of the ContentPage will have a header, a sidebar, and the page's {children}.
The problem is, I want to have a hamburger menu button in the header when I'm viewing the ContentPage (i.e. when I have a sidebar) that toggles the sidebar. But on the welcome page (RootLayout) I don't need it, as I don't have a sidebar.
My question is, can I, from the ContentLayout, somehow render the hamburger menu button on the RootLayout, so that the header will have that button only when rendering the ContentPage? If not, what would you suggest to do?
I have an app that I'm starting with Next 13. I have a basic layout for the welcome page (i.e. RootLayout), with a header then {children}.
In one of the other pages, let's call it "ContentPage", I want to have a layout (ContentLayout) with a sidebar and then {children}. Assuming composition of layouts, the rendering of the ContentPage will have a header, a sidebar, and the page's {children}.
The problem is, I want to have a hamburger menu button in the header when I'm viewing the ContentPage (i.e. when I have a sidebar) that toggles the sidebar. But on the welcome page (RootLayout) I don't need it, as I don't have a sidebar.
My question is, can I, from the ContentLayout, somehow render the hamburger menu button on the RootLayout, so that the header will have that button only when rendering the ContentPage? If not, what would you suggest to do?
25 Replies
RohuOP
Bumping
Polar bear
lemme make sure that i understand, u want a hamburger menu in the content page
but on the welcome page u dont need it
right?
what's the issue then u can do that
RohuOP
Well, how would you suggest me to do that?
I would like to use the advantage of layout composition of Next 13
I'd rather not create a new header for the content page, as that would kill the whole point of the new layouts if I'm not mistaken
Polar bear
make the root layout pass the info
you'll use true or false
if "true" show this if not then dont
pass it as props from the parent to the child
then conditionally render
@Polar bear pass it as props from the parent to the child
RohuOP
That would require me to somehow know from the child the layout parent's props.. But next 13's layouts don't act like regular components so I can't simply prop drill. I'll need to use Context for that. Is this not a bad pattern of usage for layouts?
but I get u
u wanna try to use the layouts feature
RohuOP
Yeah that's the whole point, I want to try and do it the Next-way as much as I can
Fortunately it's not a production project, so I can mess around a bit 😉
Polar bear
@Rohu maybe do sth like if it's at /home appear if not then don't
access the url and check if it's at / don't appear if it's at /sth then don't
RohuOP
but that would still require me to control the root layout state
I thought about portalling the icon from the content layout to the header, but that'd way too ugly
RohuOP
Sorry for reviving this thread, but I still don't know for sure what I'm suppose to be doing.
If I understand correctly, the moment I decide that I want a sidebar (in any of my pages really) I'm forced to make my entire app client-side (except perhaps the top elements in RootLayout that are not contained in the SidebarContext)? It basically means that I'm losing all server-side benefits (if I'm understanding this page correctly https://vercel.com/guides/react-context-state-management-nextjs)
If I understand correctly, the moment I decide that I want a sidebar (in any of my pages really) I'm forced to make my entire app client-side (except perhaps the top elements in RootLayout that are not contained in the SidebarContext)? It basically means that I'm losing all server-side benefits (if I'm understanding this page correctly https://vercel.com/guides/react-context-state-management-nextjs)