split layout

src/App.tsx

@@ -1,14 +1,15 @@
 // App.tsx
-import {BrowserRouter as Router, Routes, Route, Link, Navigate, Outlet, useNavigate} from 'react-router-dom';
+import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
 import {MainPage} from "./pages/MainPage.tsx";
 import {SurveyPage} from "./pages/SurveyPage.tsx";
 import {DashboardPage} from "./pages/DashboardPage.tsx";
 import { SurveyResultPage } from './pages/SurveyResultPage.tsx';
 import { ProfessionPage } from './pages/ProfessionPage.tsx';
-import React, {useEffect} from "react";
+import React from "react";
 import {LoginPage} from "./pages/LoginPage.tsx";
 import {UserProvider} from "./utils/users/UserProvider.tsx";
-import {useUser} from "./utils/users/UseUser.ts";
+import {DashboardLayout} from "./layouts/DashboardLayout.tsx";
+import {MainLayout} from "./layouts/MainLayout.tsx";
 
 
 export default function App() {
@@ -40,45 +41,8 @@ export default function App() {
 }
 
 
-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>
-        </>
-    );
-}
 
 
-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>
-        </>
-    );
-}
 
 

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>
+        </>
+    );
+}