Next.js Discord

Discord Forum

The sidebar is being re-rendered across different layout components.

Answered
Dwarf Crocodile posted this in #help-forum
Open in Discord
Avatar
Dwarf CrocodileOP
Hi, I have 2 route groups, settings and web.

These two components have a common sidebar. When I switch between layouts, the sidebar is recreated every time. What is the logical way to do this?

import Sidebar from "@/components/sidebar";
import React from "react";

export default function SettingsLayout({ children }) {
    return (
        <div className="flex">
            <Sidebar />
            <div>srttings sidebar</div>
            {children}
        </div>
    );
}


import Rightbar from "@/components/rightbar";
import Sidebar from "@/components/sidebar";
import React from "react";

export default function WebsiteLayout({ children }) {
    return (
        <div className="flex w-full">
            <Sidebar />
            <div className="border-x flex-1">{children}</div>
            <Rightbar />
        </div>
    );
}
Image
Answered by chisto
you can make another route group to share the sidebar on those 2
(sidebar)
(settings)
(website)
(nosidebar)
(auth)
View full answer

11 Replies

Avatar
Anay-208
I hope sidebar is not in the common layout inside app
If sidebar is common, you can add it inside app/layout.jsx.

I'm unsure if it'll work
Also, when switching between route groups, page is expected to refresh
Avatar
Dwarf CrocodileOP
Image
Avatar
Anay-208
I personally prefer to add the things, common in 2 route groups layout, inside the parent layout i.e. the layout outside the route group
Avatar
Dwarf CrocodileOP
I left it in RootLayout, this solved my problem.

But a different problem occurred, I don't want the sidebar to appear in AuthLayout. Since I put it in RootLayout, it also appears in auth layout 😦
Avatar
chisto
you can make another route group to share the sidebar on those 2
(sidebar)
(settings)
(website)
(nosidebar)
(auth)
Answer
Avatar
Dwarf CrocodileOP
Can I use it like this?
Image
Avatar
Anay-208
yes ig
Avatar
Dwarf CrocodileOP
I’ll try it right away. I apologize for my poor English. If I couldn’t explain myself clearly.
Thank you so much 🙂 working ❤️