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 0000000..2b6d533
Binary files /dev/null and b/thirdParty/react-sidebar-v1-master.zip differ
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;