From bbb3fd7c45c9768b9df1260de6b447b8d07fa85b Mon Sep 17 00:00:00 2001
From: Peter Hoppe <p.hoppe@gmx.de>
Date: Sat, 25 Feb 2023 00:10:25 +0100
Subject: [PATCH] icons

---
 extern/feathericons.com/command.svg    |   1 +
 extern/feathericons.com/grid.svg       |   1 +
 extern/feathericons.com/key.svg        |   1 +
 extern/feathericons.com/lock.svg       |   1 +
 extern/feathericons.com/log-in.svg     |   1 +
 extern/feathericons.com/log-out.svg    |   1 +
 extern/feathericons.com/trash-2.svg    |   1 +
 extern/feathericons.com/user-minus.svg |   1 +
 extern/feathericons.com/user.svg       |   1 +
 src/components/DogNavbar.tsx           |  20 +++--
 src/services/Icons.tsx                 | 105 +++++++++++++++++++++++++
 11 files changed, 127 insertions(+), 7 deletions(-)
 create mode 100644 extern/feathericons.com/command.svg
 create mode 100644 extern/feathericons.com/grid.svg
 create mode 100644 extern/feathericons.com/key.svg
 create mode 100644 extern/feathericons.com/lock.svg
 create mode 100644 extern/feathericons.com/log-in.svg
 create mode 100644 extern/feathericons.com/log-out.svg
 create mode 100644 extern/feathericons.com/trash-2.svg
 create mode 100644 extern/feathericons.com/user-minus.svg
 create mode 100644 extern/feathericons.com/user.svg
 create mode 100644 src/services/Icons.tsx

diff --git a/extern/feathericons.com/command.svg b/extern/feathericons.com/command.svg
new file mode 100644
index 0000000..df2fe83
--- /dev/null
+++ b/extern/feathericons.com/command.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-command"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>
\ No newline at end of file
diff --git a/extern/feathericons.com/grid.svg b/extern/feathericons.com/grid.svg
new file mode 100644
index 0000000..840f311
--- /dev/null
+++ b/extern/feathericons.com/grid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
\ No newline at end of file
diff --git a/extern/feathericons.com/key.svg b/extern/feathericons.com/key.svg
new file mode 100644
index 0000000..22090ed
--- /dev/null
+++ b/extern/feathericons.com/key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
\ No newline at end of file
diff --git a/extern/feathericons.com/lock.svg b/extern/feathericons.com/lock.svg
new file mode 100644
index 0000000..66ce699
--- /dev/null
+++ b/extern/feathericons.com/lock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
\ No newline at end of file
diff --git a/extern/feathericons.com/log-in.svg b/extern/feathericons.com/log-in.svg
new file mode 100644
index 0000000..da929e9
--- /dev/null
+++ b/extern/feathericons.com/log-in.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
\ No newline at end of file
diff --git a/extern/feathericons.com/log-out.svg b/extern/feathericons.com/log-out.svg
new file mode 100644
index 0000000..86af166
--- /dev/null
+++ b/extern/feathericons.com/log-out.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
\ No newline at end of file
diff --git a/extern/feathericons.com/trash-2.svg b/extern/feathericons.com/trash-2.svg
new file mode 100644
index 0000000..4b60e6b
--- /dev/null
+++ b/extern/feathericons.com/trash-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
\ No newline at end of file
diff --git a/extern/feathericons.com/user-minus.svg b/extern/feathericons.com/user-minus.svg
new file mode 100644
index 0000000..f4e5f14
--- /dev/null
+++ b/extern/feathericons.com/user-minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-minus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>
\ No newline at end of file
diff --git a/extern/feathericons.com/user.svg b/extern/feathericons.com/user.svg
new file mode 100644
index 0000000..0b77499
--- /dev/null
+++ b/extern/feathericons.com/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
\ No newline at end of file
diff --git a/src/components/DogNavbar.tsx b/src/components/DogNavbar.tsx
index ae8c778..b211de2 100644
--- a/src/components/DogNavbar.tsx
+++ b/src/components/DogNavbar.tsx
@@ -1,6 +1,7 @@
-import { Button, Navbar, Text } from '@mantine/core'
+import { Button, Navbar, Text, ThemeIcon } from '@mantine/core'
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
+import { IconGrid, IconUser, IconUserMinus } from '../services/Icons';
 import { logOut } from '../services/PhpApi'
 import Footer2 from './Footer2'
 
@@ -22,17 +23,22 @@ function DogNavbar({hasUser, onLogout}:{hasUser: boolean, onLogout: () => void})
         <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>}
+        {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></>}
         </div>
       </Navbar.Section>
+      <Navbar.Section className='InputForm' >
+      {hasUser && <Button sx = {{ padding: '0px 6px;'}} onClick={(e)=>{onLogout()}}>Logout</Button>}
+      </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 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>  )
diff --git a/src/services/Icons.tsx b/src/services/Icons.tsx
new file mode 100644
index 0000000..5107b88
--- /dev/null
+++ b/src/services/Icons.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+
+const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
+
+
+export type TIcon = 
+{
+    name: string,
+    icon: JSX.Element
+};
+
+const IconArray: TIcon[] =
+[
+    {
+        name: "user",
+        icon: 
+          <img style={{background: 'none'}}
+            src = {WWW_ROOT+'uploads/user.svg'} 
+            width='32px' 
+            height='32px'
+          />
+    },
+    {
+        name: "grid",
+        icon: 
+          <img style={{background: 'none'}}
+            src = {WWW_ROOT+'uploads/grid.svg'}
+            width='32px' 
+            height='32px'
+          />
+    },
+    {
+        name: "user-minus",
+        icon: 
+          <img style={{background: 'none'}} 
+            src = {WWW_ROOT+'uploads/user-minus.svg'}
+            width='32px' 
+            height='32px'
+            />
+    },
+    {
+        name: "log-in",
+        icon: 
+          <img style={{background: 'none'}} 
+            src = {WWW_ROOT+'uploads/log-in.svg'}
+            width='32px' 
+            height='32px'
+            />
+    },
+    {
+        name: "log-out",
+        icon: 
+          <img style={{background: 'none'}} 
+            src = {WWW_ROOT+'uploads/log-out.svg'}
+            width='32px' 
+            height='32px'
+          />
+    },
+    {
+        name: "lock",
+        icon: 
+          <img style={{background: 'none'}}
+            src = {WWW_ROOT+'uploads/lock.svg'}
+            width='32px' 
+            height='32px'
+            />  
+    }
+];
+
+
+export function IconUser() 
+{
+  return (
+    IconArray.find((i) => i.name === 'user')!.icon  )
+}
+
+export function IconUserMinus() 
+{
+  return (
+    IconArray.find((i) => i.name === 'user-minus')!.icon  )
+}
+
+export function IconLogIn() 
+{
+  return (
+    IconArray.find((i) => i.name === 'log-in')!.icon  )
+}
+
+export function IconLogOut() 
+{
+  return (
+    IconArray.find((i) => i.name === 'log-out')!.icon  )
+}
+
+export function IconLock() 
+{
+  return (
+    IconArray.find((i) => i.name === 'lock')!.icon  )
+}
+
+export function IconGrid() 
+{
+  return (
+    IconArray.find((i) => i.name === 'grid')!.icon  )
+}