AppShell doesn't support separate components?(mantine7+nextjs14) #5369

Tomycl · 2023-12-05T02:55:47Z

Tomycl
Dec 5, 2023

This is the problem I'm having:
I created a mantine7+nextjs14 project, with <AppShellHeader/> as the first-level directory and <AppShellNavbar/> as the second-level directory. That is, when you click on different links in <AppShellHeader/>, the <AppShellNavbar/> part will display different content.

But I found that mantine's design concept is to build a single-page application, that is, the entire application uses a unique header/navbar/main(not separate).

I use nextjs's {children} to complete this function.
The layout.tsx file in my root directory already uses <AppShell/> and <AppShellHeader/>. Now if I add <AppShellNavbar/> and <AppShellMain/> to its subdirectory, the format will be disordered.

/app/layout.tsx

import type {Metadata} from "next";
import "@mantine/core/styles.css";
import {MantineProvider, ColorSchemeScript} from "@mantine/core";
import {AppShell, AppShellHeader, AppShellMain} from "@mantine/core";

export const metadata: Metadata = {
  title: "title",
  description: "description",
};

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="zh">
      <head>
        <ColorSchemeScript defaultColorScheme="auto" />
      </head>
      <body>
        <MantineProvider>
          <AppShell header={{height: 60}}>
            <AppShellHeader>header</AppShellHeader>
            <AppShellMain style={{backgroundColor: "blue"}}>{children}</AppShellMain>
          </AppShell>
        </MantineProvider>
      </body>
    </html>
  );

/app/display/layout.tsx

import {AppShell, AppShellMain, AppShellNavbar} from "@mantine/core";

export default function DisplayLayout({children}: {children: React.ReactNode}) {
  return (
    <AppShell navbar={{width: 300, breakpoint: "sm"}}>
      <AppShellNavbar style={{backgroundColor: "red"}}>navbar</AppShellNavbar>
      <AppShellMain style={{backgroundColor: "yellow"}}>{children}</AppShellMain>
    </AppShell>
  );
}