Next.js Discord

Discord Forum

Layouts

Answered
Blue Picardy Spaniel posted this in #help-forum
Open in Discord
Blue Picardy SpanielOP
See my current app structure attached. I have one layout for my root app and one layout for my dashboard, however the dashboard layout currently merges with the root layout, therefore giving me a footer which I don't want. How do I exempt my dashboard route from the footer while keeping other things from the root layout such as the navbar?
Answered by Jboncz
View full answer

47 Replies

@B33fb0n3 you can use [route groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) to group specific parts and use layouts for these parts
Blue Picardy SpanielOP
if i make a group have a specific layout will that layout merge with the root layout?
Jboncz
Layouts cascade down. Think of it as a waterfall, unless you use route groups. Route groups can 'opt-out' of the waterfall layout effect.
The link @B33fb0n3 provided has all the information you need around how to make this work properly.
Blue Picardy SpanielOP
i made a layout inside my no footer folder but for some reason it's still adapting the footer from the root layout
import GuildDropdown from "@/components/ui/dropdowns/GuildDropdown";
import SidebarCategory from "@/app/dashboard/[guild_id]/(no-footer)/SidebarCategory";
import SidebarLink from "@/app/dashboard/[guild_id]/(no-footer)/SidebarLink";

export default async function DashboardLayout({ params, children }: { params: { guild_id: string }, children: React.ReactNode }) {
  const guildID = params.guild_id;

  return (
    <div className="flex">
      {/* Sidebar */}
      <div className="bg-sidebar w-96 h-screen border-r-2 border-line">
        {/* Guild Selector */}
        <div className="flex justify-center pt-4 pb-5">
          <GuildDropdown currentGuildID={guildID} />
        </div>

        {/* Sidebar Links */}
        <div className="mx-5">
          <SidebarLink guildID={guildID} name="Overview" icon="mdi:view-dashboard" canDisableModule={false} />

          <SidebarCategory name="YOUR SERVER" />
          <SidebarLink guildID={guildID} name="Server Logging" icon="mdi:folder" />
          <SidebarLink guildID={guildID} name="Server Backups" icon="mdi:backup" />
          <SidebarLink guildID={guildID} name="Server Gate" icon="mdi:user-key" />

          <SidebarCategory name="MODERATION" />
          <SidebarLink guildID={guildID} name="Global Bans" icon="mdi:court-hammer" />
          <SidebarLink guildID={guildID} name="Moderation" icon="mdi:tools" />
          <SidebarLink guildID={guildID} name="Smart Moderation" icon="mdi:robot" />

          <SidebarCategory name="CHANNELS" />
          <SidebarLink guildID={guildID} name="Channels Filter" icon="mdi:filter" />
          <SidebarLink guildID={guildID} name="Auto Purge" icon="mdi:delete" />

          <SidebarCategory name="THREATS" />
          <SidebarLink guildID={guildID} name="Threat Detection" icon="mdi:alert-circle" />
          <SidebarLink guildID={guildID} name="Webhook Protection" icon="mdi:webhook" />
          <SidebarLink guildID={guildID} name="Token Resetter" icon="mdi:form-textbox-password" />
        </div>
      </div>

      {/* Content */}
      <div className="w-full px-20 py-11">
        {children}
      </div>
    </div>
  );
}
Skie
Can u share the repo?
I would be able to help you out
@Skie Can u share the repo?
Blue Picardy SpanielOP
there's no repo yet since it's in early development
Skie
Share it in zip
If u need that much of help
Blue Picardy SpanielOP
why do i need to share my entire project with you to get help?
Jboncz
I mean I linked the relevant documentation. Did you read through it?
Jboncz
remember route groups dont effect url so (not-dashboard) -> page.js is '/'
but (dashboard) -> dashboard -> page.js is /dashboard
but if you have a layout in app -> layout.js it still trickles down like a waterfall
This essentially allows for the most flexibility
@Jboncz Click to see attachment
Blue Picardy SpanielOP
ah i see, i wasn't aware i needed a group for the other condition too
Jboncz
No worries 🙂 The documentation was a little confusing, I only realized once I did it! 😄
@Jboncz No worries 🙂 The documentation was a little confusing, I only realized once I did it! 😄
Blue Picardy SpanielOP
ah wait, my situation is a little different
i need red to have a layout and blue to have a layout
if i wrap blue in a group then won't red have the layout too?
Jboncz
Thinking...
Lemme try in my env
Jboncz
Answer
Jboncz
Hopefully this makes sense.
It makes it a bit confusing
You still seperate them, you just drill down by creating the folders you need down the route
In dasboard
In overview
Dude your issue is some what of little basic understanding of app router
@Jboncz Lemme try in my env
Blue Picardy SpanielOP
thanks so much for your time, i’m still struggling to understand layouts haha so i just did a conditional render in my root layout
@Skie If you need to solve your problem
Blue Picardy SpanielOP
i’m not sending you my source code thanks
Skie
Rather than asking for help better read Docs bro which will make you independent
@Skie Rather than asking for help better read Docs bro which will make you independent
Blue Picardy SpanielOP
after asking for my source code, yeah okay
Blue Picardy SpanielOP
how so?
Skie
Better spend that time in nextjs docs
Blue Picardy SpanielOP
dude why are you being so toxic 💀 you’re not having my code end of
Skie
You dont even need conditional render you just need proper placement
Blue Picardy SpanielOP
okay have a nice day
Skie
Not being toxic rather making you understanding the concept
which lead you to not having further bugs
Its upto u
NVM
cya