navbar

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