split layout

src/layouts/DashboardLayout.tsx

@@ -0,0 +1,29 @@
+import {useUser} from "../utils/users/UseUser.ts";
+import {Outlet, useNavigate} from "react-router-dom";
+import React, {useEffect} from "react";
+
+export function DashboardLayout() {
+    const { user } = useUser();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!user) {
+            navigate("/login/")
+        }
+    }, [navigate, user]);
+
+    if (!user){
+        return null;
+    }
+
+    return (
+        <>
+            <div className="header">
+                <h1 className="logo">Pro-Fi</h1>
+            </div>
+            <div className="content">
+                <Outlet />
+            </div>
+        </>
+    );
+}

src/layouts/MainLayout.tsx

@@ -0,0 +1,16 @@
+import {Link, Outlet} from "react-router-dom";
+import React from "react";
+
+export function MainLayout() {
+    return (
+        <>
+            <div className="header">
+                <Link to="/dashboard" className="menu-button">☰</Link>
+                <h1 className="logo">Pro-Fi Test</h1>
+            </div>
+            <div className="content">
+                <Outlet />
+            </div>
+        </>
+    );
+}