router

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",

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(
               <Menu.Item header>
                 <img alt="" src={require('../../files/images/logo.svg')} style={{display: 'block', width: '60px', height: '45px'}} />
               </Menu.Item>
-    
-              <Menu.Item name='Home' active={activeItem === 'Home'} onClick={this.handleItemClick} as='a'>
+  
+              <Menu.Item name='/' active={activeItem === '/'} onClick={this.handleItemClick} as='a'>
                 Home
               </Menu.Item>
-    
-              <Menu.Item name='Password manager' active={activeItem === 'Password manager'} onClick={this.handleItemClick} as='a'>
+  
+              <Menu.Item name='/passwords' active={activeItem === '/passwords'} onClick={this.handleItemClick} as='a'>
                 Password manager
               </Menu.Item>
     
@@ -114,7 +113,9 @@ const Main = inject("rootStore") ( observer(
                 </Menu.Item>
               </Menu.Menu>
             </Menu>
-            {this.props.children}
+            <div style={{minHeight: '100vh'}}>
+              {this.props.children}
+            </div>
           </div>
         );
       } else {

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(
-      <div>
-        <Menu>
-          <div style={{minHeight: '100vh'}}>
-            <Container className={this.classes.mainContainer}>
-              <Segment>
-                awdawd
-              </Segment>
-            </Container>
-          </div>
+      <Router history={history}>
+        <Menu handleItemClick={this.handleItemClick}>
+          <Container className={this.classes.mainContainer}>
+            <Segment>
+              <Switch>
+                <Route exact path="/" component={Home} />
+                <Route path="/passwords" component={PasswordManager} />
+              </Switch>
+            </Segment>
+          </Container>
         </Menu>
-      </div>
+      </Router>
     );
   }
 

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(
+      <div>
+        Home
+      </div>
+    );
+  }
+
+
+  getStyles() {
+    return {
+
+    }
+  }
+}
+
+export default Home;

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(
+      <div>
+        PasswordManager
+      </div>
+    );
+  }
+
+
+  getStyles() {
+    return {
+
+    }
+  }
+}
+
+export default PasswordManager;