How to provide the DashboardLayout with custom slots? #4623

aknobloch · 2025-01-20T17:53:32Z

aknobloch
Jan 20, 2025

This is probably a novice question; I'm new to this entire stack and web development in general.

Following the tutorials, I've got the following root layout:

// Redacted for brevity...

export default async function RootLayout(props: { children: React.ReactNode }) {
  const session = await auth();

  return (
    <html lang="en" data-toolpad-color-scheme="light" suppressHydrationWarning>
      <body>
        <SessionProvider session={session}>
          <AppRouterCacheProvider options={{ enableCssLayer: true }}>
          
            <NextAppProvider
              navigation={NAVIGATION}
              branding={BRANDING}
              session={session}
              authentication={AUTHENTICATION}
              theme={theme}
            >
              {props.children}
            </NextAppProvider>
            
          </AppRouterCacheProvider>
        </SessionProvider>
      </body>
    </html>
  );
}

I'd like more control over the branding. The documentation says this can be done by the appTitle slot that's associated with the DashboardLayout. But I'm unclear on how exactly I'm meant to actually access / set that slot. Attempting to configure my own DashboardLayout as a child of the NextAppProvider led me down a rabbit hole of issues with routing & navigation.

bharatkashyap · 2025-01-21T08:01:37Z

bharatkashyap
Jan 21, 2025
Maintainer

Attempting to configure my own DashboardLayout as a child of the NextAppProvider led me down a rabbit hole of issues with routing & navigation.

If you want to provide a slot to the DashboardLayout, you will have to do this, so feel free to share the issues you ran into (perhaps with a minimal reproduction in a Code Sandbox link) and we can look into resolving those

2 replies

aknobloch Jan 22, 2025
Author

Thanks for confirming! I don't think there were necessarily issues per se. Just a lot of reinventing the wheel, and I was hoping there was an easier way. How would your team feel about increasing the AppProvider interface to accept slots for child components? If it's not a terrible idea, do you take PRs from external contributors?

bharatkashyap Jan 27, 2025
Maintainer

Sorry for the late response! We're very open to taking community contributions., but usually require it to be either a bug fix or a demonstrated need that benefits at least a small group of users. We track that interest through issues, so feel free to open a new one and collect upvotes/comments on it!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to provide the DashboardLayout with custom slots? #4623

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to provide the DashboardLayout with custom slots? #4623

aknobloch Jan 20, 2025

Replies: 1 comment · 2 replies

bharatkashyap Jan 21, 2025 Maintainer

aknobloch Jan 22, 2025 Author

bharatkashyap Jan 27, 2025 Maintainer

aknobloch
Jan 20, 2025

Replies: 1 comment 2 replies

bharatkashyap
Jan 21, 2025
Maintainer

aknobloch Jan 22, 2025
Author

bharatkashyap Jan 27, 2025
Maintainer