added sidebar (wip) + begin integration of thread (chat)

src/component/Sidebar/WorkspaceListItem.jsx

+import React from 'react'
+// import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+const WorkspaceListItem = props => {
+  const handleClickTitle = () => {
+    props.onClickTitle()
+    const subMenuElement = document.getElementById(`sidebarSubMenu_${props.number}`)
+
+    if (props.isOpen) {
+      subMenuElement.style.height = '0px'
+    } else {
+      subMenuElement.style.height = 'auto'
+      const autoHeight = subMenuElement.offsetHeight + 'px'
+
+      subMenuElement.style.height = '0px'
+      // the setTimeout ensure that the line bellow is executed right after previous has ended
+      setTimeout(() => { subMenuElement.style.height = autoHeight }, 1)
+    }
+  }
+
+  const pad = number => {
+    number = number.toString()
+    return number.length < 2 ? pad('0' + number, 2) : number
+  }
+
+  return (
+    <li
+      className='sidebar__navigation__workspace__item nav-item dropdown'
+      onClick={handleClickTitle}
+    >
+      <div className='sidebar__navigation__workspace__item__number'>
+        {pad(props.number)}
+      </div>
+
+      <div className='sidebar__navigation__workspace__item__name' title={props.name}>
+        {props.name}
+      </div>
+
+      <div className='sidebar__navigation__workspace__item__icon'>
+        <i className='fa fa-chevron-down' />
+      </div>
+
+      <ul
+        className='sidebar__navigation__workspace__item__submenu'
+        id={`sidebarSubMenu_${props.number}`}
+      >
+        <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+          <div
+            className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+            role='button'
+            data-toggle='dropdown'
+            aria-haspopup='true'
+            aria-expanded='false'
+          >
+            <div className='dropdown__icon'>
+              <i className='fa fa-th' />
+            </div>
+
+            <div className='dropdown__title' id='navbarDropdown'>
+              <div className='dropdown__title__text'>
+                Tous les fichiers
+              </div>
+            </div>
+          </div>
+
+          {/*
+          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Archivés
+              </div>
+            </div>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Supprimés
+              </div>
+            </div>
+          </div>
+          */}
+
+        </li>
+
+        <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+          <div
+            className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+            role='button'
+            data-toggle='dropdown'
+            aria-haspopup='true'
+            aria-expanded='false'
+          >
+            <div className='dropdown__icon'>
+              <i className='fa fa-signal dashboard-color' />
+            </div>
+
+            <div className='dropdown__title' id='navbarDropdown'>
+              <div className='dropdown__title__text'>
+                Tableau de bord
+              </div>
+            </div>
+          </div>
+        </li>
+
+        <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+          <div
+            className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+            role='button'
+            data-toggle='dropdown'
+            aria-haspopup='true'
+            aria-expanded='false'
+          >
+            <div className='dropdown__icon'>
+              <i className='fa fa-list-ul task-color' />
+            </div>
+
+            <div className='dropdown__title' id='navbarDropdown'>
+              <div className='dropdown__title__text'>
+                Liste de tâches
+              </div>
+            </div>
+          </div>
+        </li>
+
+        <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+          <div
+            className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+            role='button'
+            data-toggle='dropdown'
+            aria-haspopup='true'
+            aria-expanded='false'
+          >
+            <div className='dropdown__icon'>
+              <i className='fa fa-folder-o docandfile-color' />
+            </div>
+
+            <div className='dropdown__title' id='navbarDropdown'>
+              <div className='dropdown__title__text'>
+                Documents & fichiers
+              </div>
+            </div>
+          </div>
+        </li>
+
+        <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+          <div
+            className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+            role='button'
+            data-toggle='dropdown'
+            aria-haspopup='true'
+            aria-expanded='false'
+          >
+            <div className='dropdown__icon'>
+              <i className='fa fa-comments talk-color' />
+            </div>
+
+            <div className='dropdown__title' id='navbarDropdown'>
+              <div className='dropdown__title__text'>
+                Discussions
+              </div>
+            </div>
+          </div>
+        </li>
+
+        <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+          <div
+            className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+            role='button'
+            data-toggle='dropdown'
+            aria-haspopup='true'
+            aria-expanded='false'
+          >
+            <div className='dropdown__icon'>
+              <i className='fa fa-calendar calendar-color' />
+            </div>
+
+            <div className='dropdown__title' id='navbarDropdown'>
+              <div className='dropdown__title__text'>
+                Calendrier
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </li>
+  )
+}
+
+export default WorkspaceListItem
+
+WorkspaceListItem.propTypes = {
+  number: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  onClickTitle: PropTypes.func,
+  isOpen: PropTypes.bool
+}
+
+WorkspaceListItem.defaultProps = {
+  onClickTitle: () => {},
+  isOpen: false
+}

src/container/Sidebar.jsx

 import React from 'react'
 import {connect} from 'react-redux'
+import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
 
 class Sidebar extends React.Component {
-  // constructor (props) {
-  //   super(props)
-  //   this.state = {
-  //     inputLogin: '',
-  //     inputPassword: ''
-  //   }
-  // }
+  constructor (props) {
+    super(props)
+    this.state = {
+      firstWsOpen: false
+    }
+  }
 
-  // <div className='sidebar-expandbar'>
-  //   <i className='fa fa-minus-square-o sidebar-expandbar__icon' />
-  // </div>
+  handleClickWorkspace = wsId => {
+    // console.log('sidebar handleClickWs')
+    this.setState(prev => ({firstWsOpen: !prev.firstWsOpen})) // delete this, purpose is only to test transition on click
+    // console.log('sidebar firstwsOpen toggled')
+  }
 
   render () {
+    // <div className='sidebar-expandbar'>
+    //   <i className='fa fa-minus-square-o sidebar-expandbar__icon' />
+    // </div>
     return (
       <div className='sidebar d-none d-lg-table-cell'>
         <nav className='sidebar__navigation navbar navbar-light'>
-          <div className='sidebar__navigation__menu'>
-            <ul className='sidebar__navigation__menu__workspace navbar-nav collapse navbar-collapse'>
-              <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
-                <div className='sidebar__navigation__menu__workspace__item__number'>
-                  01
-                </div>
-
-                <div className='sidebar__navigation__menu__workspace__item__name'>
-                  Workspace 1
-                </div>
-
-                <div className='sidebar__navigation__menu__workspace__item__icon'>
-                  <i className='fa fa-chevron-down' />
-                </div>
-                <ul className='sidebar__navigation__menu__workspace__item__submenu'>
-                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-                    <div
-                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
-                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                      <div className='dropdown__icon'>
-                        <i className='fa fa-th' />
-                      </div>
-                      <div className='dropdown__title' id='navbarDropdown'>
-                        <div className='dropdown__title__text'>
-                          Tous les fichiers
-                        </div>
-                      </div>
-                    </div>
-                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Archivés
-                        </div>
-                      </div>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Supprimés
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-
-                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-                    <div
-                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
-                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                      <div className='dropdown__icon'>
-                        <i className='fa fa-signal dashboard-color' />
-                      </div>
-                      <div className='dropdown__title' id='navbarDropdown'>
-                        <div className='dropdown__title__text'>
-                          Tableau de bord
-                        </div>
-                      </div>
-                    </div>
-                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Archivés
-                        </div>
-                      </div>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Supprimés
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-
-                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-                    <div
-                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
-                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                      <div className='dropdown__icon'>
-                        <i className='fa fa-list-ul task-color' />
-                      </div>
-                      <div className='dropdown__title'>
-                        <div className='dropdown__title__text'>
-                          Liste des tâches
-                        </div>
-                      </div>
-                    </div>
-                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Archivés
-                        </div>
-                      </div>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Supprimés
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-
-                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-                    <div
-                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
-                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                      <div className='dropdown__icon'>
-                        <i className='fa fa-folder-o docandfile-color' />
-                      </div>
-                      <div className='dropdown__title'>
-                        <div className='dropdown__title__text'>
-                          Documents & fichiers
-                        </div>
-                      </div>
-                    </div>
-                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Archivés
-                        </div>
-                      </div>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Supprimés
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-
-                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-                    <div
-                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
-                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                      <div className='dropdown__icon'>
-                        <i className='fa fa-comments talk-color' />
-                      </div>
-                      <div className='dropdown__title'>
-                        <div className='dropdown__title__text'>
-                          Discussions
-                        </div>
-                      </div>
-                    </div>
-                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Archivés
-                        </div>
-                      </div>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Supprimés
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-
-                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-                    <div
-                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
-                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                      <div className='dropdown__icon'>
-                        <i className='fa fa-calendar calendar-color' />
-                      </div>
-                      <div className='dropdown__title'>
-                        <div className='dropdown__title__text'>
-                          Calendrier
-                        </div>
-                      </div>
-                    </div>
-                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Archivés
-                        </div>
-                      </div>
-                      <div className='dropdown__subdropdown__item dropdown-item'>
-                        <div className='dropdown__subdropdown__item__iconfile alignname'>
-                          <i className='fa fa-file-text-o' />
-                        </div>
-                        <div className='dropdown__subdropdown__item__textfile alignname'>
-                          Documents Supprimés
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-
-              <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
-                <div className='sidebar__navigation__menu__workspace__item__number'>
-                  02
-                </div>
-                <div className='sidebar__navigation__menu__workspace__item__name'>
-                  Workspace 2
-                </div>
-
-                <div className='sidebar__navigation__menu__workspace__item__icon'>
-                  <i className='fa fa-chevron-down' />
-                </div>
-              </li>
-
-              <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
-                <div className='sidebar__navigation__menu__workspace__item__number'>
-                  03
-                </div>
-                <div className='sidebar__navigation__menu__workspace__item__name'>
-                  Workspace 3
-                </div>
-
-                <div className='sidebar__navigation__menu__workspace__item__icon'>
-                  <i className='fa fa-chevron-down' />
-                </div>
-              </li>
-            </ul>
-          </div>
+          <ul className='sidebar__navigation__workspace navbar-nav collapse navbar-collapse'>
+            <WorkspaceListItem
+              number={1}
+              name='workspace 1 sympa'
+              isOpen={this.state.firstWsOpen}
+              onClickTitle={() => this.handleClickWorkspace(1)}
+            />
+
+            <li className='sidebar__navigation__workspace__item nav-item dropdown'>
+              <div className='sidebar__navigation__workspace__item__number'>
+                02
+              </div>
+              <div className='sidebar__navigation__workspace__item__name'>
+                Workspace 2
+              </div>
+
+              <div className='sidebar__navigation__workspace__item__icon'>
+                <i className='fa fa-chevron-down' />
+              </div>
+            </li>
+
+            <li className='sidebar__navigation__workspace__item nav-item dropdown'>
+              <div className='sidebar__navigation__workspace__item__number'>
+                03
+              </div>
+              <div className='sidebar__navigation__workspace__item__name'>
+                Workspace 3
+              </div>
+
+              <div className='sidebar__navigation__workspace__item__icon'>
+                <i className='fa fa-chevron-down' />
+              </div>
+            </li>
+          </ul>
         </nav>
 
         <div className='sidebar__btnnewworkspace'>

src/container/Chat.jsx → src/container/Thread.jsx

 import classnames from 'classnames'
 import imgProfil from '../img/imgProfil.png'
 
-class Chat extends Component {
+class Thread extends Component {
   render () {
     return (
-      <div className={classnames('wsFileChat wsFileGeneric', {'visible': this.props.visible})}>
-        <div className='wsFileChat__header wsFileGeneric__header'>
+      <div className={classnames('wsFileThread wsFileGeneric', {'visible': this.props.visible})}>
+        <div className='wsFileThread__header wsFileGeneric__header'>
           <div className='wsFileGeneric__header__icon'>
             <i className='fa fa-comments' />
           </div>
+
           <div className='wsFileGeneric__header__text mr-auto'>
             Discussions à propos du nouveau système de facturation
           </div>
+
           <div className='wsFileGeneric__header__close'>
             <i className='fa fa-times' />
           </div>
         </div>
+
         <div className='wsFileGeneric__option'>
           <div className='wsFileGeneric__option__menu'>
             <div className='wsFileGeneric__option__menu__action'>
               <i className='fa fa-pencil' />
             </div>
+
             <div className='wsFileGeneric__option__menu__action'>
               <i className='fa fa-archive' />
             </div>
+
             <div className='wsFileGeneric__option__menu__action'>
               <i className='fa fa-trash' />
             </div>
           </div>
         </div>
-        <div className='wsFileChat__wrapper wsFileGeneric__wrapper'>
-          <ul className='wsFileChat__messagelist wsFileGeneric__messagelist'>
 
-            <li className='wsFileChat__messagelist__item wsFileGeneric__messagelist__item sended'>
+        <div className='wsFileThread__wrapper wsFileGeneric__wrapper'>
+          <ul className='wsFileThread__messagelist wsFileGeneric__messagelist'>
+
+            <li className='wsFileThread__messagelist__item wsFileGeneric__messagelist__item sended'>
               <div className='wsFileGeneric__messagelist__item__avatar'>
                 <img src={imgProfil} alt='avatar' />
               </div>
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h45
               </div>
-              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
               </div>
             </li>
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h47
               </div>
-              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
                 Proident esse laboris in sed officia exercitation ut anim ea.
                 Proident esse laboris in sed officia exercitation ut anim ea.
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h45
               </div>
-              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
               </div>
             </li>
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h45
               </div>
-              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
               </div>
             </li>
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h47
               </div>
-              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
                 Proident esse laboris in sed officia exercitation ut anim ea.
                 Proident esse laboris in sed officia exercitation ut anim ea.
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h47
               </div>
-              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
                 Proident esse laboris in sed officia exercitation ut anim ea.
                 Proident esse laboris in sed officia exercitation ut anim ea.
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h45
               </div>
-              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
               </div>
             </li>
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h47
               </div>
-              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
                 Proident esse laboris in sed officia exercitation ut anim ea.
                 Proident esse laboris in sed officia exercitation ut anim ea.
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h45
               </div>
-              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+              <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
               </div>
             </li>
-
           </ul>
-          <form className='wsFileChat__texteditor wsFileGeneric__texteditor'>
-            <div className='wsFileChat__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
-              <input type='text' className='wsFileChat__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
-              <div className='wsFileChat__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
+
+          <form className='wsFileThread__texteditor wsFileGeneric__texteditor'>
+            <div className='wsFileThread__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
+              <input type='text' className='wsFileThread__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
+
+              <div className='wsFileThread__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
                 <i className='fa fa-font' />
               </div>
             </div>
+
             <div className='wsFileGeneric__texteditor__wysiwyg d-none d-xl-block'>
               <textarea />
             </div>
-            <div className='wsFileChat__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
-              <button type='submit' className='wsFileChat__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>Envoyer
-                <div className='wsFileChat__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
+
+            <div className='wsFileThread__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
+              <button type='submit' className='wsFileThread__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>
+                Envoyer
+                <div className='wsFileThread__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
                   <i className='fa fa-paper-plane-o' />
                 </div>
               </button>
   }
 }
 
-export default Chat
+export default Thread

src/container/Workspace.jsx

 import Folder from '../component/Workspace/Folder.jsx'
 import FileItem from '../component/Workspace/FileItem.jsx'
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
-// import Chat from './Chat.jsx'
+import Thread from './Thread.jsx'
 // import PageText from './PageText.jsx'
 import PageWrapper from '../component/common/layout/PageWrapper.jsx'
 import PageTitle from '../component/common/layout/PageTitle.jsx'
             <Folder>
               <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' />
               <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' />
-              <FileItem type='task' name='Editer la facture pour Phillipe GIRARD' status='check' />
+              <FileItem type='task' name='Editer la facture pour Phillipe GIRARD' status='validated' />
 
               <Folder>
-                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='nouse' />
-                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='check' />
+                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='canceled' />
+                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='validated' />
               </Folder>
 
               <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' />
-              <FileItem type='file' name='Facture 57840 - Jean-michel Chevalier - 04/09/2017' status='check' />
+              <FileItem type='file' name='Facture 57840 - Jean-michel Chevalier - 04/09/2017' status='validated' />
               <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' />
 
               <Folder>
-                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='nouse' />
-                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='check' />
+                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='canceled' />
+                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='validated' />
               </Folder>
             </Folder>
           </div>
 
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
+          <Thread visible={this.state.activeFileType === 'chat'} />
           {/*
-          <Chat visible={this.state.activeFileType === 'chat'} />
           <PageText visible={this.state.activeFileType === 'file'} />
           */}
         </PageContent>

src/css/Generic.styl

     cursor pointer
     .setting__link
       padding 5px 65px 5px 10px
+
+
+.wsFileGeneric
+  position fixed
+  top 85px
+  right 0
+  border 1px solid grey
+  height 100%
+  background-color light-grey
+  box-shadow shadow-page
+  visibility hidden
+  &.visible
+    visibility visible
+  &__header
+    display flex
+    align-items center
+    padding 15px
+    height 64px
+    &__icon
+      margin-right 15px
+      font-size 22px
+      color white
+    &__title
+      margin-right 15px
+      color white
+      text-overflow ellipsis
+      overflow hidden
+      white-space nowrap
+    &__close
+      border 1px solid white
+      border-radius 5px
+      padding 2px 5px
+      cursor pointer
+      & > i
+        color white
+        font-size 20px
+  &__option
+    border-bottom 1px solid grey
+    padding 15px
+    height 58px
+    background-color off-white
+    & > i
+      vertical-align middle
+      margin-right 15px
+      font-size 25px
+      cursor pointer
+    &__menu
+      display inline-block
+      vertical-align middle
+      &__action
+        display inline-block
+        margin-right 10px
+        font-size 18px
+        cursor pointer
+  &__wrapper
+    display flex
+    flex-direction column
+  &__messagelist
+    margin-bottom 0
+    flex-grow 1
+    border-bottom 1px solid grey
+    overflow-Y auto
+    list-style none
+    &__item
+      &__avatar
+        position relative
+        top 43px
+        left -25px
+        width 45px
+        height 45px
+      &__createhour
+        margin-left 30px
+        opacity 0.7
+        font-size 14px
+      &__content
+        border 1px solid grey
+        border-radius 5px
+        padding 15px
+        background-color off-white
+        font-size 15px
+        z-index -1
+  &__texteditor
+    padding 2px
+    &__simpletext
+      display none
+      width 70%
+      margin-right 35px
+      &__icon
+        cursor pointer
+    &__wysiwyg
+      display block
+      & > textarea
+        width 100%
+        height 130px
+    &__submit
+      margin 10px 0
+      &__btn
+        display flex
+        background-color transparent
+        &__icon
+          margin-left 10px
+
+.sended
+  .wsFileGeneric__messagelist__item__content
+    margin-right 25%
+
+.received
+  .wsFileGeneric__messagelist__item
+    &__avatar
+      left 93%
+    &__createhour
+      text-align right
+      margin-right 50px
+    &__content
+      margin-left 25%
+      color white

src/css/Sidebar.styl

       padding 15px 30px
   &__navigation
     padding 0
-    &__menu
-      &__workspace
-        flex-direction column
-        &__item
-          position relative
-          margin-top 2px
-          width sidebar-width
-          background-color blue
-          cursor pointer
-          &__number
-            display inline-block
-            padding 5px 0 5px 0
-            width 50px
-            font-size 20px
-            letter-spacing 2px
-            text-align center
-            background-color light-blue
-          &__name
-            display inline-block
-            vertical-align top
-            padding 5px 5px
-            width 220px
-            font-size 20px
-            color white
-            white-space nowrap
-            overflow hidden
-            text-overflow ellipsis
-          &__icon
-            display inline-block
-            color white
-          &__submenu
-            margin-bottom 0
-            padding-left 0
-            list-style none
-            background-color opacity-blue
-            &__dropdown
-              border-top 1px solid dark-blue
-              &:hover
-                background-color light-blue
-              &__showdropdown
-                padding 10px 0
-              .dropdown__icon
+    &__workspace
+      flex-direction column
+      &__item
+        position relative
+        margin-top 2px
+        width sidebar-width
+        background-color blue
+        cursor pointer
+        &__number
+          display inline-block
+          padding 5px 0 5px 0
+          width 50px
+          font-size 20px
+          letter-spacing 2px
+          text-align center
+          background-color light-blue
+        &__name
+          display inline-block
+          vertical-align top
+          padding 5px 5px
+          width 220px
+          font-size 20px
+          color white
+          white-space nowrap
+          overflow hidden
+          text-overflow ellipsis
+        &__icon
+          display inline-block
+          color white
+        &__submenu
+          margin-bottom 0
+          padding-left 0
+          height 0 // height is handled is js
+          list-style none
+          background-color opacity-blue
+          overflow hidden
+          transition height 0.5s
+          &__dropdown
+            border-top 1px solid dark-blue
+            &:hover
+              background-color light-blue
+            &__showdropdown
+              padding 10px 0
+            .dropdown__icon
+              display inline-block
+              margin 0 35px 0 15px
+              font-size 20px
+            .dropdown__title
+              position relative
+              display inline-block
+              font-size 18px
+              font-weight 400
+              color dark-grey
+              cursor pointer
+              &::after //bootstrap override
+                position absolute
+                top 10px
+                left 100%
+              &__text
                 display inline-block
-                margin 0 35px 0 15px
-                font-size 20px
-              .dropdown__title
-                position relative
+                width 200px
+            .dropdown__subdropdown
+              border-radius 0
+              padding 0
+              .alignname
                 display inline-block
                 font-size 18px
-                font-weight 400
-                color dark-grey
+              &__item
                 cursor pointer
-                &::after //bootstrap override
-                  position absolute
-                  top 10px
-                  left 100%
-                &__text
-                  display inline-block
-                  width 200px
-              .dropdown__subdropdown
-                border-radius 0
-                padding 0
-                .alignname
-                  display inline-block
-                  font-size 18px
-                &__item
-                  cursor pointer
-                  border-top 1px solid dark-blue
-                  padding 13px 0
-                  &__iconfile
-                    padding-left 18px
-                  &__textfile
-                    margin-left 38px
+                border-top 1px solid dark-blue
+                padding 13px 0
+                &__iconfile
+                  padding-left 18px
+                &__textfile
+                  margin-left 38px

src/css/Thread.styl

+.wsFileThread
+  width 550px
+  &__header
+    color white
+    background-color blue
+  &__wrapper
+    height calc(100% - 209px) /* height of chat__header + height of option + top of chat */
+  &__messagelist
+    padding 15px 35px
+    &__item
+      &__content
+        color dark-blue
+  &__texteditor
+    &__simpletext
+      &__input
+        &:focus
+          color dark-blue
+          border-color dark-blue
+    &__submit
+      &__btn
+        color dark-blue
+
+.received
+  .wsFileThread__messagelist__item__content
+      background-color dark-blue
+
+@media (min-width: max-xs) and (max-width: max-lg)
+  .wsFileThread
+    &__texteditor
+      padding 7px
+      &__simpletext
+        display inline-flex
+      &__submit
+        display inline-flex
+        width 80px
+
+@media (min-width: min-sm) and (max-width: max-sm)
+  .wsFileThread
+    top 69px
+
+@media (max-width: max-xs)
+  .wsFileThread
+    top 69px
+    width 100%
+    box-shadow none
+    z-index 1
+    &__texteditor
+      padding 7px
+      &__simpletext
+        display inline-flex
+        margin-right 15px
+        width 62%
+      &__submit
+        display inline-flex
+        width 80px

src/css/index.styl

 @import 'FileItem'
 @import 'FileItemHeader'
 @import 'Folder'
+
+@import 'Thread'