navbar

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Login from './components/Login';
@@ -12,7 +12,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import FileUpload from './components/FileUpload';
 import Profil from './components/Profil';
 import useSWR from 'swr';
-import {getUser} from './services/PhpApi'
+import {getUser, logOut} from './services/PhpApi'
 import { TUser } from './context/UserContext';
 import PasswordReset from './components/PasswordReset';
 import WantNewPw from './components/WantNewPw';
@@ -21,21 +21,33 @@ import
   MantineProvider,
   AppShell, 
   Navbar, 
-  Header, 
+  Text, 
   Aside, 
   Footer 
 } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
-import { notificationError } from './services/Notifications';
+import { notificationAlert, notificationError, notificationSuccess } from './services/Notifications';
 import DogNavbar from './components/DogNavbar';
 
 const App: React.FC = () => 
 {
-  const {data, error, isLoading} = useSWR("/user", getUser);
+  const {data, error, isLoading, mutate} = useSWR("/user", getUser);
 
   console.log('App getUser');
   console.log(data);
   
+
+  async function userLogout()
+  {
+    await logOut();
+    mutate();
+    notificationSuccess('Abgemeldet!');
+    console.log('userLogout');
+
+    window.location.href = '/dog/';
+  }
+
+
   if (error)
   { 
     notificationError(error.message);
@@ -47,26 +59,29 @@ const App: React.FC = () =>
   if (isLoading) return (<div>loading...</div>);
   
   let user: TUser | null;
+  let hasUser: boolean;
   if(data.success)
   {
     user = data.data;
+    hasUser = true;
   }
   else
   {
     user = null;
+    hasUser = false;
   }
   
   return (
     <MantineProvider withNormalizeCSS withGlobalStyles>
-    <NotificationsProvider position="top-center" >       
-    <AppShell
-      padding={0}
-      navbarOffsetBreakpoint={500}
-      navbar={<DogNavbar hasUser={user ? true : false} />}
-    >
+      <NotificationsProvider position="top-center" >       
         <div className="App">
-          <div className="col middle">
             <BrowserRouter basename='/dog/'>
+              <AppShell
+                padding={0}
+                fixed
+                navbarOffsetBreakpoint={700}
+                navbar={<DogNavbar hasUser={user ? true : false} onLogout={userLogout}/>} 
+              >
               <Routes>
                   {user && <Route index path="/" element={<Profil/>} />}
                   {/* {user && <Route index path="/" element={<Home/>} />} */}
@@ -82,12 +97,10 @@ const App: React.FC = () =>
                   {user && <Route path="/upload" element={<FileUpload/>} />}
                   {user && <Route path="/profil" element={<Profil/>} />}
               </Routes>
+              </AppShell>
             </BrowserRouter>
           </div>
-        
-        </div>
-      </AppShell>
-    </NotificationsProvider>
+      </NotificationsProvider>
     </MantineProvider>
   );
 }