Dashboard group layout
Answered
vsw posted this in #help-forum
vswOP
How do I lose the navbar from my root layout in my dashboard group layout?
8 Replies
vswOP
root:
app/(dashboard)/layout.tsx
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>;
}
Antillean Palm Swift
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.
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.
@vsw root:
jsx
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
jsx
export default function DashboardLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <div>{children}</div>;
}
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.
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
(landing)
(dashboard)Answer
and you will have different layouts for them where you can use different header there