From a21af7d08b99aa3f487b5cde2be6e9e6174336d4 Mon Sep 17 00:00:00 2001
From: Peter Hoppe <p.hoppe@gmx.de>
Date: Thu, 23 Feb 2023 23:58:16 +0100
Subject: [PATCH] navbar

---
 src/App.tsx                                | 27 ++++++++++++++++------
 src/components/DogNavbar.tsx               | 26 +++++++++++++++++++++
 src/components/{Footer.tsx => Footer2.tsx} |  4 ++--
 src/components/{Header.tsx => Header2.tsx} |  5 ++--
 4 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 src/components/DogNavbar.tsx
 rename src/components/{Footer.tsx => Footer2.tsx} (78%)
 rename src/components/{Header.tsx => Header2.tsx} (84%)

diff --git a/src/App.tsx b/src/App.tsx
index fd3a55c..6fef147 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,8 +5,8 @@ import Login from './components/Login';
 import Register from './components/Register';
 import Dog from './components/Dog';
 import Qr from './components/Qr';
-import Header from './components/Header';
-import Footer from './components/Footer';
+import Header2 from './components/Header2';
+import Footer2 from './components/Footer2';
 import Impressum from './components/Impressum';
 import "bootstrap/dist/css/bootstrap.min.css";
 import FileUpload from './components/FileUpload';
@@ -16,9 +16,18 @@ import {getUser} from './services/PhpApi'
 import { TUser } from './context/UserContext';
 import PasswordReset from './components/PasswordReset';
 import WantNewPw from './components/WantNewPw';
-import { MantineProvider } from '@mantine/core';
+import 
+{ 
+  MantineProvider,
+  AppShell, 
+  Navbar, 
+  Header, 
+  Aside, 
+  Footer 
+} from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
 import { notificationError } from './services/Notifications';
+import DogNavbar from './components/DogNavbar';
 
 const App: React.FC = () => 
 {
@@ -50,10 +59,14 @@ const App: React.FC = () =>
   return (
     <MantineProvider withNormalizeCSS withGlobalStyles>
     <NotificationsProvider position="top-center" >       
-    <div className="App">
+    <AppShell
+      padding={0}
+      navbarOffsetBreakpoint={500}
+      navbar={<DogNavbar hasUser={user ? true : false} />}
+    >
+        <div className="App">
           <div className="col middle">
             <BrowserRouter basename='/dog/'>
-              {user && <Header />}
               <Routes>
                   {user && <Route index path="/" element={<Profil/>} />}
                   {/* {user && <Route index path="/" element={<Home/>} />} */}
@@ -69,11 +82,11 @@ const App: React.FC = () =>
                   {user && <Route path="/upload" element={<FileUpload/>} />}
                   {user && <Route path="/profil" element={<Profil/>} />}
               </Routes>
-              <Footer/>
             </BrowserRouter>
           </div>
         
-    </div>
+        </div>
+      </AppShell>
     </NotificationsProvider>
     </MantineProvider>
   );
diff --git a/src/components/DogNavbar.tsx b/src/components/DogNavbar.tsx
new file mode 100644
index 0000000..aa2b063
--- /dev/null
+++ b/src/components/DogNavbar.tsx
@@ -0,0 +1,26 @@
+import { Navbar, Text } from '@mantine/core'
+import React from 'react'
+import Footer2 from './Footer2'
+
+function DogNavbar({hasUser}:{hasUser: boolean}) 
+{
+  return (
+    <Navbar 
+        width={{ base: 100 }}  
+        height={500} 
+        hiddenBreakpoint={500} 
+        hidden={true} 
+        p="xs">
+    
+    <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>  )
+}
+
+export default DogNavbar
diff --git a/src/components/Footer.tsx b/src/components/Footer2.tsx
similarity index 78%
rename from src/components/Footer.tsx
rename to src/components/Footer2.tsx
index 361eb57..f7a3e51 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer2.tsx
@@ -1,10 +1,10 @@
 import { Link } from 'react-router-dom';
 import './Footer.css';
 
-function Footer() {
+function Footer2() {
   return (
     <div className="noprint"><Link to={'./Impressum'}>Impressum</Link></div>
   );
 }
 
-export default Footer;
\ No newline at end of file
+export default Footer2;
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header2.tsx
similarity index 84%
rename from src/components/Header.tsx
rename to src/components/Header2.tsx
index 1dc01bb..a1d068a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header2.tsx
@@ -5,7 +5,7 @@ import {logOut} from '../services/PhpApi'
 import { notificationSuccess } from '../services/Notifications';
 
 
-function Header() 
+function Header2() 
 {
     const logOutForm = () =>
     {
@@ -17,10 +17,9 @@ function Header()
         
     return (
     <div className='logout InputForm'>
-        <div className='noprint'>Header</div>
         <button onClick={logOutForm}>Logout</button>
     </div>
   );
 }
 
-export default Header;
\ No newline at end of file
+export default Header2;
\ No newline at end of file