Project Init

apps/backoffice/src/app/layouts/BackofficeLayout.tsx

@@ -0,0 +1,27 @@
+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: 60 }}
+      navbar={{ width: 240, breakpoint: 'sm', collapsed: { mobile: !opened } }}
+      padding="md"
+    >
+      <AppShell.Header>
+        <AppHeader onToggle={toggle} />
+      </AppShell.Header>
+      <AppShell.Navbar>
+        <AppSidebar />
+      </AppShell.Navbar>
+      <AppShell.Main>
+        <Outlet />
+      </AppShell.Main>
+    </AppShell>
+  );
+}