init code

src/pages/Layout.jsx

@@ -0,0 +1,41 @@
+import Header from '@components/Header'
+import Navbar from '@components/Navbar'
+import { useAuth } from '@hooks/useAuth'
+import { AppShell, ScrollArea } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import { PathConstants } from '@routes/routes'
+import { useEffect } from 'react'
+import { Outlet, useNavigate } from 'react-router-dom'
+
+export default function Layout() {
+  const [opened, { toggle }] = useDisclosure()
+  const { auth } = useAuth()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (!auth.isLogged) {
+      navigate(PathConstants.LOGIN)
+    }
+  }, [])
+
+  return (
+    <AppShell
+      header={{ height: 60 }}
+      navbar={{ width: 300, breakpoint: 'md', collapsed: { mobile: !opened } }}
+      padding="md"
+      bg="#f2fcff"
+    >
+      <AppShell.Header>
+        <Header opened={opened} onClick={toggle} />
+      </AppShell.Header>
+      <AppShell.Navbar>
+        <AppShell.Section component={ScrollArea}>
+          <Navbar />
+        </AppShell.Section>
+      </AppShell.Navbar>
+      <AppShell.Main>
+        <Outlet />
+      </AppShell.Main>
+    </AppShell>
+  )
+}