From 49158a2b2419337a05f8b7db728607c51363484d Mon Sep 17 00:00:00 2001
From: Peter Hoppe <p.hoppe@gmx.de>
Date: Tue, 6 Dec 2022 22:51:16 +0100
Subject: [PATCH] navesidebar

---
 src/components/Navbar.css                     |  72 ++++++++++++++++++
 src/components/Navbar.ts                      |  47 ++++++++++++
 src/components/SidebarData.ts                 |  43 +++++++++++
 src/pages/Home.js                             |  11 +++
 src/pages/Home.tsx                            |   0
 src/pages/Products.js                         |  11 +++
 src/pages/Reports.js                          |  11 +++
 thirdParty/react-sidebar-v1-master.zip        | Bin 0 -> 4920 bytes
 .../react-sidebar-v1-master/package.json      |  36 +++++++++
 .../react-sidebar-v1-master/src/App.css       |  18 +++++
 thirdParty/react-sidebar-v1-master/src/App.js |  24 ++++++
 .../src/components/Navbar.css                 |  72 ++++++++++++++++++
 .../src/components/Navbar.js                  |  46 +++++++++++
 .../src/components/SidebarData.js             |  43 +++++++++++
 .../react-sidebar-v1-master/src/index.js      |  10 +++
 .../react-sidebar-v1-master/src/pages/Home.js |  11 +++
 .../src/pages/Products.js                     |  11 +++
 .../src/pages/Reports.js                      |  11 +++
 18 files changed, 477 insertions(+)
 create mode 100644 src/components/Navbar.css
 create mode 100644 src/components/Navbar.ts
 create mode 100644 src/components/SidebarData.ts
 create mode 100644 src/pages/Home.js
 create mode 100644 src/pages/Home.tsx
 create mode 100644 src/pages/Products.js
 create mode 100644 src/pages/Reports.js
 create mode 100644 thirdParty/react-sidebar-v1-master.zip
 create mode 100644 thirdParty/react-sidebar-v1-master/package.json
 create mode 100644 thirdParty/react-sidebar-v1-master/src/App.css
 create mode 100644 thirdParty/react-sidebar-v1-master/src/App.js
 create mode 100644 thirdParty/react-sidebar-v1-master/src/components/Navbar.css
 create mode 100644 thirdParty/react-sidebar-v1-master/src/components/Navbar.js
 create mode 100644 thirdParty/react-sidebar-v1-master/src/components/SidebarData.js
 create mode 100644 thirdParty/react-sidebar-v1-master/src/index.js
 create mode 100644 thirdParty/react-sidebar-v1-master/src/pages/Home.js
 create mode 100644 thirdParty/react-sidebar-v1-master/src/pages/Products.js
 create mode 100644 thirdParty/react-sidebar-v1-master/src/pages/Reports.js

diff --git a/src/components/Navbar.css b/src/components/Navbar.css
new file mode 100644
index 0000000..2876737
--- /dev/null
+++ b/src/components/Navbar.css
@@ -0,0 +1,72 @@
+.navbar {
+  background-color: #060b26;
+  height: 80px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
+.menu-bars {
+  margin-left: 2rem;
+  font-size: 2rem;
+  background: none;
+}
+
+.nav-menu {
+  background-color: #060b26;
+  width: 250px;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: -100%;
+  transition: 850ms;
+}
+
+.nav-menu.active {
+  left: 0;
+  transition: 350ms;
+}
+
+.nav-text {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding: 8px 0px 8px 16px;
+  list-style: none;
+  height: 60px;
+}
+
+.nav-text a {
+  text-decoration: none;
+  color: #f5f5f5;
+  font-size: 18px;
+  width: 95%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  border-radius: 4px;
+}
+
+.nav-text a:hover {
+  background-color: #1a83ff;
+}
+
+.nav-menu-items {
+  width: 100%;
+}
+
+.navbar-toggle {
+  background-color: #060b26;
+  width: 100%;
+  height: 80px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
+span {
+  margin-left: 16px;
+}
diff --git a/src/components/Navbar.ts b/src/components/Navbar.ts
new file mode 100644
index 0000000..b8a3e08
--- /dev/null
+++ b/src/components/Navbar.ts
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import * as FaIcons from 'react-icons/fa';
+import * as AiIcons from 'react-icons/ai';
+import { Link } from 'react-router-dom';
+import { SidebarData } from './SidebarData';
+import './Navbar.css';
+import { IconContext } from 'react-icons';
+
+function Navbar() 
+{
+  const [sidebar, setSidebar] = useState(false);
+
+  const showSidebar = () => setSidebar(!sidebar);
+
+  return (
+    <>
+      <IconContext.Provider value={{ color: '#fff' }}>
+        <div className='navbar'>
+          <Link to='#' className='menu-bars'>
+            <FaIcons.FaBars onClick={showSidebar} />
+          </Link>
+        </div>
+        <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
+          <ul className='nav-menu-items' onClick={showSidebar}>
+            <li className='navbar-toggle'>
+              <Link to='#' className='menu-bars'>
+                <AiIcons.AiOutlineClose />
+              </Link>
+            </li>
+            {SidebarData.map((item, index) => {
+              return (
+                <li key={index} className={item.cName}>
+                  <Link to={item.path}>
+                    {item.icon}
+                    <span>{item.title}</span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </IconContext.Provider>
+    </>
+  );
+}
+
+export default Navbar;
diff --git a/src/components/SidebarData.ts b/src/components/SidebarData.ts
new file mode 100644
index 0000000..3a29732
--- /dev/null
+++ b/src/components/SidebarData.ts
@@ -0,0 +1,43 @@
+import React from 'react';
+import * as FaIcons from 'react-icons/fa';
+import * as AiIcons from 'react-icons/ai';
+import * as IoIcons from 'react-icons/io';
+
+export const SidebarData = [
+  {
+    title: 'Home',
+    path: '/',
+    icon: <AiIcons.AiFillHome />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Reports',
+    path: '/reports',
+    icon: <IoIcons.IoIosPaper />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Products',
+    path: '/products',
+    icon: <FaIcons.FaCartPlus />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Team',
+    path: '/team',
+    icon: <IoIcons.IoMdPeople />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Messages',
+    path: '/messages',
+    icon: <FaIcons.FaEnvelopeOpenText />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Support',
+    path: '/support',
+    icon: <IoIcons.IoMdHelpCircle />,
+    cName: 'nav-text'
+  }
+];
diff --git a/src/pages/Home.js b/src/pages/Home.js
new file mode 100644
index 0000000..24222d3
--- /dev/null
+++ b/src/pages/Home.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Home() {
+  return (
+    <div className='home'>
+      <h1>Home</h1>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Products.js b/src/pages/Products.js
new file mode 100644
index 0000000..4a4467b
--- /dev/null
+++ b/src/pages/Products.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Products() {
+  return (
+    <div className='products'>
+      <h1>Products</h1>
+    </div>
+  );
+}
+
+export default Products;
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
new file mode 100644
index 0000000..8c61abc
--- /dev/null
+++ b/src/pages/Reports.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Reports() {
+  return (
+    <div className='reports'>
+      <h1>Reports</h1>
+    </div>
+  );
+}
+
+export default Reports;
diff --git a/thirdParty/react-sidebar-v1-master.zip b/thirdParty/react-sidebar-v1-master.zip
new file mode 100644
index 0000000000000000000000000000000000000000..2b6d533d5e6268dd8ed8845c056a908a1a87ff6b
GIT binary patch
literal 4920
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
a;rH080RMy8E32w1<KS>SeD7ZP-v0sChz=G2

literal 0
HcmV?d00001

diff --git a/thirdParty/react-sidebar-v1-master/package.json b/thirdParty/react-sidebar-v1-master/package.json
new file mode 100644
index 0000000..9656b23
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "react-sidebar-v1",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-icons": "^3.10.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/thirdParty/react-sidebar-v1-master/src/App.css b/thirdParty/react-sidebar-v1-master/src/App.css
new file mode 100644
index 0000000..5b15406
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/src/App.css
@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Lato', sans-serif;
+}
+
+.home,
+.reports,
+.products {
+  display: flex;
+  height: 90vh;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+}
diff --git a/thirdParty/react-sidebar-v1-master/src/App.js b/thirdParty/react-sidebar-v1-master/src/App.js
new file mode 100644
index 0000000..d7bf52b
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/src/App.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import './App.css';
+import Navbar from './components/Navbar';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import Reports from './pages/Reports';
+import Products from './pages/Products';
+
+function App() {
+  return (
+    <>
+      <Router>
+        <Navbar />
+        <Switch>
+          <Route path='/' exact component={Home} />
+          <Route path='/reports' component={Reports} />
+          <Route path='/products' component={Products} />
+        </Switch>
+      </Router>
+    </>
+  );
+}
+
+export default App;
diff --git a/thirdParty/react-sidebar-v1-master/src/components/Navbar.css b/thirdParty/react-sidebar-v1-master/src/components/Navbar.css
new file mode 100644
index 0000000..2876737
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/src/components/Navbar.css
@@ -0,0 +1,72 @@
+.navbar {
+  background-color: #060b26;
+  height: 80px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
+.menu-bars {
+  margin-left: 2rem;
+  font-size: 2rem;
+  background: none;
+}
+
+.nav-menu {
+  background-color: #060b26;
+  width: 250px;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: -100%;
+  transition: 850ms;
+}
+
+.nav-menu.active {
+  left: 0;
+  transition: 350ms;
+}
+
+.nav-text {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding: 8px 0px 8px 16px;
+  list-style: none;
+  height: 60px;
+}
+
+.nav-text a {
+  text-decoration: none;
+  color: #f5f5f5;
+  font-size: 18px;
+  width: 95%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  border-radius: 4px;
+}
+
+.nav-text a:hover {
+  background-color: #1a83ff;
+}
+
+.nav-menu-items {
+  width: 100%;
+}
+
+.navbar-toggle {
+  background-color: #060b26;
+  width: 100%;
+  height: 80px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
+span {
+  margin-left: 16px;
+}
diff --git a/thirdParty/react-sidebar-v1-master/src/components/Navbar.js b/thirdParty/react-sidebar-v1-master/src/components/Navbar.js
new file mode 100644
index 0000000..525ccc7
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/src/components/Navbar.js
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import * as FaIcons from 'react-icons/fa';
+import * as AiIcons from 'react-icons/ai';
+import { Link } from 'react-router-dom';
+import { SidebarData } from './SidebarData';
+import './Navbar.css';
+import { IconContext } from 'react-icons';
+
+function Navbar() {
+  const [sidebar, setSidebar] = useState(false);
+
+  const showSidebar = () => setSidebar(!sidebar);
+
+  return (
+    <>
+      <IconContext.Provider value={{ color: '#fff' }}>
+        <div className='navbar'>
+          <Link to='#' className='menu-bars'>
+            <FaIcons.FaBars onClick={showSidebar} />
+          </Link>
+        </div>
+        <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
+          <ul className='nav-menu-items' onClick={showSidebar}>
+            <li className='navbar-toggle'>
+              <Link to='#' className='menu-bars'>
+                <AiIcons.AiOutlineClose />
+              </Link>
+            </li>
+            {SidebarData.map((item, index) => {
+              return (
+                <li key={index} className={item.cName}>
+                  <Link to={item.path}>
+                    {item.icon}
+                    <span>{item.title}</span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </IconContext.Provider>
+    </>
+  );
+}
+
+export default Navbar;
diff --git a/thirdParty/react-sidebar-v1-master/src/components/SidebarData.js b/thirdParty/react-sidebar-v1-master/src/components/SidebarData.js
new file mode 100644
index 0000000..3a29732
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/src/components/SidebarData.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import * as FaIcons from 'react-icons/fa';
+import * as AiIcons from 'react-icons/ai';
+import * as IoIcons from 'react-icons/io';
+
+export const SidebarData = [
+  {
+    title: 'Home',
+    path: '/',
+    icon: <AiIcons.AiFillHome />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Reports',
+    path: '/reports',
+    icon: <IoIcons.IoIosPaper />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Products',
+    path: '/products',
+    icon: <FaIcons.FaCartPlus />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Team',
+    path: '/team',
+    icon: <IoIcons.IoMdPeople />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Messages',
+    path: '/messages',
+    icon: <FaIcons.FaEnvelopeOpenText />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Support',
+    path: '/support',
+    icon: <IoIcons.IoMdHelpCircle />,
+    cName: 'nav-text'
+  }
+];
diff --git a/thirdParty/react-sidebar-v1-master/src/index.js b/thirdParty/react-sidebar-v1-master/src/index.js
new file mode 100644
index 0000000..c1f31c5
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/thirdParty/react-sidebar-v1-master/src/pages/Home.js b/thirdParty/react-sidebar-v1-master/src/pages/Home.js
new file mode 100644
index 0000000..24222d3
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/src/pages/Home.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Home() {
+  return (
+    <div className='home'>
+      <h1>Home</h1>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/thirdParty/react-sidebar-v1-master/src/pages/Products.js b/thirdParty/react-sidebar-v1-master/src/pages/Products.js
new file mode 100644
index 0000000..4a4467b
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/src/pages/Products.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Products() {
+  return (
+    <div className='products'>
+      <h1>Products</h1>
+    </div>
+  );
+}
+
+export default Products;
diff --git a/thirdParty/react-sidebar-v1-master/src/pages/Reports.js b/thirdParty/react-sidebar-v1-master/src/pages/Reports.js
new file mode 100644
index 0000000..8c61abc
--- /dev/null
+++ b/thirdParty/react-sidebar-v1-master/src/pages/Reports.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Reports() {
+  return (
+    <div className='reports'>
+      <h1>Reports</h1>
+    </div>
+  );
+}
+
+export default Reports;