client/src/components/Navbar.js
changeset 154 a28361bda28c
parent 151 57d63a248f0d
child 155 e55ae84508bf
equal deleted inserted replaced
153:de8d18c8251d 154:a28361bda28c
   135   render() {
   135   render() {
   136     return (
   136     return (
   137       <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
   137       <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
   138         <div className="container-fluid">
   138         <div className="container-fluid">
   139         <div className="navbar-header">
   139         <div className="navbar-header">
   140         <a id="brand" className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
   140         <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
   141         <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   141         <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   142               <span className="navbar-toggler-icon"></span>
   142               <span className="navbar-toggler-icon"></span>
   143               <span className="icon-bar"></span>
   143               <span className="icon-bar"></span>
   144               <span className="icon-bar"></span>
   144               <span className="icon-bar"></span>
   145               <span className="icon-bar"></span>
   145               <span className="icon-bar"></span>
   151                 <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Accueil</a>
   151                 <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Accueil</a>
   152               </li>
   152               </li>
   153             </ul>
   153             </ul>
   154             <ul className="navbar-nav navbar-center">
   154             <ul className="navbar-nav navbar-center">
   155                 <li className="nav-item text-secondary">
   155                 <li className="nav-item text-secondary">
   156                   {/* <CreateSession history={this.props.history}/> */}
   156                   <CreateSession history={this.props.history}/>
   157                 </li>
   157                 </li>
   158             </ul>
   158             </ul>
   159             <ul className="nav navbar-nav ml-auto">
   159             <ul className="nav navbar-nav ml-auto">
   160               <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
   160               <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
   161               <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
   161               <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
   162               <Online {...this.props} />
   162               <Online {...this.props} />
   163               <NavbarLogin {...this.props} onLogout={this.onClickLogout} />
   163               <NavbarLogin {...this.props} onLogout={this.onClickLogout} />
   164             </ul>
   164             </ul>
   165           </div>
   165           </div>
   166           <Modal
   166           <Modal
   167           className="Modal__Bootstrap modal-dialog"
   167           className="Modal__Bootstrap modal-dialog mt-5 pt-5"
   168           // closeTimeoutMS={150}
   168           // closeTimeoutMS={150}
   169           isOpen={this.state.modalIsOpen}
   169           isOpen={this.state.modalIsOpen}
   170           onRequestClose={this.handleModalCloseRequest}
   170           onRequestClose={this.handleModalCloseRequest}
   171           >
   171           >
   172             <div id="logout-modal" className="modal-content text-center">
   172             <div id="logout-modal" className="modal-content">
   173               {/* <div className="modal-body"> */}
   173               <span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
   174               <button type="button" id="logout-close-modal-button" className="btn btn-default float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
   174               <div className="modal-body text-center">
   175               <span className="material-icons modal-warning">warning</span>
   175               <span className="material-icons modal-warning">warning</span>
   176                 <p className="modal-text">
   176                 <p className="modal-text">
   177                   Certaines données n'ont pas encore été sauvegardées.
   177                   Certaines données n'ont pas encore été sauvegardées.
   178                   <br />
   178                   <br />
   179                   Si vous continuez, elles seront perdues.
   179                   Si vous continuez, elles seront perdues.
   180                 </p>
   180                 </p>
   181               <div className="modal-footer">
   181               <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
   182               <button type="button" className="btn btn-primary text-secondary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
       
   183               </div>
   182               </div>
   184             </div>
   183             </div>
   185           </Modal>
   184           </Modal>
   186         </div>
   185         </div>
   187       </nav>
   186       </nav>
   188 
       
   189     );
   187     );
   190   }
   188   }
   191 }
   189 }
   192 
   190 
   193 AppNavbar.propTypes = {
   191 AppNavbar.propTypes = {