diff -r a2e61192db50 -r fcce52a159bc client/src/components/Navbar.js
--- a/client/src/components/Navbar.js	Mon Aug 27 19:53:40 2018 +0200
+++ b/client/src/components/Navbar.js	Tue Aug 28 16:57:31 2018 +0200
@@ -6,44 +6,14 @@
 import { withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 // import logo from './logo.svg';
-import { NavDropdown, MenuItem } from 'react-bootstrap';
 import Modal from 'react-modal';
 import * as authActions from '../actions/authActions';
 import { forceSync } from '../actions/networkActions';
 import { groupSetCurrent } from '../actions/groupActions';
 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
-
-const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {
-
-  const onClickSettings = (e) => {
-    e.preventDefault();
-    history.push('/settings');
-  }
-
-  const onClickLogin = (e) => {
-    e.preventDefault();
-    history.push('/login');
-  }
-
-  if (isAuthenticated) {
-    return (
-          <NavDropdown className="navs" title={ currentUser.get('username') }>
-              <li>
-                <a className="user-dropdown"  href="#settings" onClick={onClickSettings}>Paramètres</a>
-              </li>
-              <li>
-                <a className="user-dropdown"  href="#logout" onClick={onLogout}>Se déconnecter</a>
-              </li>
-          </NavDropdown>
-    );
-  }
-  return (
-      <li>
-      <a className="navs" onClick={onClickLogin} href="/login">Se connecter</a>
-      </li>
-  );
-}
+import NavbarLogin from './NavbarLogin';
+import NavbarGroup from './NavbarGroup';
 
 const Online = ({ online }) => {
   return (
@@ -86,27 +56,6 @@
 }
 
 
-const GroupStatus = ({currentGroup, groups, onSelect}) => {
-
-  if(currentGroup) {
-    const currentGroupName = currentGroup.get('name');
-    return (
-      <NavDropdown className="navs" title={currentGroupName} onSelect={onSelect}>
-        { groups && groups.map((group, key) => {
-            const groupName = group.get('name');
-            const className = (groupName === currentGroupName)?'active':null;
-          return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
-          }
-        )}
-        <MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem>
-      </NavDropdown>
-    )
-  } else {
-    return null;
-  }
-
-}
-
 class AppNavbar extends Component {
   constructor(props) {
     super(props);
@@ -198,10 +147,10 @@
               </li>
             </ul>
             <ul className="nav navbar-nav navbar-right">
-              <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
+              <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
               <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
               <Online {...this.props} />
-              <LoginNav {...this.props} onLogout={this.onClickLogout} />
+              <NavbarLogin {...this.props} onLogout={this.onClickLogout} />
             </ul>
           </div>
           <Modal