add logo

src/app/components/AppHeader/Header.tsx

@@ -0,0 +1,25 @@
+"use client"
+import React from 'react'
+import { AppShell, Burger, Group } from "@mantine/core"
+import { useDisclosure } from '@mantine/hooks'
+import Image from 'next/image'
+import logo from "@/assets/logos/logo.png"
+
+export default function AppHeader() {
+
+    const [openNavbar, { toggle }] = useDisclosure()
+
+    return (
+        <AppShell.Header>
+            <Group h="100%" px="md">
+                <Burger
+                    opened={openNavbar}
+                    onClick={toggle}
+                    hiddenFrom="sm"
+                    size="sm"
+                />
+                <Image src={logo} alt='' height={30} />
+            </Group>
+        </AppShell.Header>
+    )
+}

src/app/components/AppHeader/index.ts

@@ -0,0 +1,3 @@
+import AppHeader from "./Header"
+
+export default AppHeader

src/app/components/AppNavbar/Navbar.tsx

@@ -0,0 +1,8 @@
+import { AppShell } from '@mantine/core'
+import React from 'react'
+
+export default function AppNavbar() {
+    return (
+        <AppShell.Navbar p="md">a</AppShell.Navbar>
+    )
+}

src/app/components/AppNavbar/index.ts

@@ -0,0 +1,3 @@
+import AppNavbar from "./Navbar";
+
+export default AppNavbar

src/app/dashboard/layout.tsx

@@ -0,0 +1,33 @@
+"use client"
+import { AppShell, AppShellHeader, Burger } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import Image from 'next/image'
+import React from 'react'
+import logo from "@/assets/logos/logo.png"
+import AppHeader from '../components/AppHeader'
+import AppNavbar from '../components/AppNavbar'
+
+interface Props {
+    children: React.ReactNode
+}
+
+export default function layout(props: Props) {
+
+    const [openNavbar, { toggle }] = useDisclosure(false)
+
+    return (
+        <AppShell
+            padding="md"
+            header={{ height: 60 }}
+            navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !openNavbar } }}
+        >
+            {/* Header */}
+            <AppHeader />
+
+            {/* Navbar */}
+            <AppNavbar />
+
+            <AppShell.Main>{props.children}</AppShell.Main>
+        </AppShell>
+    )
+}

src/app/dashboard/page.tsx

@@ -2,15 +2,17 @@ import React from 'react'
 
 export default async function Dashboard() {
 
-    const session = await auth();
+    // const session = await auth();
 
-    const user = session?.user;
+    // const user = session?.user;
 
-    console.log("session", session);
+    // console.log("session", session);
 
-    console.log("user", user);
+    // console.log("user", user);
 
     return (
-        <div>Dashbaord</div>
+        <div>
+            <h1>Dashboard</h1>
+        </div>
     )
 }