Files
emaui/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
2026-06-15 10:29:28 +00:00

29 lines
790 B
TypeScript

import { AppShell } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { Outlet } from 'react-router-dom';
import { AppHeader } from './components/AppHeader';
import { AppSidebar } from './components/AppSidebar';
export function BackofficeLayout() {
const [opened, { toggle }] = useDisclosure();
return (
<AppShell
header={{ height: 64 }}
navbar={{ width: 264, breakpoint: 'sm', collapsed: { mobile: !opened } }}
padding="lg"
styles={{ main: { backgroundColor: '#f5f7fb' } }}
>
<AppShell.Header>
<AppHeader onToggle={toggle} />
</AppShell.Header>
<AppShell.Navbar>
<AppSidebar />
</AppShell.Navbar>
<AppShell.Main>
<Outlet />
</AppShell.Main>
</AppShell>
);
}