diff --git a/package.json b/package.json
index 66e8c61..6ce72db 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-jss": "^8.6.1",
+ "react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.5",
"router": "^1.3.3",
diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js
index 4d380a1..72cef36 100644
--- a/src/components/Menu/Menu.js
+++ b/src/components/Menu/Menu.js
@@ -48,7 +48,6 @@ const Main = inject("rootStore") ( observer(
this.handleSidebarHide = this.handleSidebarHide.bind(this);
this.state = {
- activeItem: 'Home',
visible: false
}
@@ -65,10 +64,10 @@ const Main = inject("rootStore") ( observer(
this.sheet.detach()
}
-
handleItemClick(e, { name }) {
- this.setState({
- activeItem: name,
+ this.props.handleItemClick(name);
+
+ this.setState({
visible: false
});
}
@@ -87,7 +86,7 @@ const Main = inject("rootStore") ( observer(
render() {
- const activeItem = this.state.activeItem
+ const activeItem = window.location.pathname;
if(window.innerWidth > 700) {
@@ -99,12 +98,12 @@ const Main = inject("rootStore") ( observer(
-
-
+
+
Home
-
-
+
+
Password manager
@@ -114,7 +113,9 @@ const Main = inject("rootStore") ( observer(
- {this.props.children}
+
+ {this.props.children}
+
);
} else {
diff --git a/src/pages/Main.js b/src/pages/Main.js
index dffabf2..585c7a1 100644
--- a/src/pages/Main.js
+++ b/src/pages/Main.js
@@ -1,7 +1,9 @@
import React, {Component} from 'react';
import jss from 'jss';
import preset from 'jss-preset-default';
-import { Segment, Container } from 'semantic-ui-react'
+import { Segment, Container } from 'semantic-ui-react';
+import { Router, Route, Switch } from "react-router-dom";
+import history from '../stores/functions/history';
/*
* Functions import
@@ -11,6 +13,8 @@ import { Segment, Container } from 'semantic-ui-react'
* Component imports
*/
import Menu from '../components/Menu/Menu';
+import Home from './home/Home';
+import PasswordManager from './passwordManager/PasswordManager';
jss.setup(preset());
@@ -39,6 +43,12 @@ class Main extends Component {
* - /
*/
+ this.handleItemClick = this.handleItemClick.bind(this);
+
+ this.state = {
+ activeItem: ''
+ }
+
//Styles
this.styles = this.getStyles();
this.sheet = jss.createStyleSheet(this.styles);
@@ -53,19 +63,25 @@ class Main extends Component {
}
+ handleItemClick(name) {
+ history.push(name);
+ }
+
+
render() {
return(
-
-
+
);
}
diff --git a/src/pages/home/Home.js b/src/pages/home/Home.js
new file mode 100644
index 0000000..51ca168
--- /dev/null
+++ b/src/pages/home/Home.js
@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import jss from 'jss';
+import preset from 'jss-preset-default';
+
+/*
+* Functions import
+*/
+
+/*
+* Component imports
+*/
+
+jss.setup(preset());
+
+
+/*
+###############################
+Components -- START
+###############################
+*/
+
+/*
+###############################
+Components -- END
+###############################
+*/
+
+
+
+class Home extends Component {
+ constructor(props){
+ super(props);
+ //Initial loading screen
+
+ /*
+ * Expected props
+ * - /
+ */
+
+ //Styles
+ this.styles = this.getStyles();
+ this.sheet = jss.createStyleSheet(this.styles);
+ const {classes} = this.sheet.attach();
+ this.classes = classes;
+ //Styles
+ }
+
+
+ componentWillUnmount() {
+ this.sheet.detach()
+ }
+
+
+ render() {
+ return(
+
+ Home
+
+ );
+ }
+
+
+ getStyles() {
+ return {
+
+ }
+ }
+}
+
+export default Home;
diff --git a/src/pages/passwordManager/PasswordManager.js b/src/pages/passwordManager/PasswordManager.js
new file mode 100644
index 0000000..ccdf1f8
--- /dev/null
+++ b/src/pages/passwordManager/PasswordManager.js
@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import jss from 'jss';
+import preset from 'jss-preset-default';
+
+/*
+* Functions import
+*/
+
+/*
+* Component imports
+*/
+
+jss.setup(preset());
+
+
+/*
+###############################
+Components -- START
+###############################
+*/
+
+/*
+###############################
+Components -- END
+###############################
+*/
+
+
+
+class PasswordManager extends Component {
+ constructor(props){
+ super(props);
+ //Initial loading screen
+
+ /*
+ * Expected props
+ * - /
+ */
+
+ //Styles
+ this.styles = this.getStyles();
+ this.sheet = jss.createStyleSheet(this.styles);
+ const {classes} = this.sheet.attach();
+ this.classes = classes;
+ //Styles
+ }
+
+
+ componentWillUnmount() {
+ this.sheet.detach()
+ }
+
+
+ render() {
+ return(
+
+ PasswordManager
+
+ );
+ }
+
+
+ getStyles() {
+ return {
+
+ }
+ }
+}
+
+export default PasswordManager;