client/src/components/NavbarGroup.js
changeset 151 57d63a248f0d
parent 149 298d0373812e
child 154 a28361bda28c
--- a/client/src/components/NavbarGroup.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/NavbarGroup.js	Fri Aug 31 15:14:18 2018 +0200
@@ -35,6 +35,7 @@
     const {currentGroup, groups, onSelect} = this.props;
 
     const onClickGroup = (e) => {
+      e.preventDefault();
       onSelect(e.target.dataset.groupname);
       this.hideDropDown();
     }
@@ -42,20 +43,20 @@
     if (currentGroup) {
       const currentGroupName = currentGroup.get('name');
       return (
-        <li className={`nav-item dropdown navs ${this.state.showDropdown?'show':''}`}>
-          <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
+        <li className={`nav-item dropdown ${this.state.showDropdown?'show':''}`}>
+          <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
           { currentGroupName }
           &nbsp;<span className="caret"></span>
           </a>
-          <ul className={`dropdown-menu ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
+          <div id="group-menu-scroll-down" className={`dropdown-menu dropdown-menu-right bg-primary border-0 ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
           { groups && groups.map((group, key) => {
             const groupName = group.get('name');
             const className = (groupName === currentGroupName)?'active':null;
-              return <li key={key} className={className} onClick={onClickGroup}><a data-groupname={groupName}>{ groupName }</a></li>
+              return <a key={key} onClick={onClickGroup} className={`dropdown-item bg-primary text-secondary ${className}`} data-groupname={groupName}>{ groupName }</a>
             })
           }
-          <li onClick={onClickGroup} key="-1"><a data-groupname="__create_group__">Créer un groupe...</a></li>
-          </ul>
+          <button type="button "onClick={onClickGroup} key="-1" className="dropdown-item btn btn-secondary bg-secondary text-center text-primary create-group" data-groupname="__create_group__">Créer un groupe</button>
+          </div>
         </li>
       );
     } else {