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

src/components/DogNavbar.tsx

@@ -1,25 +1,40 @@
-import { Navbar, Text } from '@mantine/core'
-import React from 'react'
+import { Button, Navbar, Text } from '@mantine/core'
+import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { logOut } from '../services/PhpApi'
 import Footer2 from './Footer2'
 
-function DogNavbar({hasUser}:{hasUser: boolean}) 
+function DogNavbar({hasUser, onLogout}:{hasUser: boolean, onLogout: () => void}) 
 {
   return (
     <Navbar 
         width={{ base: 100 }}  
-        height={500} 
-        hiddenBreakpoint={500} 
+        height='100%'
+        hiddenBreakpoint={700} 
         hidden={true} 
-        p="xs">
+        p="xs"
+        
+        sx={{ backgroundColor: 'rgb(243, 97, 12)'}}
+        >
     
     <Navbar.Section><Text>Titel</Text></Navbar.Section>
-      <Navbar.Section grow mt="md">{/* Links sections */}</Navbar.Section>
-      <Navbar.Section><Text>Login</Text></Navbar.Section>    
-      <Navbar.Section><Text>Register</Text></Navbar.Section>    
-      {hasUser && <Navbar.Section><Text>Profil</Text></Navbar.Section>}    
-      {hasUser && <Navbar.Section><Text>QrCode</Text></Navbar.Section>}    
-      {hasUser && <Navbar.Section><Text>Logout</Text></Navbar.Section>}   
-      <Navbar.Section>Footer</Navbar.Section>    
+      <Navbar.Section grow mt="md">
+        <div style={{display: 'flex', flexDirection:'column' }}>
+        {!hasUser && <Text component={Link} variant='link' to='/login'>Login</Text>}
+        {!hasUser && <Text component={Link} variant='link' to='/reg'>Register</Text>}
+        {!hasUser && <Text component={Link} variant='link' to='/wantnewpw'>PW neu</Text>}
+        {hasUser && <Text component={Link} variant='link' to='/profil'>Profil</Text>}
+        {hasUser && <Text component={Link} variant='link' to='/qr'>QrCode</Text>}
+        </div>
+      </Navbar.Section>
+      <Navbar.Section className='InputForm' >
+        {hasUser && <Button sx = {{ padding: '0px 6px;'}} onClick={(e)=>{}}>Account löschen</Button>}
+      </Navbar.Section>
+      <Navbar.Section className='InputForm' >
+      {hasUser && <Button sx = {{ padding: '0px 6px;'}} onClick={(e)=>{onLogout()}}>Logout</Button>}
+      </Navbar.Section>    
+      <Navbar.Section> </Navbar.Section>    
+      <Navbar.Section><Text component={Link} variant='link' to='/impressum'>Impressum</Text></Navbar.Section>    
     </Navbar>  )
 }
 

src/components/Profil.tsx

@@ -33,6 +33,10 @@ function Profil()
     const edit = useRef(false);
     const formDataSave = useRef(formData); // just to fill it
 // data ist dogdata, logindata holt sich getProfilData.php aus $_SESSION
+
+    const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
+
+
     if (error) return (<div>failed to load</div>);
     if (isLoading) return (<div>loading...</div>);
 
@@ -177,6 +181,7 @@ function Profil()
                     <Link to={'/upload'}>Bild ändern</Link>
                 </div>
                 <div className='margin'>
+                    <Link to={'/' + data.data.qr_id}>{WWW_ROOT + data.data.qr_id}</Link>
                     {data.data && <Img pth={data.data.qr_code} className=''/>}
                     <button className='QRakt' onClick={qr_refresh}>QR aktualisieren</button>
                 </div>

src/services/PhpApi.ts

@@ -229,9 +229,9 @@ export const upload = (file: File, qr: string = '', onUploadProgress: any = null
 //     return data;
 // }
 
-export const logOut = () =>
+export const logOut = async () =>
 {
-    Axios.post('logout.php')
+    await Axios.post('logout.php')
     .then((res) =>
     {
         console.log('Header logout');