78 lines
1.8 KiB
Plaintext
78 lines
1.8 KiB
Plaintext
|
# Layout Customization
|
||
|
|
|
||
|
|
By default, Dashcode includes three predefined layouts. However, you can create new layouts based on your requirements.
|
||
|
|
|
||
|
|
### Adding a New Layout:
|
||
|
|
|
||
|
|
Start by opening the layout.tsx file and adding your new layout using the provided code snippet.
|
||
|
|
|
||
|
|
|
||
|
|
```tsx filename="app/[locale]/layout.tsx"
|
||
|
|
|
||
|
|
export default async function RootLayout({
|
||
|
|
children,
|
||
|
|
params: { locale },
|
||
|
|
}: Readonly<{
|
||
|
|
children: React.ReactNode;
|
||
|
|
params: { locale: string };
|
||
|
|
}>) {
|
||
|
|
|
||
|
|
const messages = await getMessages();
|
||
|
|
const direction = getLangDir(locale);
|
||
|
|
return (
|
||
|
|
<html lang={locale} dir={direction}>
|
||
|
|
<body className={`${inter.className} dashcode-app`}>
|
||
|
|
<NextIntlClientProvider messages={messages} locale={locale}>
|
||
|
|
<AuthProvider>
|
||
|
|
<ThemeProvider attribute="class"
|
||
|
|
|
||
|
|
defaultTheme="light">
|
||
|
|
<MountedProvider>
|
||
|
|
|
||
|
|
<DirectionProvider direction={direction}>
|
||
|
|
{children}
|
||
|
|
</DirectionProvider>
|
||
|
|
|
||
|
|
</MountedProvider>
|
||
|
|
<Toaster />
|
||
|
|
<SonnerToaster />
|
||
|
|
</ThemeProvider>
|
||
|
|
</AuthProvider>
|
||
|
|
</NextIntlClientProvider>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
### Defining Your Layout:
|
||
|
|
|
||
|
|
Once you've created your layout, define it in the use-config.ts file by following the code snippet provided.
|
||
|
|
|
||
|
|
|
||
|
|
```ts filename="hooks/use-config.ts"
|
||
|
|
export type Config = {
|
||
|
|
collapsed: boolean
|
||
|
|
theme: string
|
||
|
|
skin: 'default' | 'bordered'
|
||
|
|
layout: layoutType
|
||
|
|
sidebar: sidebarType
|
||
|
|
menuHidden: boolean,
|
||
|
|
showSearchBar: boolean,
|
||
|
|
showSwitcher: boolean
|
||
|
|
topHeader: 'default' | 'links'
|
||
|
|
contentWidth: 'wide' | 'boxed'
|
||
|
|
navbar: navBarType
|
||
|
|
footer: 'sticky' | 'default' | 'hidden'
|
||
|
|
isRtl: boolean
|
||
|
|
subMenu: boolean
|
||
|
|
hasSubMenu: boolean
|
||
|
|
sidebarTheme: string,
|
||
|
|
headerTheme: string,
|
||
|
|
sidebarBgImage?: string
|
||
|
|
radius: number
|
||
|
|
|
||
|
|
}
|
||
|
|
```
|