sidebar

src/components/Dog.tsx

@@ -44,7 +44,9 @@ const Dog = () =>
   <p>phone: {phone}</p>
   <p>pic: {picPath}</p>
   <p>qr: {qrPath}</p> */}
-  <Img pth={picPath} className=''/>
+  <div className='flex flex-row justify-center'>
+    <Img pth={picPath} className=''/>
+  </div>
   <DogNameTxt name={name} email={email} phone={phone} qr_id={dog.qr_id} />
   </div>
 :

src/components/DogNavbar.tsx

@@ -1,46 +1,68 @@
-import { Button, Navbar, Text, ThemeIcon } from '@mantine/core'
-import React, { useState } from 'react'
+import { Navbar, Text } from '@mantine/core'
+import * as Icons from 'react-feather';
+import React from 'react'
 import { Link } from 'react-router-dom'
-import { IconGrid, IconUser, IconUserMinus } from '../services/Icons';
-import { logOut } from '../services/PhpApi'
-import Footer2 from './Footer2'
+
+
+const NaveBarIcon = ({ icon, href, text = 'tooltip 💡'}: {icon: JSX.Element, href: string, text: string}) => 
+(
+  <div className='sidebar-icon group'>
+    <>
+    <Link to={href}>{icon}</Link>
+    <span className='sidebar-tooltip group-hover:scale-100'>
+      {text}
+    </span>
+    </>
+  </div>
+  
+);
+
+const Divider = () => <hr className="sidebar-hr" />;
+
 
 function DogNavbar({hasUser, onLogout}:{hasUser: boolean, onLogout: () => void}) 
 {
   return (
-    <Navbar 
-        width={{ base: 100 }}  
-        height='100%'
+    <Navbar className="fixed top-0 left-0 h-screen w-16 flex flex-col
+    bg-orange-500"
         hiddenBreakpoint={700} 
         hidden={true} 
-        p="xs"
-        
-        sx={{ backgroundColor: 'rgb(243, 97, 12)'}}
         >
     
-    <Navbar.Section><Text>Titel</Text></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 && <>
-        <IconUser/>
-        <Text component={Link} variant='link' to='/profil'>Profil</Text></>}
-        {hasUser && <Text component={Link} variant='link' to='/wantnewpw'>PW neu</Text>}
-        {hasUser && <>
-        <IconGrid/>
-        <Text component={Link} variant='link' to='/qr'>QrCode</Text></>}
+      <Navbar.Section grow>
+        {!hasUser && 
+        <NaveBarIcon icon={<Icons.LogIn size={32}/>} href={'/login'} text={'Login'} />
+        }
+        {!hasUser && 
+        <NaveBarIcon icon={<Icons.UserPlus size={32}/>} href={'/reg'} text={'Register'} />
+        }
+        {hasUser && 
+          <NaveBarIcon icon={<Icons.User size={32}/>} href={'/profil'} text={'Profil'} />
+        }
+        {!hasUser && 
+          <NaveBarIcon icon={<Icons.Lock size={32}/>} href={'/wantnewpw'} text={'Neues Password anfordern'} />
+        }
+        {hasUser && 
+          <NaveBarIcon icon={<Icons.Grid size={32}/>} href={'/qr'} text={'QrCode drucken'} />
+        }
+      </Navbar.Section>
+      <Navbar.Section className='InputForm' >
+      {hasUser && 
+        <div onClick={(e)=>{onLogout()}}>
+          <NaveBarIcon icon={<Icons.LogOut size={32}/>} href={''} text={'Logout'}/>
         </div>
+      }
       </Navbar.Section>
+      <Divider/>
       <Navbar.Section className='InputForm' >
-      {hasUser && <Button sx = {{ padding: '0px 6px;'}} onClick={(e)=>{onLogout()}}>Logout</Button>}
+      {hasUser && 
+        <div onClick={(e)=>{onLogout()}}>
+          <NaveBarIcon icon={<Icons.UserMinus size={32}/>} href={''} text={'Account löschen'}/>
+        </div>
+      }
       </Navbar.Section>
-      <div style={{height: '10%' }}></div>    
-      <Navbar.Section className='InputForm' >
-        {hasUser && <Button sx = {{ padding: '0px 6px;'}} onClick={(e)=>{}}>Account löschen</Button>}
-      </Navbar.Section>
-      <Navbar.Section> </Navbar.Section>    
-      <Navbar.Section><Text component={Link} variant='link' to='/impressum'>Impressum</Text></Navbar.Section>    
+      <Divider/>
+      <Navbar.Section><Text className='text-xs' component={Link} variant='link' to='/impressum'>Impressum</Text></Navbar.Section>    
     </Navbar>  )
 }
 

src/components/InputForm.css

@@ -38,9 +38,11 @@ form
   border-radius: 4px;
   cursor: pointer;
   height: 25px;
-  max-width: 100%;
+  max-width: 80%;
   width: auto;
   margin-top: 5px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 .InputForm .IF_pw button
 {

src/components/Profil.tsx

@@ -183,7 +183,7 @@ function Profil()
                 <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>
+                    <button onClick={qr_refresh}>QR aktualisieren</button>
                 </div>
                 <div id="canvas"></div>
             </div>

src/components/Qr.css

@@ -83,13 +83,6 @@ img
     border-width: 1px;
 }
 
-.blockRepeat
-{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
 .order1
 {
     order: 1;

src/components/Qr.tsx

@@ -344,7 +344,7 @@ export default function Qr()
                 <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
             </div>
         </div>
-        <div className='blockRepeat'>
+        <div className='flex flex-row flex-wrap justify-center'>
             {oneQrBlock()}
             {oneQrBlock()}
             {oneQrBlock()}

src/index.css

@@ -0,0 +1,41 @@
+@import-normalize;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+*,
+*::before,
+*::after 
+{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+@layer components {
+  .sidebar-icon {
+    @apply relative flex items-center justify-center 
+    h-12 w-12 mt-2 mb-2 mx-auto  
+  bg-orange-400 hover:bg-orange-800
+  text-black hover:text-white
+    hover:rounded-xl rounded-3xl
+    transition-all duration-300 ease-linear
+    cursor-pointer shadow-lg ;
+    --bs-link-color: none;
+    --bs-link-hover-color: none;
+  }
+
+  .sidebar-tooltip {
+    @apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
+    text-white bg-orange-800 
+    text-xs font-bold 
+    transition-all duration-100 scale-0 origin-left;
+  }
+
+  .sidebar-hr {
+    @apply bg-gray-200
+    border border-gray-200 rounded-full
+    mx-2;
+  }
+}

src/services/Icons.tsx

@@ -1,7 +1,10 @@
-import React from 'react'
+import React from 'react';
+import feather from 'feather-icons';
 
 const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
 
+const ic = feather.icons.circle;
+
 
 export type TIcon = 
 {

src/services/Notifications.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { showNotification } from '@mantine/notifications';
+import * as Icons from 'feather-icons';
 
 export function notificationSuccess(msg: string)
 {