fix: routers && sidebar improvements

Author: michaeldaineka

src/components/App.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
 
 // components
 import Layout from "./Layout";
@@ -16,7 +16,7 @@ export default function App() {
   var { isAuthenticated } = useUserState();
 
   return (
-    <BrowserRouter>
+    <HashRouter>
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
         <Route
@@ -28,7 +28,7 @@ export default function App() {
         <PublicRoute path="/login" component={Login} />
         <Route component={Error} />
       </Switch>
-    </BrowserRouter>
+    </HashRouter>
   );
 
   // #######################################################################

src/components/Layout/Layout.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  BrowserRouter,
   Route,
   Switch,
   Redirect,
@@ -35,7 +34,6 @@ function Layout(props) {
 
   return (
     <div className={classes.root}>
-      <BrowserRouter>
         <>
           <Header history={props.history} />
           <Sidebar />
@@ -61,7 +59,6 @@ function Layout(props) {
             </Switch>
           </div>
         </>
-      </BrowserRouter>
     </div>
   );
 }

src/components/Sidebar/styles.js

@@ -43,9 +43,9 @@ export default makeStyles(theme => ({
     flexGrow: 1,
     padding: theme.spacing(3),
   },
-  sidebarList: {
+  /* sidebarList: {
     marginTop: theme.spacing(6),
-  },
+  }, */
   mobileBackButton: {
     marginTop: theme.spacing(0.5),
     marginLeft: theme.spacing(3),