Dashboard group layout | Next.js | Page 1

dusty summit Dec 10, 2024, 11:02 PM

#

How do I lose the navbar from my root layout in my dashboard group layout?

lone canyonBOT Dec 10, 2024, 11:02 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

dusty summit Dec 10, 2024, 11:03 PM

#

root:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/shared/navbar"; 
import { Toaster as Sonner } from "@/components/ui/sonner";

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
});

export const metadata: Metadata = {
  title: "Next starter",
  description: "Next starter by Jake Mackie",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.className} antialiased dark`}>
        <Navbar />
        {children}
        <Sonner />
      </body>
    </html>
  );
}

app/(dashboard)/layout.tsx

export default function DashboardLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return <div>{children}</div>;
}

#

elder spruce Dec 11, 2024, 12:20 AM

#

One way I can think of is remove the Navbar component from the root layout.

In the dashboard layout, you can introduce some other navbar depending on your needs.

And may be put this Navbar back in the other layouts other than the Root layout.

night frost Dec 11, 2024, 12:24 AM

#

dusty summit root: ```jsx import type { Metadata } from "next"; import { Inter } from "next/...

So this is a common issue when you have a your layout (like navbar or header, footer anything) in the root layout.
As root layout covers every page in your project, you have no way to opt-out it naturally.

#

in my opinion the best way to this problem is to use route groups

#

let say you have two route groups

#

(dashboard)```

#

and you will have different layouts for them where you can use different header there

#Dashboard group layout