Merged PR 29: cleanup

2021-07-05 16:54:42 +00:00 · 2021-07-05 16:54:42 +00:00 · 5be2561abb
parent 98539899c1 faba61a3bc
commit 5be2561abb
60 changed files with 429 additions and 16864 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,2 @@
+REACT_APP_IDENTITY_AUTHENTICATION_URL=https://toodle.ddns.net/identity-server-api/identity/authenticate?UserName={username}&Password={password}
+REACT_APP_ENABLE_TEMPLATE_CONTENT=True
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,3 @@
+PUBLIC_URL=/cdn-admin/
+REACT_APP_IDENTITY_AUTHENTICATION_URL=https://toodle.ddns.net/identity-server-api/identity/authenticate?UserName={username}&Password={password}
+REACT_APP_ENABLE_TEMPLATE_CONTENT=False
--- a/.eslintcache
+++ b/.eslintcache
--- a/.gitignore
+++ b/.gitignore
@ -22,3 +22,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.eslintcache
--- a/.prettierrc
+++ b/.prettierrc
@ -2,5 +2,5 @@
  "tabWidth": 2,
  "singleQuote": false,
  "semi": true,
-  "trailingComma": "all"
+  "trailingComma": "none"
 }
--- a/LICENSE.txt
+++ b/LICENSE.txt
@ -1,21 +0,0 @@
-The MIT License
-
-Copyright (c) 2019 Flatlogic LLC.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
--- a/README.md
+++ b/README.md
@ -1,24 +1,18 @@
-# React Material Admin — Material-UI Dashboard Template
+# CDN Admin — CDN Administration application

 Built with [React](https://facebook.github.io/react/), [Material-UI](https://material-ui.com), [React Router](https://reacttraining.com/react-router/).
-**No jQuery and Bootstrap!**

 **This version uses React 16.14.0, React Router v5, MaterialUI v4, built with React Hooks and React Context (No Redux)**

-[View Demo](https://flatlogic.com/templates/react-material-admin/demo) | [Download](https://github.com/flatlogic/react-material-admin/archive/master.zip) | [More templates](https://flatlogic.com/templates) | [Support forum](https://flatlogic.com/forum)
+[View Demo](https://toodle.ddns.net/cdn-admin-demo) | [Download](https://dev.azure.com/tstanciu94/CDN) | [More projects](https://toodle.ddns.net/heimdall) | [Support forum](https://toodle.ddns.net/forum)

 [![image](https://user-images.githubusercontent.com/24964748/55800639-df780300-5adc-11e9-84b7-7c2437088516.png)](https://flatlogic.com/admin-dashboards/react-material-admin/demo)

-## Full Version
-
-This is a limited version of [**Full React Material Admin**](https://flatlogic.com/templates/react-material-admin-full/demo) with more components, pages and theme support.
-
 ## Features

 - React (**16.14.0**)
 - React Hooks
 - React Context
- **No jQuery and Bootstrap!**
 - Mobile friendly layout (responsive)
 - Create-react-app under the hood
 - React Router v5
--- a/changelog.md
+++ b/changelog.md
@ -1,67 +0,0 @@
-# Changelog
-
-# [1.3.2]
-
-### Updated
- Packages updated
- Edited README.md
-
-# [1.3.1]
-
-### Updated
- Added link to flatlogic on login and register pages
-
-# [1.3.0]
-
-### Updated
- Update packages
-
-### Fixed
- Header button on md adjusting
- Dashboard page make more responsive
- Notification page fix
- Tables page fix TableBody paddings
-
-# [1.2.3]
-
-### Updated
- Fixed security vulnerabilities in dependencies
-
-# [1.2.2]
-
-### Updated
- Packages updated
-
-# [1.2.1]
-
-### Updated
- Packages updated
-
-### Fixed
- Sign up name type of input
- Dot component size prop
- Performance errors
-
-# [1.2.0]
-
-### Updated
- Packages update
- Link to Full version
-
-### Fixed
- User login state improvements
-
-## [1.1.0]
-
-### New Feactures
-
- React v16.8.6
- React Router v5
- new React Hooks
- Material UI v4.3
-
-Bug fixes
-
-## [1.0.0]
-
-Initial version of the project
--- a/docs/asset-manifest.json
+++ b/docs/asset-manifest.json
@ -1,25 +0,0 @@
-{
-  "files": {
-    "main.js": "./static/js/main.fc3e922e.chunk.js",
-    "main.js.map": "./static/js/main.fc3e922e.chunk.js.map",
-    "runtime-main.js": "./static/js/runtime-main.4862f1b0.js",
-    "runtime-main.js.map": "./static/js/runtime-main.4862f1b0.js.map",
-    "static/css/2.637eb612.chunk.css": "./static/css/2.637eb612.chunk.css",
-    "static/js/2.af6eef2b.chunk.js": "./static/js/2.af6eef2b.chunk.js",
-    "static/js/2.af6eef2b.chunk.js.map": "./static/js/2.af6eef2b.chunk.js.map",
-    "index.html": "./index.html",
-    "precache-manifest.9910cad913c1899724ce0a968a9630a0.js": "./precache-manifest.9910cad913c1899724ce0a968a9630a0.js",
-    "service-worker.js": "./service-worker.js",
-    "static/css/2.637eb612.chunk.css.map": "./static/css/2.637eb612.chunk.css.map",
-    "static/js/2.af6eef2b.chunk.js.LICENSE.txt": "./static/js/2.af6eef2b.chunk.js.LICENSE.txt",
-    "static/media/font-awesome.min.css": "./static/media/fontawesome-webfont.fee66e71.woff",
-    "static/media/google.svg": "./static/media/google.09aea0f5.svg",
-    "static/media/logo.svg": "./static/media/logo.3d432ca2.svg"
-  },
-  "entrypoints": [
-    "static/js/runtime-main.4862f1b0.js",
-    "static/css/2.637eb612.chunk.css",
-    "static/js/2.af6eef2b.chunk.js",
-    "static/js/main.fc3e922e.chunk.js"
-  ]
-}
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/index.html
+++ b/docs/index.html
@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="./manifest.json"/><title>React Material Admin</title><meta name="description" content="React Material Admin is a React Template built with Material-UI"><meta name="keywords" content="react material, material ui admin, react template, react material admin, react material dashboard"><meta name="author" content="Flatlogic LLC."><link href="./static/css/2.637eb612.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],l=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./";var i=this["webpackJsonpreact-material-admin"]=this["webpackJsonpreact-material-admin"]||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var c=l;t()}([])</script><script src="./static/js/2.af6eef2b.chunk.js"></script><script src="./static/js/main.fc3e922e.chunk.js"></script></body></html>
--- a/docs/manifest.json
+++ b/docs/manifest.json
@ -1,15 +0,0 @@
-{
-  "short_name": "React Material Admin",
-  "name": "React Material Admin is a React Template built with Material-UI",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#536DFE",
-  "background_color": "#ffffff"
-}
--- a/docs/precache-manifest.9910cad913c1899724ce0a968a9630a0.js
+++ b/docs/precache-manifest.9910cad913c1899724ce0a968a9630a0.js
@ -1,54 +0,0 @@
-self.__precacheManifest = (self.__precacheManifest || []).concat([
-  {
-    "revision": "e5348224acfeb02d7e11ea3c1731985e",
-    "url": "./index.html"
-  },
-  {
-    "revision": "b12e029207b94b413809",
-    "url": "./static/css/2.637eb612.chunk.css"
-  },
-  {
-    "revision": "b12e029207b94b413809",
-    "url": "./static/js/2.af6eef2b.chunk.js"
-  },
-  {
-    "revision": "7d02737b1000ff1e4aedf1ef380f6e7b",
-    "url": "./static/js/2.af6eef2b.chunk.js.LICENSE.txt"
-  },
-  {
-    "revision": "41a71acbec3f321f5a82",
-    "url": "./static/js/main.fc3e922e.chunk.js"
-  },
-  {
-    "revision": "f6f2b74c08f9ec6d372d",
-    "url": "./static/js/runtime-main.4862f1b0.js"
-  },
-  {
-    "revision": "674f50d287a8c48dc19ba404d20fe713",
-    "url": "./static/media/fontawesome-webfont.674f50d2.eot"
-  },
-  {
-    "revision": "912ec66d7572ff821749319396470bde",
-    "url": "./static/media/fontawesome-webfont.912ec66d.svg"
-  },
-  {
-    "revision": "af7ae505a9eed503f8b8e6982036873e",
-    "url": "./static/media/fontawesome-webfont.af7ae505.woff2"
-  },
-  {
-    "revision": "b06871f281fee6b241d60582ae9369b9",
-    "url": "./static/media/fontawesome-webfont.b06871f2.ttf"
-  },
-  {
-    "revision": "fee66e712a8a08eef5805a46892932ad",
-    "url": "./static/media/fontawesome-webfont.fee66e71.woff"
-  },
-  {
-    "revision": "09aea0f59807f6f4f66af7f5719cba9e",
-    "url": "./static/media/google.09aea0f5.svg"
-  },
-  {
-    "revision": "3d432ca2badb7e0130b379f9162b99b1",
-    "url": "./static/media/logo.3d432ca2.svg"
-  }
-]);
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@ -1,39 +0,0 @@
-/**
- * Welcome to your Workbox-powered service worker!
- *
- * You'll need to register this file in your web app and you should
- * disable HTTP caching for this file too.
- * See https://goo.gl/nhQhGp
- *
- * The rest of the code is auto-generated. Please don't update this file
- * directly; instead, make changes to your Workbox build configuration
- * and re-run your build process.
- * See https://goo.gl/2aRDsh
- */
-
-importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
-
-importScripts(
-  "./precache-manifest.9910cad913c1899724ce0a968a9630a0.js"
-);
-
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-workbox.core.clientsClaim();
-
-/**
- * The workboxSW.precacheAndRoute() method efficiently caches and responds to
- * requests for URLs in the manifest.
- * See https://goo.gl/S9QRab
- */
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
-
-workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("./index.html"), {
-  
-  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
-});
--- a/docs/static/css/2.637eb612.chunk.css
+++ b/docs/static/css/2.637eb612.chunk.css
--- a/docs/static/css/2.637eb612.chunk.css.map
+++ b/docs/static/css/2.637eb612.chunk.css.map
--- a/docs/static/js/2.af6eef2b.chunk.js
+++ b/docs/static/js/2.af6eef2b.chunk.js
--- a/docs/static/js/2.af6eef2b.chunk.js.LICENSE.txt
+++ b/docs/static/js/2.af6eef2b.chunk.js.LICENSE.txt
@ -1,102 +0,0 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*!
-  * $script.js JS loader & dependency manager
-  * https://github.com/ded/script.js
-  * (c) Dustin Diaz 2014 | License MIT
-  */
-
-/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-
-/*!
- * ApexCharts v3.20.0
- * (c) 2018-2020 Juned Chhipa
- * Released under the MIT License.
- */
-
-/*! decimal.js-light v2.5.0 https://github.com/MikeMcl/decimal.js-light/LICENCE */
-
-/*! svg.draggable.js - v2.2.2 - 2019-01-08
-* https://github.com/svgdotjs/svg.draggable.js
-* Copyright (c) 2019 Wout Fierens; Licensed MIT */
-
-/*! svg.filter.js - v2.0.2 - 2016-02-24
-* https://github.com/wout/svg.filter.js
-* Copyright (c) 2016 Wout Fierens; Licensed MIT */
-
-/**
- * A better abstraction over CSS.
- *
- * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
- * @website https://github.com/cssinjs/jss
- * @license MIT
- */
-
-/** @license React v0.19.1
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**!
- * @fileOverview Kickass library to create and place poppers near their reference elements.
- * @version 1.16.1-lts
- * @license
- * Copyright (c) 2016 Federico Zivolo and contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
--- a/docs/static/js/2.af6eef2b.chunk.js.map
+++ b/docs/static/js/2.af6eef2b.chunk.js.map
--- a/docs/static/js/main.fc3e922e.chunk.js
+++ b/docs/static/js/main.fc3e922e.chunk.js
--- a/docs/static/js/main.fc3e922e.chunk.js.map
+++ b/docs/static/js/main.fc3e922e.chunk.js.map
--- a/docs/static/js/runtime-main.4862f1b0.js
+++ b/docs/static/js/runtime-main.4862f1b0.js
@ -1,2 +0,0 @@
-!function(e){function r(r){for(var n,a,i=r[0],l=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./";var i=this["webpackJsonpreact-material-admin"]=this["webpackJsonpreact-material-admin"]||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var c=l;t()}([]);
-//# sourceMappingURL=runtime-main.4862f1b0.js.map
--- a/docs/static/js/runtime-main.4862f1b0.js.map
+++ b/docs/static/js/runtime-main.4862f1b0.js.map
--- a/docs/static/media/fontawesome-webfont.674f50d2.eot
+++ b/docs/static/media/fontawesome-webfont.674f50d2.eot
--- a/docs/static/media/fontawesome-webfont.912ec66d.svg
+++ b/docs/static/media/fontawesome-webfont.912ec66d.svg
--- a/docs/static/media/fontawesome-webfont.af7ae505.woff2
+++ b/docs/static/media/fontawesome-webfont.af7ae505.woff2
--- a/docs/static/media/fontawesome-webfont.b06871f2.ttf
+++ b/docs/static/media/fontawesome-webfont.b06871f2.ttf
--- a/docs/static/media/fontawesome-webfont.fee66e71.woff
+++ b/docs/static/media/fontawesome-webfont.fee66e71.woff
--- a/docs/static/media/google.09aea0f5.svg
+++ b/docs/static/media/google.09aea0f5.svg
@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<path style="fill:#FBBB00;" d="M113.47,309.408L95.648,375.94l-65.139,1.378C11.042,341.211,0,299.9,0,256
-	c0-42.451,10.324-82.483,28.624-117.732h0.014l57.992,10.632l25.404,57.644c-5.317,15.501-8.215,32.141-8.215,49.456
-	C103.821,274.792,107.225,292.797,113.47,309.408z"/>
-<path style="fill:#518EF8;" d="M507.527,208.176C510.467,223.662,512,239.655,512,256c0,18.328-1.927,36.206-5.598,53.451
-	c-12.462,58.683-45.025,109.925-90.134,146.187l-0.014-0.014l-73.044-3.727l-10.338-64.535
-	c29.932-17.554,53.324-45.025,65.646-77.911h-136.89V208.176h138.887L507.527,208.176L507.527,208.176z"/>
-<path style="fill:#28B446;" d="M416.253,455.624l0.014,0.014C372.396,490.901,316.666,512,256,512
-	c-97.491,0-182.252-54.491-225.491-134.681l82.961-67.91c21.619,57.698,77.278,98.771,142.53,98.771
-	c28.047,0,54.323-7.582,76.87-20.818L416.253,455.624z"/>
-<path style="fill:#F14336;" d="M419.404,58.936l-82.933,67.896c-23.335-14.586-50.919-23.012-80.471-23.012
-	c-66.729,0-123.429,42.957-143.965,102.724l-83.397-68.276h-0.014C71.23,56.123,157.06,0,256,0
-	C318.115,0,375.068,22.126,419.404,58.936z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
--- a/docs/static/media/logo.3d432ca2.svg
+++ b/docs/static/media/logo.3d432ca2.svg
@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="131px" height="106px" viewBox="0 0 131 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
-    <title>logo_white</title>
-    <desc>Created with Sketch.</desc>
-    <g id="logo_white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Group-39" transform="translate(12.000000, 16.000000)" stroke-width="16.3476923">
-            <path d="M4,72.4669231 L52.2318841,0" id="Line-10" stroke="#FFFFFF"></path>
-            <path d="M1.10416667,74.69 L105.551432,74.69" id="Line-10" stroke="#FBC02D"></path>
-            <path d="M52.2318841,0 L105.551432,74.69" id="Line-10" stroke="#FF5252"></path>
-        </g>
-    </g>
-</svg>
--- a/package-lock.json
+++ b/package-lock.json
@ -10469,9 +10469,9 @@
      }
    },
    "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "lodash._reinterpolate": {
      "version": "3.0.0",
@ -15869,9 +15869,9 @@
      }
    },
    "ua-parser-js": {
-      "version": "0.7.23",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.23.tgz",
-      "integrity": "sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA=="
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
    },
    "unbox-primitive": {
      "version": "1.0.1",
--- a/public/index.html
+++ b/public/index.html
@ -22,12 +22,12 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React Material Admin</title>
-    <meta name="description" content="React Material Admin is a React Template built with Material-UI">
-    <meta name="keywords" content="react material, material ui admin, react template, react material admin, react material dashboard">
-    <meta name="author" content="Flatlogic LLC.">
+    <title>CDN Admin</title>
+    <meta name="description" content="CDN administration application" />
+    <meta name="keywords" content="CDN, cdn admin" />
+    <meta name="author" content="Tudor Stanciu" />
  </head>
-  <body style="font-family: 'Roboto', sans-serif;">
+  <body style="font-family: 'Roboto', sans-serif">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,6 +1,6 @@
 {
-  "short_name": "React Material Admin",
-  "name": "React Material Admin is a React Template built with Material-UI",
+  "short_name": "CDN Admin",
+  "name": "CDN administration application",
  "icons": [
    {
      "src": "favicon.ico",
--- a/src/components/App.js
+++ b/src/components/App.js
@ -2,7 +2,7 @@ import React from "react";
 import { HashRouter, Route, Switch, Redirect } from "react-router-dom";

 // components
-import Layout from "./Layout";
+import Layout from "./Layout/Layout";

 // pages
 import Error from "../pages/error";
@ -16,7 +16,7 @@ export default function App() {
  var { isAuthenticated } = useUserState();

  return (
-    <HashRouter>
+    <HashRouter basename={process.env.PUBLIC_URL || ""}>
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
        <Route
@ -31,13 +31,11 @@ export default function App() {
    </HashRouter>
  );

-  // #######################################################################
-
  function PrivateRoute({ component, ...rest }) {
    return (
      <Route
        {...rest}
-        render={props =>
+        render={(props) =>
          isAuthenticated ? (
            React.createElement(component, props)
          ) : (
@ -45,8 +43,8 @@ export default function App() {
              to={{
                pathname: "/login",
                state: {
-                  from: props.location,
-                },
+                  from: props.location
+                }
              }}
            />
          )
@ -59,11 +57,11 @@ export default function App() {
    return (
      <Route
        {...rest}
-        render={props =>
+        render={(props) =>
          isAuthenticated ? (
            <Redirect
              to={{
-                pathname: "/",
+                pathname: "/"
              }}
            />
          ) : (
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@ -6,8 +6,7 @@ import {
  InputBase,
  Menu,
  MenuItem,
-  Fab,
-  Link
+  Fab
 } from "@material-ui/core";
 import {
  Menu as MenuIcon,
@ -16,7 +15,7 @@ import {
  Person as AccountIcon,
  Search as SearchIcon,
  Send as SendIcon,
-  ArrowBack as ArrowBackIcon,
+  MenuOpen as MenuOpenIcon
 } from "@material-ui/icons";
 import classNames from "classnames";

@ -24,7 +23,7 @@ import classNames from "classnames";
 import useStyles from "./styles";

 // components
-import { Badge, Typography, Button } from "../Wrappers";
+import { Badge, Typography } from "../Wrappers";
 import Notification from "../Notification/Notification";
 import UserAvatar from "../UserAvatar/UserAvatar";

@ -32,7 +31,7 @@ import UserAvatar from "../UserAvatar/UserAvatar";
 import {
  useLayoutState,
  useLayoutDispatch,
-  toggleSidebar,
+  toggleSidebar
 } from "../../context/LayoutContext";
 import { useUserDispatch, signOut } from "../../context/UserContext";

@ -42,29 +41,29 @@ const messages = [
    variant: "warning",
    name: "Jane Hew",
    message: "Hey! How is it going?",
-    time: "9:32",
+    time: "9:32"
  },
  {
    id: 1,
    variant: "success",
    name: "Lloyd Brown",
    message: "Check out my new Dashboard",
-    time: "9:18",
+    time: "9:18"
  },
  {
    id: 2,
    variant: "primary",
    name: "Mark Winstein",
    message: "I want rearrange the appointment",
-    time: "9:15",
+    time: "9:15"
  },
  {
    id: 3,
    variant: "secondary",
    name: "Liana Dutti",
    message: "Good news from sale department",
-    time: "9:09",
-  },
+    time: "9:09"
+  }
 ];

 const notifications = [
@ -73,20 +72,20 @@ const notifications = [
    id: 1,
    color: "success",
    type: "info",
-    message: "What is the best way to get ...",
+    message: "What is the best way to get ..."
  },
  {
    id: 2,
    color: "secondary",
    type: "notification",
-    message: "This is just a simple notification",
+    message: "This is just a simple notification"
  },
  {
    id: 3,
    color: "primary",
    type: "e-commerce",
-    message: "12 new orders has arrived today",
-  },
+    message: "12 new orders has arrived today"
+  }
 ];

 export default function Header(props) {
@ -113,42 +112,35 @@ export default function Header(props) {
          onClick={() => toggleSidebar(layoutDispatch)}
          className={classNames(
            classes.headerMenuButtonSandwich,
-            classes.headerMenuButtonCollapse,
+            classes.headerMenuButtonCollapse
          )}
        >
          {layoutState.isSidebarOpened ? (
-            <ArrowBackIcon
+            <MenuOpenIcon
              classes={{
-                root: classNames(
-                  classes.headerIcon,
-                  classes.headerIconCollapse,
-                ),
+                root: classNames(classes.headerIcon, classes.headerIconCollapse)
              }}
            />
          ) : (
            <MenuIcon
              classes={{
-                root: classNames(
-                  classes.headerIcon,
-                  classes.headerIconCollapse,
-                ),
+                root: classNames(classes.headerIcon, classes.headerIconCollapse)
              }}
            />
          )}
        </IconButton>
        <Typography variant="h6" weight="medium" className={classes.logotype}>
-          React Material Admin
+          CDN Admin
        </Typography>
        <div className={classes.grow} />
-        <Button component={Link} href="https://flatlogic.com/templates/react-material-admin-full" variant={"outlined"} color={"secondary"} className={classes.purchaseBtn}>Unlock full version</Button>
        <div
          className={classNames(classes.search, {
-            [classes.searchFocused]: isSearchOpen,
+            [classes.searchFocused]: isSearchOpen
          })}
        >
          <div
            className={classNames(classes.searchIcon, {
-              [classes.searchIconOpened]: isSearchOpen,
+              [classes.searchIconOpened]: isSearchOpen
            })}
            onClick={() => setSearchOpen(!isSearchOpen)}
          >
@ -158,7 +150,7 @@ export default function Header(props) {
            placeholder="Search…"
            classes={{
              root: classes.inputRoot,
-              input: classes.inputInput,
+              input: classes.inputInput
            }}
          />
        </div>
@ -166,7 +158,7 @@ export default function Header(props) {
          color="inherit"
          aria-haspopup="true"
          aria-controls="mail-menu"
-          onClick={e => {
+          onClick={(e) => {
            setNotificationsMenu(e.currentTarget);
            setIsNotificationsUnread(false);
          }}
@ -183,7 +175,7 @@ export default function Header(props) {
          color="inherit"
          aria-haspopup="true"
          aria-controls="mail-menu"
-          onClick={e => {
+          onClick={(e) => {
            setMailMenu(e.currentTarget);
            setIsMailsUnread(false);
          }}
@ -201,7 +193,7 @@ export default function Header(props) {
          color="inherit"
          className={classes.headerMenuButton}
          aria-controls="profile-menu"
-          onClick={e => setProfileMenu(e.currentTarget)}
+          onClick={(e) => setProfileMenu(e.currentTarget)}
        >
          <AccountIcon classes={{ root: classes.headerIcon }} />
        </IconButton>
@ -227,7 +219,7 @@ export default function Header(props) {
              {messages.length} New Messages
            </Typography>
          </div>
-          {messages.map(message => (
+          {messages.map((message) => (
            <MenuItem key={message.id} className={classes.messageNotification}>
              <div className={classes.messageNotificationSide}>
                <UserAvatar color={message.variant} name={message.name} />
@ -238,7 +230,7 @@ export default function Header(props) {
              <div
                className={classNames(
                  classes.messageNotificationSide,
-                  classes.messageNotificationBodySide,
+                  classes.messageNotificationBodySide
                )}
              >
                <Typography weight="medium" gutterBottom>
@ -268,7 +260,7 @@ export default function Header(props) {
          className={classes.headerMenu}
          disableAutoFocusItem
        >
-          {notifications.map(notification => (
+          {notifications.map((notification) => (
            <MenuItem
              key={notification.id}
              onClick={() => setNotificationsMenu(null)}
@ -303,7 +295,7 @@ export default function Header(props) {
          <MenuItem
            className={classNames(
              classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
            )}
          >
            <AccountIcon className={classes.profileMenuIcon} /> Profile
@ -311,7 +303,7 @@ export default function Header(props) {
          <MenuItem
            className={classNames(
              classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
            )}
          >
            <AccountIcon className={classes.profileMenuIcon} /> Tasks
@ -319,7 +311,7 @@ export default function Header(props) {
          <MenuItem
            className={classNames(
              classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
            )}
          >
            <AccountIcon className={classes.profileMenuIcon} /> Messages
--- a/src/components/Header/HeaderView.js
+++ b/src/components/Header/HeaderView.js
@ -1,456 +0,0 @@
-import React from "react";
-import {
-  AppBar,
-  Toolbar,
-  IconButton,
-  InputBase,
-  Menu,
-  MenuItem,
-  Fab,
-  withStyles
-} from "@material-ui/core";
-import {
-  Menu as MenuIcon,
-  MailOutline as MailIcon,
-  NotificationsNone as NotificationsIcon,
-  Person as AccountIcon,
-  Search as SearchIcon,
-  Send as SendIcon,
-  ArrowBack as ArrowBackIcon
-} from "@material-ui/icons";
-import { fade } from "@material-ui/core/styles/colorManipulator";
-import classNames from "classnames";
-
-import { Badge, Typography } from "../Wrappers";
-import Notification from "../Notification";
-import UserAvatar from "../UserAvatar";
-
-const messages = [
-  {
-    id: 0,
-    variant: "warning",
-    name: "Jane Hew",
-    message: "Hey! How is it going?",
-    time: "9:32"
-  },
-  {
-    id: 1,
-    variant: "success",
-    name: "Lloyd Brown",
-    message: "Check out my new Dashboard",
-    time: "9:18"
-  },
-  {
-    id: 2,
-    variant: "primary",
-    name: "Mark Winstein",
-    message: "I want rearrange the appointment",
-    time: "9:15"
-  },
-  {
-    id: 3,
-    variant: "secondary",
-    name: "Liana Dutti",
-    message: "Good news from sale department",
-    time: "9:09"
-  }
-];
-
-const notifications = [
-  { id: 0, color: "warning", message: "Check out this awesome ticket" },
-  {
-    id: 1,
-    color: "success",
-    type: "info",
-    message: "What is the best way to get ..."
-  },
-  {
-    id: 2,
-    color: "secondary",
-    type: "notification",
-    message: "This is just a simple notification"
-  },
-  {
-    id: 3,
-    color: "primary",
-    type: "e-commerce",
-    message: "12 new orders has arrived today"
-  }
-];
-
-const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
-  <AppBar position="fixed" className={classes.appBar}>
-    <Toolbar className={classes.toolbar}>
-      <IconButton
-        color="inherit"
-        onClick={toggleSidebar}
-        className={classNames(
-          classes.headerMenuButton,
-          classes.headerMenuButtonCollapse
-        )}
-      >
-        {isSidebarOpened ? (
-          <ArrowBackIcon
-            classes={{
-              root: classNames(classes.headerIcon, classes.headerIconCollapse)
-            }}
-          />
-        ) : (
-          <MenuIcon
-            classes={{
-              root: classNames(classes.headerIcon, classes.headerIconCollapse)
-            }}
-          />
-        )}
-      </IconButton>
-      <Typography variant="h6" weight="medium" className={classes.logotype}>React Material Admin</Typography>
-      <div className={classes.grow} />
-      <div
-        className={classNames(classes.search, {
-          [classes.searchFocused]: props.isSearchOpen
-        })}
-      >
-        <div
-          className={classNames(classes.searchIcon, {
-            [classes.searchIconOpened]: props.isSearchOpen
-          })}
-          onClick={props.toggleSearch}
-        >
-          <SearchIcon classes={{ root: classes.headerIcon }} />
-        </div>
-        <InputBase
-          placeholder="Search…"
-          classes={{
-            root: classes.inputRoot,
-            input: classes.inputInput
-          }}
-        />
-      </div>
-      <IconButton
-        color="inherit"
-        aria-haspopup="true"
-        aria-controls="mail-menu"
-        onClick={props.openNotificationsMenu}
-        className={classes.headerMenuButton}
-      >
-        <Badge
-          badgeContent={
-            props.isNotificationsUnread ? notifications.length : null
-          }
-          colortheme="warning"
-        >
-          <NotificationsIcon classes={{ root: classes.headerIcon }} />
-        </Badge>
-      </IconButton>
-      <IconButton
-        color="inherit"
-        aria-haspopup="true"
-        aria-controls="mail-menu"
-        onClick={props.openMailMenu}
-        className={classes.headerMenuButton}
-      >
-        <Badge
-          badgeContent={props.isMailsUnread ? messages.length : null}
-          color="secondary"
-        >
-          <MailIcon classes={{ root: classes.headerIcon }} />
-        </Badge>
-      </IconButton>
-      <IconButton
-        aria-haspopup="true"
-        color="inherit"
-        className={classes.headerMenuButton}
-        aria-controls="profile-menu"
-        onClick={props.openProfileMenu}
-      >
-        <AccountIcon classes={{ root: classes.headerIcon }} />
-      </IconButton>
-      <Menu
-        id="mail-menu"
-        open={Boolean(props.mailMenu)}
-        anchorEl={props.mailMenu}
-        onClose={props.closeMailMenu}
-        MenuListProps={{ className: classes.headerMenuList }}
-        className={classes.headerMenu}
-        classes={{ paper: classes.profileMenu }}
-        disableAutoFocusItem
-      >
-        <div className={classes.profileMenuUser}>
-          <Typography variant="h4" weight="medium">
-            New Messages
-          </Typography>
-          <Typography
-            className={classes.profileMenuLink}
-            component="a"
-            color="secondary"
-          >
-            {messages.length} New Messages
-          </Typography>
-        </div>
-        {messages.map(message => (
-          <MenuItem key={message.id} className={classes.messageNotification}>
-            <div className={classes.messageNotificationSide}>
-              <UserAvatar color={message.variant} name={message.name} />
-              <Typography size="sm" color="textSecondary">
-                {message.time}
-              </Typography>
-            </div>
-            <div
-              className={classNames(
-                classes.messageNotificationSide,
-                classes.messageNotificationBodySide
-              )}
-            >
-              <Typography weight="medium" gutterBottom>
-                {message.name}
-              </Typography>
-              <Typography color="textSecondary">{message.message}</Typography>
-            </div>
-          </MenuItem>
-        ))}
-        <Fab
-          variant="extended"
-          color="primary"
-          aria-label="Add"
-          className={classes.sendMessageButton}
-        >
-          Send New Message
-          <SendIcon className={classes.sendButtonIcon} />
-        </Fab>
-      </Menu>
-      <Menu
-        id="notifications-menu"
-        open={Boolean(props.notificationsMenu)}
-        anchorEl={props.notificationsMenu}
-        onClose={props.closeNotificationsMenu}
-        className={classes.headerMenu}
-        disableAutoFocusItem
-      >
-        {notifications.map(notification => (
-          <MenuItem
-            key={notification.id}
-            onClick={props.closeNotificationsMenu}
-            className={classes.headerMenuItem}
-          >
-            <Notification {...notification} typographyVariant="inherit" />
-          </MenuItem>
-        ))}
-      </Menu>
-      <Menu
-        id="profile-menu"
-        open={Boolean(props.profileMenu)}
-        anchorEl={props.profileMenu}
-        onClose={props.closeProfileMenu}
-        className={classes.headerMenu}
-        classes={{ paper: classes.profileMenu }}
-        disableAutoFocusItem
-      >
-        <div className={classes.profileMenuUser}>
-          <Typography variant="h4" weight="medium">
-            John Smith
-          </Typography>
-          <Typography
-            className={classes.profileMenuLink}
-            component="a"
-            color="primary"
-            href="https://flatlogic.com"
-          >
-            Flalogic.com
-          </Typography>
-        </div>
-        <MenuItem
-          className={classNames(
-            classes.profileMenuItem,
-            classes.headerMenuItem
-          )}
-        >
-          <AccountIcon className={classes.profileMenuIcon} /> Profile
-        </MenuItem>
-        <MenuItem
-          className={classNames(
-            classes.profileMenuItem,
-            classes.headerMenuItem
-          )}
-        >
-          <AccountIcon className={classes.profileMenuIcon} /> Tasks
-        </MenuItem>
-        <MenuItem
-          className={classNames(
-            classes.profileMenuItem,
-            classes.headerMenuItem
-          )}
-        >
-          <AccountIcon className={classes.profileMenuIcon} /> Messages
-        </MenuItem>
-        <div className={classes.profileMenuUser}>
-          <Typography
-            className={classes.profileMenuLink}
-            color="primary"
-            onClick={props.signOut}
-          >
-            Sign Out
-          </Typography>
-        </div>
-      </Menu>
-    </Toolbar>
-  </AppBar>
-);
-
-const styles = theme => ({
-  logotype: {
-    color: "white",
-    marginLeft: theme.spacing.unit * 2.5,
-    marginRight: theme.spacing.unit * 2.5,
-    fontWeight: 500,
-    fontSize: 18,
-    whiteSpace: "nowrap",
-    [theme.breakpoints.down("xs")]: {
-      display: "none"
-    }
-  },
-  appBar: {
-    width: "100vw",
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(["margin"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen
-    })
-  },
-  toolbar: {
-    paddingLeft: theme.spacing.unit * 2,
-    paddingRight: theme.spacing.unit * 2
-  },
-  hide: {
-    display: "none"
-  },
-  grow: {
-    flexGrow: 1
-  },
-  search: {
-    position: "relative",
-    borderRadius: 25,
-    paddingLeft: theme.spacing.unit * 2.5,
-    width: 36,
-    backgroundColor: fade(theme.palette.common.black, 0),
-    transition: theme.transitions.create(["background-color", "width"]),
-    "&:hover": {
-      cursor: "pointer",
-      backgroundColor: fade(theme.palette.common.black, 0.08)
-    }
-  },
-  searchFocused: {
-    backgroundColor: fade(theme.palette.common.black, 0.08),
-    width: "100%",
-    [theme.breakpoints.up("md")]: {
-      width: 250
-    }
-  },
-  searchIcon: {
-    width: 36,
-    right: 0,
-    height: "100%",
-    position: "absolute",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transition: theme.transitions.create("right"),
-    "&:hover": {
-      cursor: "pointer"
-    }
-  },
-  searchIconOpened: {
-    right: theme.spacing.unit * 1.25
-  },
-  inputRoot: {
-    color: "inherit",
-    width: "100%"
-  },
-  inputInput: {
-    height: 36,
-    padding: 0,
-    paddingRight: 36 + theme.spacing.unit * 1.25,
-    width: "100%"
-  },
-  messageContent: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  headerMenu: {
-    marginTop: theme.spacing.unit * 7
-  },
-  headerMenuList: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  headerMenuItem: {
-    "&:hover, &:focus": {
-      backgroundColor: theme.palette.primary.main,
-      color: "white"
-    }
-  },
-  headerMenuButton: {
-    marginLeft: theme.spacing.unit * 2,
-    padding: theme.spacing.unit / 2
-  },
-  headerMenuButtonCollapse: {
-    marginRight: theme.spacing.unit * 2
-  },
-  headerIcon: {
-    fontSize: 28,
-    color: "rgba(255, 255, 255, 0.35)"
-  },
-  headerIconCollapse: {
-    color: "white"
-  },
-  profileMenu: {
-    minWidth: 265
-  },
-  profileMenuUser: {
-    display: "flex",
-    flexDirection: "column",
-    padding: theme.spacing.unit * 2
-  },
-  profileMenuItem: {
-    color: theme.palette.text.hint
-  },
-  profileMenuIcon: {
-    marginRight: theme.spacing.unit * 2,
-    color: theme.palette.text.hint
-  },
-  profileMenuLink: {
-    fontSize: 16,
-    textDecoration: "none",
-    "&:hover": {
-      cursor: "pointer"
-    }
-  },
-  messageNotification: {
-    height: "auto",
-    display: "flex",
-    alignItems: "center",
-    "&:hover, &:focus": {
-      backgroundColor: theme.palette.background.light
-    }
-  },
-  messageNotificationSide: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    marginRight: theme.spacing.unit * 2
-  },
-  messageNotificationBodySide: {
-    alignItems: "flex-start",
-    marginRight: 0
-  },
-  sendMessageButton: {
-    margin: theme.spacing.unit * 4,
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    textTransform: "none"
-  },
-  sendButtonIcon: {
-    marginLeft: theme.spacing.unit * 2
-  }
-});
-
-export default withStyles(styles)(Header);
--- a/src/components/Header/package.json
+++ b/src/components/Header/package.json
@ -1,6 +0,0 @@
-{
-  "name": "Header",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Header.js"
-}
--- a/src/components/Layout/Content.js
+++ b/src/components/Layout/Content.js
@ -0,0 +1,52 @@
+import React from "react";
+import { Route, Switch, Redirect } from "react-router-dom";
+import classnames from "classnames";
+
+// pages
+import Dashboard from "../../pages/dashboard/Dashboard";
+import Typography from "../../pages/typography/Typography";
+import Notifications from "../../pages/notifications/Notifications";
+import Maps from "../../pages/maps/Maps";
+import Tables from "../../pages/tables/Tables";
+import Icons from "../../pages/icons/Icons";
+import Charts from "../../pages/charts/Charts";
+import ContentFooter from "./ContentFooter";
+
+// context
+import { useLayoutState } from "../../context/LayoutContext";
+
+// styles
+import useStyles from "./styles";
+
+const Content = () => {
+  // global
+  var layoutState = useLayoutState();
+  var classes = useStyles();
+
+  return (
+    <div
+      className={classnames(classes.content, {
+        [classes.contentShift]: layoutState.isSidebarOpened
+      })}
+    >
+      <div className={classes.fakeToolbar} />
+      <Switch>
+        <Route path="/app/dashboard" component={Dashboard} />
+        <Route path="/app/typography" component={Typography} />
+        <Route path="/app/tables" component={Tables} />
+        <Route path="/app/notifications" component={Notifications} />
+        <Route
+          exact
+          path="/app/ui"
+          render={() => <Redirect to="/app/ui/icons" />}
+        />
+        <Route path="/app/ui/maps" component={Maps} />
+        <Route path="/app/ui/icons" component={Icons} />
+        <Route path="/app/ui/charts" component={Charts} />
+      </Switch>
+      <ContentFooter />
+    </div>
+  );
+};
+
+export default Content;
--- a/src/components/Layout/ContentFooter.js
+++ b/src/components/Layout/ContentFooter.js
@ -0,0 +1,73 @@
+import React from "react";
+import { Box, IconButton, Link } from "@material-ui/core";
+import Icon from "@mdi/react";
+
+//icons
+import {
+  mdiFacebook as FacebookIcon,
+  mdiTwitter as TwitterIcon,
+  mdiGithub as GithubIcon
+} from "@mdi/js";
+
+// styles
+import useStyles from "./styles";
+
+const ContentFooter = () => {
+  var classes = useStyles();
+
+  return (
+    <Box
+      mt={5}
+      width={"100%"}
+      display={"flex"}
+      alignItems={"center"}
+      justifyContent="space-between"
+    >
+      <div>
+        <Link
+          color={"primary"}
+          href={"https://toodle.ddns.net/heimdall"}
+          target={"_blank"}
+          className={classes.link}
+        >
+          Toodle
+        </Link>
+        <Link
+          color={"primary"}
+          href={"https://toodle.ddns.net/heimdall"}
+          target={"_blank"}
+          className={classes.link}
+        >
+          About Us
+        </Link>
+        <Link
+          color={"primary"}
+          href={"https://toodle.ddns.net/heimdall"}
+          target={"_blank"}
+          className={classes.link}
+        >
+          Blog
+        </Link>
+      </div>
+      <div>
+        <Link href={"https://www.facebook.com"} target={"_blank"}>
+          <IconButton aria-label="facebook">
+            <Icon path={FacebookIcon} size={1} color="#6E6E6E99" />
+          </IconButton>
+        </Link>
+        <Link href={"https://twitter.com"} target={"_blank"}>
+          <IconButton aria-label="twitter">
+            <Icon path={TwitterIcon} size={1} color="#6E6E6E99" />
+          </IconButton>
+        </Link>
+        <Link href={"https://dev.azure.com/tstanciu94"} target={"_blank"}>
+          <IconButton aria-label="github" style={{ marginRight: -12 }}>
+            <Icon path={GithubIcon} size={1} color="#6E6E6E99" />
+          </IconButton>
+        </Link>
+      </div>
+    </Box>
+  );
+};
+
+export default ContentFooter;
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@ -1,147 +1,23 @@
 import React from "react";
-import {
-  Route,
-  Switch,
-  Redirect,
-  withRouter,
-} from "react-router-dom";
-import classnames from "classnames";
-import {Box, IconButton, Link} from '@material-ui/core'
-import Icon from '@mdi/react'
+import { withRouter } from "react-router-dom";

-//icons
-import {
-  mdiFacebook as FacebookIcon,
-  mdiTwitter as TwitterIcon,
-  mdiGithub as GithubIcon,
-} from '@mdi/js'
+// components
+import Header from "../Header/Header";
+import Sidebar from "../Sidebar";
+import Content from "./Content";

 // styles
 import useStyles from "./styles";

-// components
-import Header from "../Header";
-import Sidebar from "../Sidebar";
-
-// pages
-import Dashboard from "../../pages/dashboard";
-import Typography from "../../pages/typography";
-import Notifications from "../../pages/notifications";
-import Maps from "../../pages/maps";
-import Tables from "../../pages/tables";
-import Icons from "../../pages/icons";
-import Charts from "../../pages/charts";
-
-// context
-import { useLayoutState } from "../../context/LayoutContext";
-
 function Layout(props) {
  var classes = useStyles();

-  // global
-  var layoutState = useLayoutState();
-
  return (
    <div className={classes.root}>
      <>
        <Header history={props.history} />
        <Sidebar />
-          <div
-            className={classnames(classes.content, {
-              [classes.contentShift]: layoutState.isSidebarOpened,
-            })}
-          >
-            <div className={classes.fakeToolbar} />
-            <Switch>
-              <Route path="/app/dashboard" component={Dashboard} />
-              <Route path="/app/typography" component={Typography} />
-              <Route path="/app/tables" component={Tables} />
-              <Route path="/app/notifications" component={Notifications} />
-              <Route
-                exact
-                path="/app/ui"
-                render={() => <Redirect to="/app/ui/icons" />}
-              />
-              <Route path="/app/ui/maps" component={Maps} />
-              <Route path="/app/ui/icons" component={Icons} />
-              <Route path="/app/ui/charts" component={Charts} />
-            </Switch>
-            <Box
-              mt={5}
-              width={"100%"}
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent="space-between"
-            >
-              <div>
-                <Link
-                  color={'primary'}
-                  href={'https://flatlogic.com/'}
-                  target={'_blank'}
-                  className={classes.link}
-                >
-                  Flatlogic
-                </Link>
-                <Link
-                  color={'primary'}
-                  href={'https://flatlogic.com/about'}
-                  target={'_blank'}
-                  className={classes.link}
-                >
-                  About Us
-                </Link>
-                <Link
-                  color={'primary'}
-                  href={'https://flatlogic.com/blog'}
-                  target={'_blank'}
-                  className={classes.link}
-                >
-                  Blog
-                </Link>
-              </div>
-              <div>
-                <Link
-                  href={'https://www.facebook.com/flatlogic'}
-                  target={'_blank'}
-                >
-                  <IconButton aria-label="facebook">
-                    <Icon
-                      path={FacebookIcon}
-                      size={1}
-                      color="#6E6E6E99"
-                    />
-                  </IconButton>
-                </Link>
-                <Link
-                  href={'https://twitter.com/flatlogic'}
-                  target={'_blank'}
-                >
-                  <IconButton aria-label="twitter">
-                    <Icon
-                      path={TwitterIcon}
-                      size={1}
-                      color="#6E6E6E99"
-                    />
-                  </IconButton>
-                </Link>
-                <Link
-                  href={'https://github.com/flatlogic'}
-                  target={'_blank'}
-                >
-                  <IconButton
-                    aria-label="github"
-                    style={{marginRight: -12}}
-                  >
-                    <Icon
-                      path={GithubIcon}
-                      size={1}
-                      color="#6E6E6E99"
-                    />
-                  </IconButton>
-                </Link>
-              </div>
-            </Box>
-          </div>
+        <Content />
      </>
    </div>
  );
--- a/src/components/Layout/package.json
+++ b/src/components/Layout/package.json
@ -1,6 +0,0 @@
-{
-  "name": "Layout",
-  "version": "1.0.0",
-  "private": true,
-  "main": "Layout.js"
-}
--- a/src/components/Notification/index.js
+++ b/src/components/Notification/index.js
@ -0,0 +1,2 @@
+import Notification from "./Notification";
+export default Notification;
--- a/src/components/Notification/package.json
+++ b/src/components/Notification/package.json
@ -1,6 +0,0 @@
-{
-  "name": "Notification",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Notification.js"
-}
--- a/src/components/PageTitle/index.js
+++ b/src/components/PageTitle/index.js
@ -0,0 +1,2 @@
+import PageTitle from "./PageTitle";
+export default PageTitle;
--- a/src/components/PageTitle/package.json
+++ b/src/components/PageTitle/package.json
@ -1,6 +0,0 @@
-{
-  "name": "PageTitle",
-  "version": "0.0.0",
-  "private": true,
-  "main": "PageTitle.js"
-}
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@ -1,16 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Drawer, IconButton, List } from "@material-ui/core";
-import {
-  Home as HomeIcon,
-  NotificationsNone as NotificationsIcon,
-  FormatSize as TypographyIcon,
-  FilterNone as UIElementsIcon,
-  BorderAll as TableIcon,
-  QuestionAnswer as SupportIcon,
-  LibraryBooks as LibraryIcon,
-  HelpOutline as FAQIcon,
-  ArrowBack as ArrowBackIcon,
-} from "@material-ui/icons";
+import { MenuOpen as MenuOpenIcon } from "@material-ui/icons";
 import { useTheme } from "@material-ui/styles";
 import { withRouter } from "react-router-dom";
 import classNames from "classnames";
@ -20,67 +10,15 @@ import useStyles from "./styles";

 // components
 import SidebarLink from "./components/SidebarLink/SidebarLink";
-import Dot from "./components/Dot";

 // context
 import {
  useLayoutState,
  useLayoutDispatch,
-  toggleSidebar,
+  toggleSidebar
 } from "../../context/LayoutContext";

-const structure = [
-  { id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
-  {
-    id: 1,
-    label: "Typography",
-    link: "/app/typography",
-    icon: <TypographyIcon />,
-  },
-  { id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
-  {
-    id: 3,
-    label: "Notifications",
-    link: "/app/notifications",
-    icon: <NotificationsIcon />,
-  },
-  {
-    id: 4,
-    label: "UI Elements",
-    link: "/app/ui",
-    icon: <UIElementsIcon />,
-    children: [
-      { label: "Icons", link: "/app/ui/icons" },
-      { label: "Charts", link: "/app/ui/charts" },
-      { label: "Maps", link: "/app/ui/maps" },
-    ],
-  },
-  { id: 5, type: "divider" },
-  { id: 6, type: "title", label: "HELP" },
-  { id: 7, label: "Library", link: "https://flatlogic.com/templates", icon: <LibraryIcon /> },
-  { id: 8, label: "Support", link: "https://flatlogic.com/forum", icon: <SupportIcon /> },
-  { id: 9, label: "FAQ", link: "https://flatlogic.com/forum", icon: <FAQIcon /> },
-  { id: 10, type: "divider" },
-  { id: 11, type: "title", label: "PROJECTS" },
-  {
-    id: 12,
-    label: "My recent",
-    link: "",
-    icon: <Dot size="small" color="warning" />,
-  },
-  {
-    id: 13,
-    label: "Starred",
-    link: "",
-    icon: <Dot size="small" color="primary" />,
-  },
-  {
-    id: 14,
-    label: "Background",
-    link: "",
-    icon: <Dot size="small" color="secondary" />,
-  },
-];
+import menu from "./menu";

 function Sidebar({ location }) {
  var classes = useStyles();
@ -106,28 +44,28 @@ function Sidebar({ location }) {
      variant={isPermanent ? "permanent" : "temporary"}
      className={classNames(classes.drawer, {
        [classes.drawerOpen]: isSidebarOpened,
-        [classes.drawerClose]: !isSidebarOpened,
+        [classes.drawerClose]: !isSidebarOpened
      })}
      classes={{
        paper: classNames({
          [classes.drawerOpen]: isSidebarOpened,
-          [classes.drawerClose]: !isSidebarOpened,
-        }),
+          [classes.drawerClose]: !isSidebarOpened
+        })
      }}
      open={isSidebarOpened}
    >
      <div className={classes.toolbar} />
      <div className={classes.mobileBackButton}>
        <IconButton onClick={() => toggleSidebar(layoutDispatch)}>
-          <ArrowBackIcon
+          <MenuOpenIcon
            classes={{
-              root: classNames(classes.headerIcon, classes.headerIconCollapse),
+              root: classNames(classes.headerIcon, classes.headerIconCollapse)
            }}
          />
        </IconButton>
      </div>
      <List className={classes.sidebarList}>
-        {structure.map(link => (
+        {menu.map((link) => (
          <SidebarLink
            key={link.id}
            location={location}
--- a/src/components/Sidebar/SidebarView.js
+++ b/src/components/Sidebar/SidebarView.js
@ -1,140 +0,0 @@
-import React from 'react';
-import {
-  Drawer,
-  IconButton,
-  List,
-  withStyles } from "@material-ui/core";
-import {
-  Home as HomeIcon,
-  NotificationsNone as NotificationsIcon,
-  FormatSize as TypographyIcon,
-  FilterNone as UIElementsIcon,
-  BorderAll as TableIcon,
-  QuestionAnswer as SupportIcon,
-  LibraryBooks as LibraryIcon,
-  HelpOutline as FAQIcon,
-  ArrowBack as ArrowBackIcon,
-} from "@material-ui/icons";
-import classNames from 'classnames';
-
-import SidebarLink from './components/SidebarLink/SidebarLinkContainer';
-import Dot from './components/Dot';
-
-const structure = [
-  { id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
-  { id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> },
-  { id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon /> },
-  { id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />},
-  {
-    id: 4,
-    label: 'UI Elements',
-    link: '/app/ui',
-    icon: <UIElementsIcon />,
-    children: [
-      { label: 'Icons', link: '/app/ui/icons' },
-      { label: 'Charts', link: '/app/ui/charts' },
-      { label: 'Maps', link: '/app/ui/maps' },
-    ],
-  },
-  { id: 5, type: 'divider' },
-  { id: 6, type: 'title', label: 'HELP' },
-  { id: 7, label: 'Library', link: 'https://flatlogic.com/templates', icon: <LibraryIcon /> },
-  { id: 8, label: 'Support', link: 'https://flatlogic.com/forum/', icon: <SupportIcon /> },
-  { id: 9, label: 'FAQ', link: 'https://flatlogic.com/forum/', icon: <FAQIcon />},
-  { id: 10, type: 'divider' },
-  { id: 11, type: 'title', label: 'PROJECTS' },
-  { id: 12, label: 'My recent', link: '', icon: <Dot size="small" color="secondary" /> },
-  { id: 13, label: 'Starred', link: '', icon: <Dot size="small" color="primary" /> },
-  { id: 14, label: 'Background', link: '', icon: <Dot size="small" color="secondary" /> },
-];
-
-const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => {
-  return (
-    <Drawer
-      variant={isPermanent ? 'permanent' : 'temporary'}
-      className={classNames(classes.drawer, {
-        [classes.drawerOpen]: isSidebarOpened,
-        [classes.drawerClose]: !isSidebarOpened,
-      })}
-      classes={{
-        paper: classNames(classes.drawer, {
-          [classes.drawerOpen]: isSidebarOpened,
-          [classes.drawerClose]: !isSidebarOpened,
-        }),
-      }}
-      open={isSidebarOpened}
-    >
-      <div className={classes.mobileBackButton}>
-        <IconButton
-          onClick={toggleSidebar}
-        >
-          <ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
-        </IconButton>
-      </div>
-      <List className={classes.sidebarList}>
-        {structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
-      </List>
-    </Drawer>
-  );
-}
-
-const drawerWidth = 240;
-
-const styles = theme => ({
-  menuButton: {
-    marginLeft: 12,
-    marginRight: 36,
-  },
-  hide: {
-    display: 'none',
-  },
-  drawer: {
-    width: drawerWidth,
-    flexShrink: 0,
-    whiteSpace: 'nowrap',
-    top: theme.spacing.unit * 8,
-    [theme.breakpoints.down("sm")]: {
-      top: 0,
-    }
-  },
-  drawerOpen: {
-    width: drawerWidth,
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
-  drawerClose: {
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    overflowX: 'hidden',
-    width: theme.spacing.unit * 7 + 40,
-    [theme.breakpoints.down("sm")]: {
-      width: drawerWidth,
-    }
-  },
-  toolbar: {
-    ...theme.mixins.toolbar,
-    [theme.breakpoints.down("sm")]: {
-      display: 'none',
-    }
-  },
-  content: {
-    flexGrow: 1,
-    padding: theme.spacing.unit * 3,
-  },
-  mobileBackButton: {
-    marginTop: theme.spacing.unit * .5,
-    marginLeft: theme.spacing.unit * 3,
-    [theme.breakpoints.only("sm")]: {
-      marginTop: theme.spacing.unit * .625,
-    },
-    [theme.breakpoints.up("md")]: {
-      display: 'none',
-    }
-  }
-});
-
-export default withStyles(styles, { withTheme: true })(SidebarView);
--- a/src/components/Sidebar/components/SidebarLink/SidebarLink.js
+++ b/src/components/Sidebar/components/SidebarLink/SidebarLink.js
@ -6,7 +6,7 @@ import {
  ListItem,
  ListItemIcon,
  ListItemText,
-  Typography,
+  Typography
 } from "@material-ui/core";
 import { Inbox as InboxIcon } from "@material-ui/icons";
 import { Link } from "react-router-dom";
@ -26,7 +26,7 @@ export default function SidebarLink({
  location,
  isSidebarOpened,
  nested,
-  type,
+  type
 }) {
  var classes = useStyles();

@ -36,19 +36,19 @@ export default function SidebarLink({
    link &&
    (location.pathname === link || location.pathname.indexOf(link) !== -1);

+  if (type === "divider") return <Divider className={classes.divider} />;
  if (type === "title")
    return (
      <Typography
        className={classnames(classes.linkText, classes.sectionTitle, {
-          [classes.linkTextHidden]: !isSidebarOpened,
+          [classes.linkTextHidden]: !isSidebarOpened
        })}
      >
        {label}
      </Typography>
    );

-  if (type === "divider") return <Divider className={classes.divider} />;
-  if (link && link.includes('http')) {
+  if (link && link.includes("http")) {
    return (
      <ListItem
        button
@ -56,15 +56,15 @@ export default function SidebarLink({
        classes={{
          root: classnames(classes.linkRoot, {
            [classes.linkActive]: isLinkActive && !nested,
-            [classes.linkNested]: nested,
-          }),
+            [classes.linkNested]: nested
+          })
        }}
        disableRipple
      >
        <a className={classes.externalLink} href={link}>
          <ListItemIcon
            className={classnames(classes.linkIcon, {
-            [classes.linkIconActive]: isLinkActive,
+              [classes.linkIconActive]: isLinkActive
            })}
          >
            {nested ? <Dot color={isLinkActive && "primary"} /> : icon}
@ -73,15 +73,16 @@ export default function SidebarLink({
            classes={{
              primary: classnames(classes.linkText, {
                [classes.linkTextActive]: isLinkActive,
-              [classes.linkTextHidden]: !isSidebarOpened,
-            }),
+                [classes.linkTextHidden]: !isSidebarOpened
+              })
            }}
            primary={label}
          />
        </a>
      </ListItem>
-    )
+    );
  }
+
  if (!children)
    return (
      <ListItem
@ -92,24 +93,24 @@ export default function SidebarLink({
        classes={{
          root: classnames(classes.linkRoot, {
            [classes.linkActive]: isLinkActive && !nested,
-            [classes.linkNested]: nested,
-          }),
+            [classes.linkNested]: nested
+          })
        }}
        disableRipple
      >
        <ListItemIcon
          className={classnames(classes.linkIcon, {
-            [classes.linkIconActive]: isLinkActive,
+            [classes.linkIconActive]: isLinkActive
          })}
        >
-          {nested ? <Dot color={isLinkActive && "primary"} /> : icon}
+          {nested ? icon || <Dot color={isLinkActive && "primary"} /> : icon}
        </ListItemIcon>
        <ListItemText
          classes={{
            primary: classnames(classes.linkText, {
              [classes.linkTextActive]: isLinkActive,
-              [classes.linkTextHidden]: !isSidebarOpened,
-            }),
+              [classes.linkTextHidden]: !isSidebarOpened
+            })
          }}
          primary={label}
        />
@ -128,7 +129,7 @@ export default function SidebarLink({
      >
        <ListItemIcon
          className={classnames(classes.linkIcon, {
-            [classes.linkIconActive]: isLinkActive,
+            [classes.linkIconActive]: isLinkActive
          })}
        >
          {icon ? icon : <InboxIcon />}
@ -137,8 +138,8 @@ export default function SidebarLink({
          classes={{
            primary: classnames(classes.linkText, {
              [classes.linkTextActive]: isLinkActive,
-              [classes.linkTextHidden]: !isSidebarOpened,
-            }),
+              [classes.linkTextHidden]: !isSidebarOpened
+            })
          }}
          primary={label}
        />
@ -151,7 +152,7 @@ export default function SidebarLink({
          className={classes.nestedList}
        >
          <List component="div" disablePadding>
-            {children.map(childrenLink => (
+            {children.map((childrenLink) => (
              <SidebarLink
                key={childrenLink && childrenLink.link}
                location={location}
@ -167,8 +168,6 @@ export default function SidebarLink({
    </>
  );

-  // ###########################################################
-
  function toggleCollapse(e) {
    if (isSidebarOpened) {
      e.preventDefault();
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@ -0,0 +1,2 @@
+import Sidebar from "./Sidebar";
+export default Sidebar;
--- a/src/components/Sidebar/menu.js
+++ b/src/components/Sidebar/menu.js
@ -0,0 +1,132 @@
+import {
+  Dashboard as DashboardIcon,
+  NotificationsNone as NotificationsIcon,
+  FormatSize as TypographyIcon,
+  FilterNone as UIElementsIcon,
+  BorderAll as TableIcon,
+  QuestionAnswer as SupportIcon,
+  LibraryBooks as LibraryIcon,
+  HelpOutline as FAQIcon,
+  Image as ImageIcon,
+  Build as BuildIcon,
+  Settings as SettingsIcon,
+  NetworkCheck as NetworkCheckIcon
+} from "@material-ui/icons";
+import Dot from "./components/Dot";
+
+let menu = [
+  {
+    id: 0,
+    label: "Dashboard",
+    link: "/app/dashboard",
+    icon: <DashboardIcon />
+  },
+  {
+    id: 1,
+    label: "Resources",
+    link: "/app/resources",
+    icon: <ImageIcon />
+  },
+
+  { id: 2, type: "divider" },
+  { id: 3, type: "title", label: "System" },
+  {
+    id: 4,
+    label: "Admin",
+    link: "/app/admin",
+    icon: <BuildIcon />
+  },
+  {
+    id: 5,
+    label: "Settings",
+    link: "/app/settings",
+    icon: <SettingsIcon />,
+    children: [
+      {
+        id: 50,
+        label: "Notifications",
+        link: "/app/notifications",
+        icon: <NotificationsIcon />
+      }
+    ]
+  },
+  {
+    id: 6,
+    label: "Health",
+    link: "/app/health",
+    icon: <NetworkCheckIcon />
+  },
+  { id: 7, type: "divider" },
+  { id: 8, type: "title", label: "Community" },
+  {
+    id: 9,
+    label: "Library",
+    link: "https://dev.azure.com/tstanciu94/CDN",
+    icon: <LibraryIcon />
+  },
+  {
+    id: 10,
+    label: "Support",
+    link: "https://toodle.ddns.net/forum",
+    icon: <SupportIcon />
+  },
+  {
+    id: 11,
+    label: "FAQ",
+    link: "https://toodle.ddns.net/forum",
+    icon: <FAQIcon />
+  }
+];
+
+const enableTemplateContent =
+  process.env.REACT_APP_ENABLE_TEMPLATE_CONTENT === "True";
+
+if (enableTemplateContent) {
+  menu.push(
+    { id: 12, type: "divider" },
+    {
+      id: 13,
+      label: "Template",
+      children: [
+        {
+          id: 14,
+          label: "Typography",
+          link: "/app/typography",
+          icon: <TypographyIcon />
+        },
+        { id: 15, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
+        {
+          id: 16,
+          label: "UI Elements",
+          link: "/app/ui",
+          icon: <UIElementsIcon />,
+          children: [
+            { label: "Icons", link: "/app/ui/icons" },
+            { label: "Charts", link: "/app/ui/charts" },
+            { label: "Maps", link: "/app/ui/maps" }
+          ]
+        },
+        {
+          id: 17,
+          label: "My recent",
+          link: "",
+          icon: <Dot size="small" color="warning" />
+        },
+        {
+          id: 18,
+          label: "Starred",
+          link: "",
+          icon: <Dot size="small" color="primary" />
+        },
+        {
+          id: 19,
+          label: "Background",
+          link: "",
+          icon: <Dot size="small" color="secondary" />
+        }
+      ]
+    }
+  );
+}
+
+export default menu;
--- a/src/components/Sidebar/package.json
+++ b/src/components/Sidebar/package.json
@ -1,6 +0,0 @@
-{
-  "name": "Sidebar",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Sidebar.js"
-}
--- a/src/components/UserAvatar/package.json
+++ b/src/components/UserAvatar/package.json
@ -1,6 +0,0 @@
-{
-  "name": "UserAvatar",
-  "version": "0.0.0",
-  "private": true,
-  "main": "UserAvatar.js"
-}
--- a/src/components/Widget/Widget.js
+++ b/src/components/Widget/Widget.js
@ -4,7 +4,7 @@ import {
  IconButton,
  Menu,
  MenuItem,
-  Typography,
+  Typography
 } from "@material-ui/core";
 import { MoreVert as MoreIcon } from "@material-ui/icons";
 import classnames from "classnames";
@ -33,13 +33,20 @@ export default function Widget({

  return (
    <div className={classes.widgetWrapper} style={style && { ...style }}>
-      <Paper className={classes.paper} classes={{ root: classnames(classes.widgetRoot, {
+      <Paper
+        className={classes.paper}
+        classes={{
+          root: classnames(classes.widgetRoot, {
            [classes.noWidgetShadow]: noWidgetShadow
-        }) }}>
-        <div className={classnames(classes.widgetHeader, {
+          })
+        }}
+      >
+        <div
+          className={classnames(classes.widgetHeader, {
            [classes.noPadding]: noHeaderPadding,
            [headerClass]: headerClass
-        })}>
+          })}
+        >
          {header ? (
            header
          ) : (
@ -65,7 +72,7 @@ export default function Widget({
        <div
          className={classnames(classes.widgetBody, {
            [classes.noPadding]: noBodyPadding,
-            [bodyClass]: bodyClass,
+            [bodyClass]: bodyClass
          })}
        >
          {children}
--- a/src/components/Widget/index.js
+++ b/src/components/Widget/index.js
@ -0,0 +1,2 @@
+import Widget from "./Widget";
+export default Widget;
--- a/src/components/Widget/package.json
+++ b/src/components/Widget/package.json
@ -1,6 +0,0 @@
-{
-  "name": "Widget",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Widget.js"
-}
--- a/src/components/Wrappers/Wrappers.js
+++ b/src/components/Wrappers/Wrappers.js
@ -3,18 +3,18 @@ import {
  withStyles,
  Badge as BadgeBase,
  Typography as TypographyBase,
-  Button as ButtonBase,
+  Button as ButtonBase
 } from "@material-ui/core";
 import { useTheme, makeStyles } from "@material-ui/styles";
 import classnames from "classnames";

 // styles
-var useStyles = makeStyles(theme => ({
+var useStyles = makeStyles((theme) => ({
  badge: {
    fontWeight: 600,
    height: 16,
-    minWidth: 16,
-  },
+    minWidth: 16
+  }
 }));

 function Badge({ children, colorBrightness, color, ...props }) {
@ -22,16 +22,16 @@ function Badge({ children, colorBrightness, color, ...props }) {
  var theme = useTheme();
  var Styled = createStyled({
    badge: {
-      backgroundColor: getColor(color, theme, colorBrightness),
-    },
+      backgroundColor: getColor(color, theme, colorBrightness)
+    }
  });

  return (
    <Styled>
-      {styledProps => (
+      {(styledProps) => (
        <BadgeBase
          classes={{
-            badge: classnames(classes.badge, styledProps.classes.badge),
+            badge: classnames(classes.badge, styledProps.classes.badge)
          }}
          {...props}
        >
@ -57,7 +57,7 @@ function Typography({
      style={{
        color: getColor(color, theme, colorBrightness),
        fontWeight: getFontWeight(weight),
-        fontSize: getFontSize(size, props.variant, theme),
+        fontSize: getFontSize(size, props.variant, theme)
      }}
      {...props}
    >
@ -71,7 +71,7 @@ function Button({ children, color, className, ...props }) {

  var Styled = createStyled({
    root: {
-      color: getColor(color, theme),
+      color: getColor(color, theme)
    },
    contained: {
      backgroundColor: getColor(color, theme),
@ -79,20 +79,20 @@ function Button({ children, color, className, ...props }) {
      color: `${color ? "white" : theme.palette.text.primary} !important`,
      "&:hover": {
        backgroundColor: getColor(color, theme, "light"),
-        boxShadow: theme.customShadows.widgetWide,
+        boxShadow: theme.customShadows.widgetWide
      },
      "&:active": {
-        boxShadow: theme.customShadows.widgetWide,
-      },
+        boxShadow: theme.customShadows.widgetWide
+      }
    },
    outlined: {
      color: getColor(color, theme),
-      borderColor: getColor(color, theme),
+      borderColor: getColor(color, theme)
    },
    select: {
      backgroundColor: theme.palette.primary.main,
-      color: "#fff",
-    },
+      color: "#fff"
+    }
  });

  return (
@ -102,14 +102,14 @@ function Button({ children, color, className, ...props }) {
          classes={{
            contained: classes.contained,
            root: classes.root,
-            outlined: classes.outlined,
+            outlined: classes.outlined
          }}
          {...props}
          className={classnames(
            {
-              [classes.select]: props.select,
+              [classes.select]: props.select
            },
-            className,
+            className
          )}
        >
          {children}
--- a/src/components/Wrappers/index.js
+++ b/src/components/Wrappers/index.js
@ -0,0 +1 @@
+export { Badge, Typography, Button } from "./Wrappers";
--- a/src/components/Wrappers/package.json
+++ b/src/components/Wrappers/package.json
@ -1,7 +0,0 @@
-{
-  "name": "Wrappers",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Wrappers.js"
-}
-  
--- a/src/pages/tables/Tables.js
+++ b/src/pages/tables/Tables.js
@ -28,14 +28,14 @@ const datatableData = [
  ["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
  ["Avram Sylva", "Example Inc.", "Hartford", "CT"],
  ["Serafima Babatunde", "Example Inc.", "Tampa", "FL"],
-  ["Gaston Festus", "Example Inc.", "Tampa", "FL"],
+  ["Gaston Festus", "Example Inc.", "Tampa", "FL"]
 ];

-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
  tableOverflow: {
-    overflow: 'auto'
+    overflow: "auto"
  }
-}))
+}));

 export default function Tables() {
  const classes = useStyles();
@ -49,12 +49,17 @@ export default function Tables() {
            data={datatableData}
            columns={["Name", "Company", "City", "State"]}
            options={{
-              filterType: "checkbox",
+              filterType: "checkbox"
            }}
          />
        </Grid>
        <Grid item xs={12}>
-          <Widget title="Material-UI Table" upperTitle noBodyPadding bodyClass={classes.tableOverflow}>
+          <Widget
+            title="Material-UI Table"
+            upperTitle
+            noBodyPadding
+            bodyClass={classes.tableOverflow}
+          >
            <Table data={mock.table} />
          </Widget>
        </Grid>
--- a/yarn.lock
+++ b/yarn.lock
				`@ -1 +0,0 @@`
				<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="./manifest.json"/><title>React Material Admin</title><meta name="description" content="React Material Admin is a React Template built with Material-UI"><meta name="keywords" content="react material, material ui admin, react template, react material admin, react material dashboard"><meta name="author" content="Flatlogic LLC."><link href="./static/css/2.637eb612.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],l=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,f\|\|[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)\|\|Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./";var i=this["webpackJsonpreact-material-admin"]=this["webpackJsonpreact-material-admin"]\|\|[],l=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var c=l;t()}([])</script><script src="./static/js/2.af6eef2b.chunk.js"></script><script src="./static/js/main.fc3e922e.chunk.js"></script></body></html>
				`@ -0,0 +1 @@`
				`export { Badge, Typography, Button } from "./Wrappers";`