Merge pull request #12 from ZBoxApp/menu

Fix menu links to show loading progress bar

src/components/logged_in.jsx

@@ -13,7 +13,7 @@ export default class LoggedIn extends React.Component {
             <div>
                 <LoadingScreen/>
                 <Header/>
-                <Sidebar/>
+                <Sidebar location={this.props.location}/>
                 <div className='wrapper'>
                     {this.props.children}
                 </div>
@@ -29,5 +29,6 @@ LoggedIn.propTypes = {
     children: React.PropTypes.oneOfType([
         React.PropTypes.arrayOf(React.PropTypes.element),
         React.PropTypes.element
-    ])
+    ]),
+    location: React.PropTypes.object.isRequired
 };

src/components/sidebar.jsx

@@ -39,7 +39,7 @@ export default class Sidebar extends React.Component {
                                 </span>
                             </div>
                         </div>
-                        <SidebarMenu/>
+                        <SidebarMenu location={this.props.location}/>
                     </div>
                 </aside>
             );
@@ -48,3 +48,7 @@ export default class Sidebar extends React.Component {
         return <div/>;
     }
 }
+
+Sidebar.propTypes = {
+    location: React.PropTypes.object.isRequired
+};

src/components/sidebar_menu.jsx

 // Copyright (c) 2016 ZBox, Spa. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import * as GlobalActions from '../action_creators/global_actions.jsx';
+
 import React from 'react';
-import {Link} from 'react-router';
+import {browserHistory} from 'react-router';
 
 export default class SidebarMenu extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleLink = this.handleLink.bind(this);
+    }
+    handleLink(e, path) {
+        e.preventDefault();
+        if (`/${this.props.location.pathname}` !== path) {
+            GlobalActions.emitEndLoading();
+            browserHistory.push(path);
+        }
+    }
     render() {
         return (
             <ul
@@ -12,24 +25,36 @@ export default class SidebarMenu extends React.Component {
                 id='side-menu'
             >
                 <li id='sidebar-dashboards'>
-                    <Link to='/dashboards'>
+                    <a
+                        href='#'
+                        onClick={(e) => this.handleLink(e, '/dashboards')}
+                    >
                         <span className='nav-label'>{'dashboards'}</span>
-                    </Link>
+                    </a>
                 </li>
                 <li id='sidebar-accounts'>
-                    <Link to='/accounts'>
+                    <a
+                        href='#'
+                        onClick={(e) => this.handleLink(e, '/accounts')}
+                    >
                         <span className='nav-label'>{'cuentas'}</span>
-                    </Link>
+                    </a>
                 </li>
                 <li ref='sidebar-domains'>
-                    <Link to='/domains'>
+                    <a
+                        href='#'
+                        onClick={(e) => this.handleLink(e, '/domains')}
+                    >
                         <span className='nav-label'>{'dominios'}</span>
-                    </Link>
+                    </a>
                 </li>
                 <li ref='sidebar-mailboxes'>
-                    <Link to='/mailboxes'>
+                    <a
+                        href='#'
+                        onClick={(e) => this.handleLink(e, '/mailboxes')}
+                    >
                         <span className='nav-label'>{'casillas'}</span>
-                    </Link>
+                    </a>
                 </li>
                 <li>
                     <a
@@ -44,3 +69,7 @@ export default class SidebarMenu extends React.Component {
         );
     }
 }
+
+SidebarMenu.propTypes = {
+    location: React.PropTypes.object.isRequired
+};

src/sass/components/_various.scss

@@ -384,7 +384,7 @@
   }
 
   > li > a:focus {
-    background: $white;
+    background: $transparent;
   }
 }