--- a/client/src/components/Navbar.js	Thu Jun 29 12:06:48 2017 +0200
+++ b/client/src/components/Navbar.js	Thu Jun 29 17:02:21 2017 +0200
@@ -4,33 +4,26 @@
 import { withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 // import logo from './logo.svg';
-import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
+import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap';
 import * as authActions from '../actions/authActions';
 
-const LoginNav = ({isAuthenticated, currentUser, history, authActions}) => {
+const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {
 
   const onClickSettings = (e) => {
     e.preventDefault();
     history.push('/settings');
   }
 
-  const onClickLogout = (e) => {
-    e.preventDefault();
-    authActions.logout();
-    history.push('/');
-  }
-
   const onClickLogin = (e) => {
     e.preventDefault();
     history.push('/login');
   }
 
-
   if (isAuthenticated) {
     return (
       <NavDropdown title={ currentUser.get('username') } id="user-dropdown">
         <MenuItem onClick={onClickSettings}>Settings</MenuItem>
-        <MenuItem onClick={onClickLogout}>Logout</MenuItem>
+        <MenuItem onClick={onLogout}>Logout</MenuItem>
       </NavDropdown>
     );
   }
@@ -49,11 +42,47 @@
 
 class AppNavbar extends Component {
 
+  state = {
+    showModal: false
+  }
+
+  closeModal = () => {
+    this.setState({ showModal: false });
+  }
+
   onClickHome = (e) => {
     e.preventDefault();
     this.props.history.push('/');
   }
 
+  isOutboxEmpty = () => {
+    return this.props.offline.outbox.length === 0;
+  }
+
+  onClickLogout = (e) => {
+    e.preventDefault();
+    const isOutboxEmpty = this.isOutboxEmpty();
+    if (isOutboxEmpty) {
+      this.logout();
+    } else {
+      this.setState({ showModal: true })
+    }
+  }
+
+  confirmLogout = () => {
+    const isOutboxEmpty = this.isOutboxEmpty();
+    if (!isOutboxEmpty) {
+      this.props.authActions.purgeOutbox();
+    }
+    this.logout();
+    this.closeModal();
+  }
+
+  logout = () => {
+    this.props.authActions.logout();
+    this.props.history.push('/');
+  }
+
   onClickSessions = (e) => {
     e.preventDefault();
     this.props.history.push('/sessions');
@@ -74,9 +103,22 @@
           </Nav>
           <Nav pullRight>
             <Online {...this.props} />
-            <LoginNav {...this.props} />
+            <LoginNav {...this.props} onLogout={this.onClickLogout} />
           </Nav>
         </Navbar.Collapse>
+        <Modal show={this.state.showModal} onHide={this.closeModal}>
+          <Modal.Body>
+            <p className="text-center">
+              Some data is not synchronized with server.
+              <br />
+              If you continue, it will be lost.
+            </p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button bsStyle="primary" onClick={this.confirmLogout}>Confirm</Button>
+            <Button onClick={this.closeModal}>Close</Button>
+          </Modal.Footer>
+        </Modal>
       </Navbar>
     );
   }