Layouts help

Answered

In&Out posted this in #help-forum

2024-07-18T14:24:08.928Z

I have a layout in app/layout, has typical stuff, but when i make dashboard folder, and use another layout there, its using both layouts, why is that and how to get around that?

Answered by James4u

yeah, if you don't want to have <Navbar /> in your dashboard page

View full answer

12 Replies

In&OutOP

2024-07-18T14:24:17.787Z

## Root layout

import type { Metadata } from "next";
import { Inter_Tight } from "next/font/google";
import "./globals.css";
import "@mantine/charts/styles.css";
import "@mantine/carousel/styles.css";
import "@mantine/core/styles.css";
import { MantineProvider } from "@mantine/core";
import Navbar from "@/components/home/utils/Navbar";
import styles from "@/components/home/css/Home.module.css";

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

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className={styles.Container}>
          <MantineProvider>
            <div className={styles.Middle}>
              <Navbar />
              <div className={styles.Content}>{children}</div>
            </div>
          </MantineProvider>
        </div>
      </body>
    </html>
  );
}

## Dashboard layout

import { ReactNode } from "react";

export default function DashboardLayout({ children }: { children: ReactNode }) {
  return (
    <div>
      <nav>Dashboard Navigation</nav>
      <main>{children}</main>
    </div>
  );
}