burger

src/App.tsx

@@ -5,8 +5,6 @@ import Login from './components/Login';
 import Register from './components/Register';
 import Dog from './components/Dog';
 import Qr from './components/Qr';
-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';
@@ -20,10 +18,13 @@ import
 { 
   MantineProvider,
   AppShell, 
-  Navbar, 
+   
   Text, 
-  Aside, 
+   
-  Footer 
+   
+  Header,
+  MediaQuery,
+  Burger
 } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
 import { notificationAlert, notificationError, notificationSuccess } from './services/Notifications';
@@ -32,7 +33,8 @@ import DogNavbar from './components/DogNavbar';
 const App: React.FC = () => 
 {
   const {data, error, isLoading, mutate} = useSWR("/user", getUser);
-
+  const [opened, setOpened] = useState(false);
+  
   console.log('App getUser');
   console.log(data);
   
@@ -78,9 +80,26 @@ const App: React.FC = () =>
             <BrowserRouter basename='/dog/'>
               <AppShell
                 padding={0}
-                fixed
+                
-                navbarOffsetBreakpoint={700}
+                navbarOffsetBreakpoint="sm"
-                navbar={<DogNavbar hasUser={user ? true : false} onLogout={userLogout}/>} 
+                navbar={<DogNavbar hidden={!opened} hasUser={user ? true : false} onLogout={userLogout}/>} 
+              
+                // header={
+                //   <Header height={'44px'} p="md" className='bg-orange-500'>
+                //     <div className='flex justify-start'>
+                //       <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+                //         <Burger
+                //           opened={opened}
+                //           onClick={() => setOpened((o) => !o)}
+                //           size="sm"
+                          
+                //           mr="xl"
+                //         />
+                //       </MediaQuery>
+          
+                //       <Text></Text>
+                //     </div>
+                //   </Header>}
               >
               <Routes>
                   {user && <Route index path="/" element={<Profil/>} />}

src/components/ContactForm.css

@@ -22,6 +22,8 @@ input[type=email], select, textarea
   width: auto;
   height: 25px;
   align-self: end;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
 div.flexCenter
@@ -54,7 +56,7 @@ div.flexCenter
     padding: 20px;
     justify-content: center;   
     width: 60%;
-    
+    border-color: black;
     padding: 10px;
     border-style: solid;
     border-width: 2px;

src/components/Dog.tsx

@@ -39,11 +39,6 @@ const Dog = () =>
   const content: ReactNode = dogRes.success === 1 ?
   <div className = 'Dog'>
   <h1>Hast Du mich gefunden?</h1>
-  {/* <p>name: {name}</p>
-  <p>email: {email}</p>
-  <p>phone: {phone}</p>
-  <p>pic: {picPath}</p>
-  <p>qr: {qrPath}</p> */}
   <div className='flex flex-row justify-center'>
     <Img pth={picPath} className=''/>
   </div>

src/components/DogNavbar.tsx

@@ -20,13 +20,14 @@ const NaveBarIcon = ({ icon, href, text = 'tooltip 💡'}: {icon: JSX.Element, h
 const Divider = () => <hr className="sidebar-hr" />;
 
 
-function DogNavbar({hasUser, onLogout}:{hasUser: boolean, onLogout: () => void}) 
+function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolean, onLogout: () => void}) 
 {
   return (
-    <Navbar className="fixed top-0 left-0 h-screen w-16 flex flex-col
+    <Navbar className="fixed top-11 left-0 w-16 h-[90%] flex flex-col
     bg-orange-500"
-        hiddenBreakpoint={700} 
+    
-        hidden={true} 
+        hiddenBreakpoint='sm' 
+        hidden={hidden} 
         >
     
       <Navbar.Section grow>