added sidebar sub menu + bugfix

src/action-creator.async.js

   updateUserData,
   setUserRole,
   WORKSPACE,
-  updateWorkspaceData,
+  setWorkspaceData,
   WORKSPACE_LIST,
   updateWorkspaceListData,
   APP_LIST,
-  setAppList
+  setAppList, setWorkspaceListIsOpenInSidebar
 } from './action-creator.sync.js'
 
 /*
 //   console.log('jsonResponseNoData', fetchResponseNoData)
 // }
 
-export const getWorkspaceList = userId => async dispatch => {
+export const getWorkspaceList = (userId, workspaceIdToOpen) => async dispatch => {
   const fetchGetWorkspaceList = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/user/${userId}/workspace`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: WORKSPACE_LIST,
     dispatch
   })
-  if (fetchGetWorkspaceList.status === 200) dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
+  if (fetchGetWorkspaceList.status === 200) {
+    dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
+    dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdToOpen, true))
+  }
 }
 
-export const getWorkspaceContent = workspaceId => async dispatch => {
+export const getWorkspaceContent = (workspaceId, filterStr) => async dispatch => {
   const fetchGetWorkspaceContent = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/workspace/${workspaceId}`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: WORKSPACE,
     dispatch
   })
-  if (fetchGetWorkspaceContent.status === 200) dispatch(updateWorkspaceData(fetchGetWorkspaceContent.json))
+  if (fetchGetWorkspaceContent.status === 200) dispatch(setWorkspaceData(fetchGetWorkspaceContent.json, filterStr))
 }
 
 export const getAppList = () => async dispatch => {

src/action-creator.sync.js

   ({ type: `Update/${USER_ROLE}/SubscriptionNotif`, workspaceId, subscriptionNotif })
 
 export const WORKSPACE = 'Workspace'
-export const updateWorkspaceData = workspace => ({ type: `Update/${WORKSPACE}`, workspace })
+export const setWorkspaceData = (workspace, filterStr = '') => ({ type: `Set/${WORKSPACE}`, workspace, filterStr })
+export const updateWorkspaceFilter = filterList => ({ type: `Update/${WORKSPACE}/Filter`, filterList })
 
 export const WORKSPACE_LIST = 'WorkspaceList'
 export const updateWorkspaceListData = workspaceList => ({ type: `Update/${WORKSPACE_LIST}`, workspaceList })
-export const setWorkspaceListisOpenInSidebar = (workspaceId, isOpenInSidebar) => ({ type: `Set/${WORKSPACE_LIST}/isOpenInSidebar`, workspaceId, isOpenInSidebar })
+export const setWorkspaceListIsOpenInSidebar = (workspaceId, isOpenInSidebar) => ({ type: `Set/${WORKSPACE_LIST}/isOpenInSidebar`, workspaceId, isOpenInSidebar })
 
 export const FILE_CONTENT = 'FileContent'
 export const setActiveFileContentActive = file => ({ type: `Set/${FILE_CONTENT}/Active`, file })

src/component/Sidebar/WorkspaceListItem.jsx

 import React from 'react'
-// import classnames from 'classnames'
+import classnames from 'classnames'
+import { translate } from 'react-i18next'
 import PropTypes from 'prop-types'
 import AnimateHeight from 'react-animate-height'
 
           </li>
 
           <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
-
             <div className='dropdown__icon'>
               <i className='fa fa-signal dashboard-color' />
             </div>
             </div>
           </li>
 
-          <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
-
-            <div className='dropdown__icon'>
-              <i className='fa fa-list-ul task-color' />
-            </div>
-
-            <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
-
-              <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='dropdown__icon'>
-              <i className='fa fa-folder-o docandfile-color' />
-            </div>
-
-            <div
-              className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'
-              aria-haspopup='true'
-              aria-expanded='false'
+          { Object.keys(props.app).map(a =>
+            <li
+              className={classnames('sidebar__navigation__workspace__item__submenu__dropdown', {'activeFilter': props.activeFilterList.includes(a)})}
+              onClick={() => props.onClickContentFilter(props.wsId, a)}
+              key={a}
             >
-
-              <div className='dropdown__title' id='navbarDropdown'>
-                <div className='dropdown__title__text'>
-                  Documents & fichiers
-                </div>
+              <div className='dropdown__icon'>
+                <i className={classnames(props.app[a].icon)} style={{backgroudColor: props.app[a].color}} />
               </div>
-            </div>
-          </li>
-
-          <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
-
-            <div className='dropdown__icon'>
-              <i className='fa fa-comments talk-color' />
-            </div>
 
-            <div
-              className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'
-              aria-haspopup='true'
-              aria-expanded='false'
-            >
+              <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
 
-              <div className='dropdown__title' id='navbarDropdown'>
-                <div className='dropdown__title__text'>
-                  Discussions
+                <div className='dropdown__title' id='navbarDropdown'>
+                  <div className='dropdown__title__text'>
+                    { props.app[a].label[props.lang.id] }
+                  </div>
                 </div>
               </div>
-            </div>
-          </li>
+            </li>
+          )}
 
           <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
 
               <i className='fa fa-calendar calendar-color' />
             </div>
 
-            <div
-              className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'
-              aria-haspopup='true'
-              aria-expanded='false'
-            >
-
-              <div className='dropdown__title' id='navbarDropdown'>
+            <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
+              <div className='dropdown__title'>
                 <div className='dropdown__title__text'>
                   Calendrier
                 </div>
   )
 }
 
-export default WorkspaceListItem
+export default translate()(WorkspaceListItem)
 
 WorkspaceListItem.propTypes = {
   number: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
+  app: PropTypes.object,
   onClickTitle: PropTypes.func,
   onClickAllContent: PropTypes.func,
   isOpenInSidebar: PropTypes.bool

src/container/Account.jsx

 import React from 'react'
 import { connect } from 'react-redux'
+import Sidebar from './Sidebar.jsx'
 import PageWrapper from '../component/common/layout/PageWrapper.jsx'
 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'
     })()
 
     return (
-      <PageWrapper customClass='account'>
-        <PageTitle
-          parentClass={'account'}
-          title={'Mon Compte'}
-        />
+      <div className='sidebarpagecontainer'>
+        <Sidebar />
 
-        <PageContent parentClass='account'>
-          <UserInfo user={this.props.user} />
+        <PageWrapper customClass='account'>
+          <PageTitle
+            parentClass={'account'}
+            title={'Mon Compte'}
+          />
+
+          <PageContent parentClass='account'>
+            <UserInfo user={this.props.user} />
 
-          <Delimiter customClass={'account__delimiter'} />
+            <Delimiter customClass={'account__delimiter'} />
 
-          <div className='account__userpreference'>
-            <MenuSubComponent subMenuList={this.state.subComponentMenu} onClickMenuItem={this.handleClickSubComponentMenuItem} />
+            <div className='account__userpreference'>
+              <MenuSubComponent subMenuList={this.state.subComponentMenu} onClickMenuItem={this.handleClickSubComponentMenuItem} />
 
-            <div className='account__userpreference__setting'>
-              { subComponent }
+              <div className='account__userpreference__setting'>
+                { subComponent }
+              </div>
             </div>
-          </div>
 
-        </PageContent>
-      </PageWrapper>
+          </PageContent>
+        </PageWrapper>
+      </div>
     )
   }
 }

src/container/Dashboard.jsx

 import React, { Component } from 'react'
+import Sidebar from './Sidebar.jsx'
 import listMemberBtn from '../img/listmemberbtn.png'
 import imgProfil from '../img/imgProfil.png'
 
 class Dashboard extends Component {
   render () {
     return (
-      <div className='dashboard'>
-        <div className='container-fluid nopadding'>
-          <div className='pageTitleGeneric'>
-            <div className='pageTitleGeneric__title dashboard__title'>
-              Dashboard
-            </div>
-          </div>
-
-          <div className='dashboard__wkswrapper'>
-            <div className='dashboard__workspace'>
-              <div className='dashboard__workspace__title'>
-                Nouvelle ligne directive sur le nouveau design de Tracim
-              </div>
-
-              <div className='dashboard__workspace__detail'>
-                Ut in et sit adipisicing mollit amet ut exercitation proident laborum duis occaecat eu aute qui ut.
-                Dolore veniam eu consectetur occaecat est elit dolor nulla est ut amet do reprehenderit eiusmod tempor.
+      <div className='sidebarpagecontainer'>
+        <Sidebar />
+
+        <div className='dashboard'>
+          <div className='container-fluid nopadding'>
+            <div className='pageTitleGeneric'>
+              <div className='pageTitleGeneric__title dashboard__title'>
+                Dashboard
               </div>
             </div>
-            <div className='dashboard__userstatut'>
 
-              <div className='dashboard__userstatut__role'>
-                <div className='dashboard__userstatut__role__text'>
-                  Hi ! Alexi, vous êtes actuellement
-                </div>
-                <div className='dashboard__userstatut__role__rank'>
-                  <div className='dashboard__userstatut__role__rank__icon'>
-                    <i className='fa fa-graduation-cap' />
-                  </div>
-                  <div className='dashboard__userstatut__role__rank__rolename'>
-                    Gestionnaire de projet
-                  </div>
+            <div className='dashboard__wkswrapper'>
+              <div className='dashboard__workspace'>
+                <div className='dashboard__workspace__title'>
+                  Nouvelle ligne directive sur le nouveau design de Tracim
                 </div>
-              </div>
 
-              <div className='dashboard__userstatut__notification'>
-                <div className='dashboard__userstatut__notification__text'>
-                  Vous êtes abonné(e) aux notifications de ce workspace
-                </div>
-                <div className='dashboard__userstatut__notification__btn btn btn-primary'>
-                  Changer de statut
+                <div className='dashboard__workspace__detail'>
+                  Ut in et sit adipisicing mollit amet ut exercitation proident laborum duis occaecat eu aute qui ut.
+                  Dolore veniam eu consectetur occaecat est elit dolor nulla est ut amet do reprehenderit eiusmod tempor.
                 </div>
+              </div>
+              <div className='dashboard__userstatut'>
 
-                <div className='dashboard__userstatut__notification__subscribe dropdown'>
-                  <button className='dashboard__userstatut__notification__subscribe__btn btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                    Abonné(e)
-                  </button>
-                  <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
-                    <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>Abonné(e)
+                <div className='dashboard__userstatut__role'>
+                  <div className='dashboard__userstatut__role__text'>
+                    Hi ! Alexi, vous êtes actuellement
+                  </div>
+                  <div className='dashboard__userstatut__role__rank'>
+                    <div className='dashboard__userstatut__role__rank__icon'>
+                      <i className='fa fa-graduation-cap' />
                     </div>
-                    <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>Non Abonné(e)
+                    <div className='dashboard__userstatut__role__rank__rolename'>
+                      Gestionnaire de projet
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-          </div>
 
-          <div className='dashboard__calltoaction'>
-            <div className='dashboard__calltoaction__button btnaction thread'>
-              <div className='dashboard__calltoaction__button__text'>
-                <div className='dashboard__calltoaction__button__text__icon'>
-                  <i className='fa fa-comments-o' />
-                </div>
-                <div className='dashboard__calltoaction__button__text__title'>
-                  Débuter une nouvelle discussion
-                </div>
-              </div>
-            </div>
+                <div className='dashboard__userstatut__notification'>
+                  <div className='dashboard__userstatut__notification__text'>
+                    Vous êtes abonné(e) aux notifications de ce workspace
+                  </div>
+                  <div className='dashboard__userstatut__notification__btn btn btn-primary'>
+                    Changer de statut
+                  </div>
 
-            <div className='dashboard__calltoaction__button btnaction writefile'>
-              <div className='dashboard__calltoaction__button__text'>
-                <div className='dashboard__calltoaction__button__text__icon'>
-                  <i className='fa fa-file-text-o' />
-                </div>
-                <div className='dashboard__calltoaction__button__text__title'>
-                  Rédiger un document
+                  <div className='dashboard__userstatut__notification__subscribe dropdown'>
+                    <button className='dashboard__userstatut__notification__subscribe__btn btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                      Abonné(e)
+                    </button>
+                    <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
+                      <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>Abonné(e)
+                      </div>
+                      <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>Non Abonné(e)
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div className='dashboard__calltoaction__button btnaction importfile'>
-              <div className='dashboard__calltoaction__button__text'>
-                <div className='dashboard__calltoaction__button__text__icon'>
-                  <i className='fa fa-paperclip' />
-                </div>
-                <div className='dashboard__calltoaction__button__text__title'>
-                  Importer un fichier
+            <div className='dashboard__calltoaction'>
+              <div className='dashboard__calltoaction__button btnaction thread'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-comments-o' />
+                  </div>
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    Débuter une nouvelle discussion
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <div className='dashboard__calltoaction__button btnaction calendar'>
-              <div className='dashboard__calltoaction__button__text'>
-                <div className='dashboard__calltoaction__button__text__icon'>
-                  <i className='fa fa-calendar' />
-                </div>
-                <div className='dashboard__calltoaction__button__text__title'>
-                  Voir le Calendrier
+              <div className='dashboard__calltoaction__button btnaction writefile'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-file-text-o' />
+                  </div>
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    Rédiger un document
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <div className='dashboard__calltoaction__button btnaction explore'>
-              <div className='dashboard__calltoaction__button__text'>
-                <div className='dashboard__calltoaction__button__text__icon'>
-                  <i className='fa fa-folder-open-o' />
-                </div>
-                <div className='dashboard__calltoaction__button__text__title'>
-                  Explorer le Workspace
+              <div className='dashboard__calltoaction__button btnaction importfile'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-paperclip' />
+                  </div>
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    Importer un fichier
+                  </div>
                 </div>
               </div>
-            </div>
-          </div>
-
-          <div className='dashboard__wksinfo'>
-            <div className='dashboard__activity'>
-              <div className='dashboard__activity__header'>
-                <div className='dashboard__activity__header__title subTitle'>
-                  Activité récente
-                </div>
 
-                <div className='dashboard__activity__header__allread btn btn-primary'>
-                  Tout marquer comme lu
-                </div>
-              </div>
-              <div className='dashboard__activity__wrapper'>
-                <div className='dashboard__activity__workspace'>
-                  <div className='dashboard__activity__workspace__icon'>
-                    <i className='fa fa-comments-o' />
+              <div className='dashboard__calltoaction__button btnaction calendar'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-calendar' />
                   </div>
-                  <div className='dashboard__activity__workspace__name'>
-                    <span>Workspace 1</span>
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    Voir le Calendrier
                   </div>
                 </div>
+              </div>
 
-                <div className='dashboard__activity__workspace'>
-                  <div className='dashboard__activity__workspace__icon'>
-                    <i className='fa fa-list-ul' />
+              <div className='dashboard__calltoaction__button btnaction explore'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-folder-open-o' />
                   </div>
-                  <div className='dashboard__activity__workspace__name'>
-                    Workspace 2
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    Explorer le Workspace
                   </div>
                 </div>
+              </div>
+            </div>
 
-                <div className='dashboard__activity__workspace'>
-                  <div className='dashboard__activity__workspace__icon'>
-                    <i className='fa fa-list-ul' />
+            <div className='dashboard__wksinfo'>
+              <div className='dashboard__activity'>
+                <div className='dashboard__activity__header'>
+                  <div className='dashboard__activity__header__title subTitle'>
+                    Activité récente
                   </div>
-                  <div className='dashboard__activity__workspace__name'>
-                    Workspace 3
+
+                  <div className='dashboard__activity__header__allread btn btn-primary'>
+                    Tout marquer comme lu
                   </div>
                 </div>
-
-                <div className='dashboard__activity__workspace'>
-                  <div className='dashboard__activity__workspace__icon'>
-                    <i className='fa fa-file-text-o' />
+                <div className='dashboard__activity__wrapper'>
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-comments-o' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      <span>Workspace 1</span>
+                    </div>
                   </div>
-                  <div className='dashboard__activity__workspace__name'>
-                    <span>Workspace 4</span>
+
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-list-ul' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      Workspace 2
+                    </div>
                   </div>
-                </div>
 
-                <div className='dashboard__activity__workspace'>
-                  <div className='dashboard__activity__workspace__icon'>
-                    <i className='fa fa-comments-o' />
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-list-ul' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      Workspace 3
+                    </div>
                   </div>
-                  <div className='dashboard__activity__workspace__name'>
-                    <span>Workspace 5</span>
+
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-file-text-o' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      <span>Workspace 4</span>
+                    </div>
                   </div>
-                </div>
 
-                <div className='dashboard__activity__workspace'>
-                  <div className='dashboard__activity__workspace__icon'>
-                    <i className='fa fa-file-text-o' />
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-comments-o' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      <span>Workspace 5</span>
+                    </div>
                   </div>
-                  <div className='dashboard__activity__workspace__name'>
-                    Workspace 6
+
+                  <div className='dashboard__activity__workspace'>
+                    <div className='dashboard__activity__workspace__icon'>
+                      <i className='fa fa-file-text-o' />
+                    </div>
+                    <div className='dashboard__activity__workspace__name'>
+                      Workspace 6
+                    </div>
                   </div>
-                </div>
 
-                <div className='dashboard__activity__more d-flex flex-row-reverse'>
-                  <div className='dashboard__activity__more__btn btn btn-primary'>
-                    Voir plus
+                  <div className='dashboard__activity__more d-flex flex-row-reverse'>
+                    <div className='dashboard__activity__more__btn btn btn-primary'>
+                      Voir plus
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
 
-            <div className='dashboard__memberlist'>
+              <div className='dashboard__memberlist'>
 
-              <div className='dashboard__memberlist__title subTitle'>
-                Liste des membres
-              </div>
+                <div className='dashboard__memberlist__title subTitle'>
+                  Liste des membres
+                </div>
 
-              <div className='dashboard__memberlist__wrapper'>
-                <ul className='dashboard__memberlist__list'>
-                  <li className='dashboard__memberlist__list__item'>
-                    <div className='dashboard__memberlist__list__item__avatar'>
-                      <img src={imgProfil} alt='avatar' />
-                    </div>
-                    <div className='dashboard__memberlist__list__item__info'>
-                      <div className='dashboard__memberlist__list__item__info__name'>
-                        Jean Dupont
+                <div className='dashboard__memberlist__wrapper'>
+                  <ul className='dashboard__memberlist__list'>
+                    <li className='dashboard__memberlist__list__item'>
+                      <div className='dashboard__memberlist__list__item__avatar'>
+                        <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info__role'>
-                        Responsable
+                      <div className='dashboard__memberlist__list__item__info'>
+                        <div className='dashboard__memberlist__list__item__info__name'>
+                          Jean Dupont
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info__role'>
+                          Responsable
+                        </div>
                       </div>
-                    </div>
-                  </li>
+                    </li>
 
-                  <li className='dashboard__memberlist__list__item'>
-                    <div className='dashboard__memberlist__list__item__avatar'>
-                      <img src={imgProfil} alt='avatar' />
-                    </div>
-                    <div className='dashboard__memberlist__list__item__info'>
-                      <div className='dashboard__memberlist__list__item__info__name'>
-                        Aldwin Vinel
+                    <li className='dashboard__memberlist__list__item'>
+                      <div className='dashboard__memberlist__list__item__avatar'>
+                        <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info__role'>
-                        lecteur
+                      <div className='dashboard__memberlist__list__item__info'>
+                        <div className='dashboard__memberlist__list__item__info__name'>
+                          Aldwin Vinel
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info__role'>
+                          lecteur
+                        </div>
                       </div>
-                    </div>
-                  </li>
+                    </li>
 
-                  <li className='dashboard__memberlist__list__item'>
-                    <div className='dashboard__memberlist__list__item__avatar'>
-                      <img src={imgProfil} alt='avatar' />
-                    </div>
-                    <div className='dashboard__memberlist__list__item__info'>
-                      <div className='dashboard__memberlist__list__item__info__name'>
-                        William Himme
+                    <li className='dashboard__memberlist__list__item'>
+                      <div className='dashboard__memberlist__list__item__avatar'>
+                        <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info__role'>
-                        contributeur
+                      <div className='dashboard__memberlist__list__item__info'>
+                        <div className='dashboard__memberlist__list__item__info__name'>
+                          William Himme
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info__role'>
+                          contributeur
+                        </div>
                       </div>
-                    </div>
-                  </li>
+                    </li>
 
-                  <li className='dashboard__memberlist__list__item'>
-                    <div className='dashboard__memberlist__list__item__avatar'>
-                      <img src={imgProfil} alt='avatar' />
-                    </div>
-                    <div className='dashboard__memberlist__list__item__info'>
-                      <div className='dashboard__memberlist__list__item__info__name'>
-                        Yacine Lite
+                    <li className='dashboard__memberlist__list__item'>
+                      <div className='dashboard__memberlist__list__item__avatar'>
+                        <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info__role'>
-                        Gestionnaire de contenu
+                      <div className='dashboard__memberlist__list__item__info'>
+                        <div className='dashboard__memberlist__list__item__info__name'>
+                          Yacine Lite
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info__role'>
+                          Gestionnaire de contenu
+                        </div>
                       </div>
-                    </div>
-                  </li>
+                    </li>
 
-                  <li className='dashboard__memberlist__list__item'>
-                    <div className='dashboard__memberlist__list__item__avatar'>
-                      <img src={imgProfil} alt='avatar' />
-                    </div>
-                    <div className='dashboard__memberlist__list__item__info'>
-                      <div className='dashboard__memberlist__list__item__info__name'>
-                        Yacine Lite
+                    <li className='dashboard__memberlist__list__item'>
+                      <div className='dashboard__memberlist__list__item__avatar'>
+                        <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info__role'>
-                        Gestionnaire de contenu
+                      <div className='dashboard__memberlist__list__item__info'>
+                        <div className='dashboard__memberlist__list__item__info__name'>
+                          Yacine Lite
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info__role'>
+                          Gestionnaire de contenu
+                        </div>
                       </div>
-                    </div>
-                  </li>
+                    </li>
 
-                  <li className='dashboard__memberlist__list__item'>
-                    <div className='dashboard__memberlist__list__item__avatar'>
-                      <img src={imgProfil} alt='avatar' />
-                    </div>
-                    <div className='dashboard__memberlist__list__item__info'>
-                      <div className='dashboard__memberlist__list__item__info__name'>
-                        Yacine Lite
+                    <li className='dashboard__memberlist__list__item'>
+                      <div className='dashboard__memberlist__list__item__avatar'>
+                        <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info__role'>
-                        Gestionnaire de contenu
+                      <div className='dashboard__memberlist__list__item__info'>
+                        <div className='dashboard__memberlist__list__item__info__name'>
+                          Yacine Lite
+                        </div>
+                        <div className='dashboard__memberlist__list__item__info__role'>
+                          Gestionnaire de contenu
+                        </div>
                       </div>
-                    </div>
-                  </li>
+                    </li>
 
-                </ul>
-                <div className='dashboard__memberlist__btnadd'>
-                  <div className='dashboard__memberlist__btnadd__button'>
-                    <div className='dashboard__memberlist__btnadd__button__avatar'>
-                      <img src={listMemberBtn} alt='avatar' />
-                    </div>
-                    <div className='dashboard__memberlist__btnadd__button__text'>
-                       Ajouter un membre
+                  </ul>
+                  <div className='dashboard__memberlist__btnadd'>
+                    <div className='dashboard__memberlist__btnadd__button'>
+                      <div className='dashboard__memberlist__btnadd__button__avatar'>
+                        <img src={listMemberBtn} alt='avatar' />
+                      </div>
+                      <div className='dashboard__memberlist__btnadd__button__text'>
+                         Ajouter un membre
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                <form className='dashboard__memberlist__addmember'>
-                  <input type='text' className='dashboard__memberlist__addmember__name form-control' placeholder='Name' />
-                  <div className='dashboard__memberlist__addmember__role'>
-                    <div className='dashboard__memberlist__addmember__role__dropdown dropdown'>
-                      <button className='dashboard__memberlist__addmember__role__dropdown__button btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-                        Rôle du membre
-                      </button>
-                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu dropdown-menu'>
-                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
-                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
-                            <i className='fa fa-eye' />
+                  <form className='dashboard__memberlist__addmember'>
+                    <input type='text' className='dashboard__memberlist__addmember__name form-control' placeholder='Name' />
+                    <div className='dashboard__memberlist__addmember__role'>
+                      <div className='dashboard__memberlist__addmember__role__dropdown dropdown'>
+                        <button className='dashboard__memberlist__addmember__role__dropdown__button btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                          Rôle du membre
+                        </button>
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu dropdown-menu'>
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                            <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                              <i className='fa fa-eye' />
+                            </div>
+                            Lecteur
                           </div>
-                          Lecteur
-                        </div>
-                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
-                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
-                            <i className='fa fa-pencil' />
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                            <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                              <i className='fa fa-pencil' />
+                            </div>
+                            contributeur
                           </div>
-                          contributeur
-                        </div>
-                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
-                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
-                            <i className='fa fa-graduation-cap' />
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                            <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            Gestionnaire de contenu
                           </div>
-                          Gestionnaire de contenu
-                        </div>
-                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
-                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
-                            <i className='fa fa-gavel' />
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                            <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                              <i className='fa fa-gavel' />
+                            </div>
+                            Responsable
                           </div>
-                          Responsable
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <input type='submit' className='dashboard__memberlist__addmember__submitbtn' />
-                </form>
+                    <input type='submit' className='dashboard__memberlist__addmember__submitbtn' />
+                  </form>
 
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className='dashboard__webdav genericWebdav'>
+            <div className='dashboard__webdav genericWebdav'>
 
-            <div className='dashboard__webdav__btn genericWebdav__btn'>
-              <div className='dashboard__webdav__btn__icon genericWebdav__btn__icon'>
-                <i className='fa fa-windows' />
-              </div>
+              <div className='dashboard__webdav__btn genericWebdav__btn'>
+                <div className='dashboard__webdav__btn__icon genericWebdav__btn__icon'>
+                  <i className='fa fa-windows' />
+                </div>
 
-              <div className='dashboard__webdav__btn__text genericWebdav__btn__text'>
-                Implémenter Tracim dans votre explorateur
+                <div className='dashboard__webdav__btn__text genericWebdav__btn__text'>
+                  Implémenter Tracim dans votre explorateur
+                </div>
               </div>
-            </div>
 
-            <div className='dashboard__webdav__information genericWebdav__info'>
-              <div className='dashboard__webdav__information__text genericWebdav__info__text'>
-                Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
-              </div>
+              <div className='dashboard__webdav__information genericWebdav__info'>
+                <div className='dashboard__webdav__information__text genericWebdav__info__text'>
+                  Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
+                </div>
 
-              <div className='dashboard__webdav__information__link genericWebdav__info__link'>
-                http://algoo.trac.im/webdav/
+                <div className='dashboard__webdav__information__link genericWebdav__info__link'>
+                  http://algoo.trac.im/webdav/
+                </div>
               </div>
-            </div>
 
+            </div>
           </div>
         </div>
       </div>

src/container/Sidebar.jsx

 import { translate } from 'react-i18next'
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
 import { getWorkspaceList } from '../action-creator.async.js'
-import { setWorkspaceListisOpenInSidebar } from '../action-creator.sync.js'
+import {
+  setWorkspaceListIsOpenInSidebar,
+  updateWorkspaceFilter
+} from '../action-creator.sync.js'
 import { PAGE_NAME } from '../helper.js'
 
 class Sidebar extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      firstWsOpen: false
+      firstWsOpen: false,
+      workspaceIdInUrl: parseInt(props.match.params.idws)
     }
   }
 
   componentDidMount () {
+    const { workspaceIdInUrl } = this.state
     const { user, workspaceList, dispatch } = this.props
-    user.id !== -1 && workspaceList.length === 0 && dispatch(getWorkspaceList(user.id))
+    user.id !== -1 && workspaceList.length === 0 && dispatch(getWorkspaceList(user.id, workspaceIdInUrl))
   }
 
-  componentDidUpdate (prevProps) {
-    const { user, dispatch } = this.props
-    user.id !== -1 && prevProps.user.id !== user.id && dispatch(getWorkspaceList(user.id))
+  componentDidUpdate (prevProps, prevState) {
+    const { user, match, dispatch } = this.props
+
+    const newWorkspaceId = parseInt(match.params.idws)
+    prevState.workspaceIdInUrl !== newWorkspaceId && this.setState({workspaceIdInUrl: newWorkspaceId})
+
+    user.id !== -1 && prevProps.user.id !== user.id && dispatch(getWorkspaceList(user.id, newWorkspaceId))
   }
 
-  handleClickWorkspace = (wsId, newisOpenInSidebar) => this.props.dispatch(setWorkspaceListisOpenInSidebar(wsId, newisOpenInSidebar))
+  handleClickWorkspace = (wsId, newIsOpenInSidebar) => this.props.dispatch(setWorkspaceListIsOpenInSidebar(wsId, newIsOpenInSidebar))
 
   handleClickAllContent = wsId => {
     this.props.history.push(`${PAGE_NAME.WS_CONTENT}/${wsId}`)
   }
 
+  handleClickContentFilter = (wsId, filter) => {
+    const { workspaceIdInUrl } = this.state
+    const { workspace, history, dispatch } = this.props
+
+    const filterList = (() => {
+      if (wsId !== workspaceIdInUrl) return [filter] // load a different workspace => reset filters
+
+      if (workspace.filter.includes(filter)) return workspace.filter.filter(f => f !== filter) // remove the filter
+      else return [...workspace.filter, filter] // add the filter
+    })()
+
+    dispatch(updateWorkspaceFilter(filterList))
+
+    history.push(`${PAGE_NAME.WS_CONTENT}/${wsId}/${filterList.join(';')}`) // workspace.filter gets updated on react redraw from match.params
+  }
+
   render () {
-    const { workspaceList, t } = this.props
+    const { workspaceIdInUrl } = this.state
+    const { activeLang, workspace, workspaceList, app, t } = this.props
 
     return (
       <div className='sidebar d-none d-lg-block'>
                 number={++i}
                 wsId={ws.id}
                 name={ws.title}
+                app={app}
+                lang={activeLang}
+                activeFilterList={ws.id === workspaceIdInUrl ? workspace.filter : []}
                 isOpenInSidebar={ws.isOpenInSidebar}
                 onClickTitle={() => this.handleClickWorkspace(ws.id, !ws.isOpenInSidebar)}
                 onClickAllContent={this.handleClickAllContent}
+                onClickContentFilter={this.handleClickContentFilter}
                 key={ws.id}
               />
             )}
   }
 }
 
-const mapStateToProps = ({ user, workspaceList }) => ({ user, workspaceList })
+const mapStateToProps = ({ lang, user, workspace, workspaceList, app }) => ({
+  activeLang: lang.find(l => l.active) || {id: 'en'},
+  user,
+  workspace,
+  workspaceList,
+  app
+})
 export default withRouter(connect(mapStateToProps)(translate()(Sidebar)))

src/container/Tracim.jsx

 import { connect } from 'react-redux'
 import Footer from '../component/Footer.jsx'
 import Header from './Header.jsx'
-import Sidebar from './Sidebar.jsx'
 import Login from './Login.jsx'
 import Dashboard from './Dashboard.jsx'
 import Account from './Account.jsx'
 } from '../action-creator.async.js'
 
 class Tracim extends React.Component {
-  componentDidMount = () => {
+  componentDidMount () {
     this.props.dispatch(getIsUserConnected())
     this.props.dispatch(getLangList())
   }
 
   render () {
-    const { user, location } = this.props
-
-    const SidebarWrapper = props => props.locationPath !== '/login'
-      ? (
-        <div className='sidebarpagecontainer'>
-          <Sidebar />
-          {props.children}
-        </div>
-      )
-      : props.children
+    const { user } = this.props
 
     return (
       <div className='tracim'>
             <div className='tracim__content'>
               <Route path={PAGE_NAME.LOGIN} component={Login} />
 
-              <SidebarWrapper locationPath={location.pathname}>
-
-                <PrivateRoute exact path={PAGE_NAME.HOME} component={WorkspaceContent} />
-                <PrivateRoute path={`${PAGE_NAME.WS_CONTENT}/:idws`} component={WorkspaceContent} />
-                <PrivateRoute exact path={PAGE_NAME.ACCOUNT} component={Account} />
-                <PrivateRoute exact path={PAGE_NAME.DASHBOARD} component={Dashboard} />
-
-              </SidebarWrapper>
+              <PrivateRoute exact path={PAGE_NAME.HOME} component={WorkspaceContent} />
+              <PrivateRoute path={`${PAGE_NAME.WS_CONTENT}/:idws/:filter?`} component={WorkspaceContent} />
+              <PrivateRoute exact path={PAGE_NAME.ACCOUNT} component={Account} />
+              <PrivateRoute exact path={PAGE_NAME.DASHBOARD} component={Dashboard} />
 
               <Footer />
             </div>

src/container/WorkspaceContent.jsx

 import React from 'react'
 import { connect } from 'react-redux'
 import appFactory from '../appFactory.js'
+import Sidebar from './Sidebar.jsx'
 import Folder from '../component/Workspace/Folder.jsx'
 import FileItem from '../component/Workspace/FileItem.jsx'
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
   componentDidMount () {
     const { workspaceList, app, match, dispatch } = this.props
 
-    if (match.params.idws !== undefined) dispatch(getWorkspaceContent(match.params.idws))
-    else if (workspaceList.length > 0) dispatch(getWorkspaceContent(workspaceList[0].id)) // load first ws if none specified
+    if (match.params.idws !== undefined) dispatch(getWorkspaceContent(match.params.idws, match.params.filter))
+    else if (workspaceList.length > 0) dispatch(getWorkspaceContent(workspaceList[0].id, match.params.filter)) // load first ws if none specified
 
-    Object.keys(app).length === 0 && dispatch(getAppList())
+    if (Object.keys(app).length === 0) dispatch(getAppList())
   }
 
   componentDidUpdate (prevProps) {
     const { workspace, workspaceList, match, dispatch } = this.props
+    console.log('workspaceContent update', prevProps, this.props)
 
     // if a workspace is already loaded and the idws in url hasn't changed, do nothing
     if (workspace.id !== -1 && prevProps.match.params.idws === match.params.idws) return
 
     // if the idws in url has changed, load the new workspace
-    if (match.params.idws !== undefined) dispatch(getWorkspaceContent(match.params.idws))
+    if (match.params.idws !== undefined) dispatch(getWorkspaceContent(match.params.idws, match.params.filter))
     // else bellow is for loading url PAGE_NAME.HOME (without an idws), when workspaceList is loaded, load the first workspace
-    else if (match.params.idws === undefined && workspace.id === -1 && workspaceList.length > 0) dispatch(getWorkspaceContent(workspaceList[0].id))
+    else if (workspace.id === -1 && workspaceList.length > 0) dispatch(getWorkspaceContent(workspaceList[0].id))
   }
 
   handleClickContentItem = content => {
     // dispatch(setActiveFileContentActive(content))
   }
 
+  filterWorkspaceContent = (contentList, filter) => filter.length === 0
+    ? contentList
+    : contentList.filter(c => c.type === 'folder' || filter.includes(c.type)) // keep unfiltered files and folders
+      .map(c => c.type !== 'folder' ? c : {...c, content: this.filterWorkspaceContent(c.content, filter)}) // recursively filter folder content
+      .filter(c => c.type !== 'folder' || c.content.length > 0) // remove empty folder
+
   render () {
     const { workspace, app } = this.props
 
+    const filteredWorkspaceContent = this.filterWorkspaceContent(workspace.content, workspace.filter)
+
     return (
-      <PageWrapper customeClass='workspace'>
-        <PageTitle
-          parentClass='workspace__header'
-          customClass='justify-content-between'
-          title={workspace.title}
-        >
-          <DropdownCreateButton parentClass='workspace__header__btnaddworkspace' />
-        </PageTitle>
-
-        <PageContent parentClass='workspace__content'>
-          <div className='workspace__content__fileandfolder folder__content active'>
-            <FileItemHeader />
-
-            { workspace.content.map((c, i) => c.type === 'folder'
-              ? (
-                <Folder
-                  app={app}
-                  folderData={c}
-                  onClickItem={this.handleClickContentItem}
-                  isLast={i === workspace.content.length - 1}
-                  key={c.id}
-                />
-              )
-              : (
-                <FileItem
-                  name={c.title}
-                  type={c.type}
-                  icon={(app[c.type] || {icon: ''}).icon}
-                  status={c.status}
-                  onClickItem={() => this.handleClickContentItem(c)}
-                  isLast={i === workspace.content.length - 1}
-                  key={c.id}
-                />
-              )
-            )}
-          </div>
-
-          <DropdownCreateButton customClass='workspace__content__button mb-5' />
-
-          <div id='appContainer' />
-        </PageContent>
-
-      </PageWrapper>
+      <div className='sidebarpagecontainer'>
+        <Sidebar />
+
+        <PageWrapper customeClass='workspace'>
+          <PageTitle
+            parentClass='workspace__header'
+            customClass='justify-content-between'
+            title={workspace.title}
+          >
+            <DropdownCreateButton parentClass='workspace__header__btnaddworkspace' />
+          </PageTitle>
+
+          <PageContent parentClass='workspace__content'>
+            <div className='workspace__content__fileandfolder folder__content active'>
+              <FileItemHeader />
+
+              { filteredWorkspaceContent.map((c, i) => c.type === 'folder'
+                ? (
+                  <Folder
+                    app={app}
+                    folderData={c}
+                    onClickItem={this.handleClickContentItem}
+                    isLast={i === filteredWorkspaceContent.length - 1}
+                    key={c.id}
+                  />
+                )
+                : (
+                  <FileItem
+                    name={c.title}
+                    type={c.type}
+                    icon={(app[c.type] || {icon: ''}).icon}
+                    status={c.status}
+                    onClickItem={() => this.handleClickContentItem(c)}
+                    isLast={i === filteredWorkspaceContent.length - 1}
+                    key={c.id}
+                  />
+                )
+              )}
+            </div>
+
+            <DropdownCreateButton customClass='workspace__content__button mb-5' />
+
+            <div id='appContainer' />
+          </PageContent>
+
+        </PageWrapper>
+      </div>
     )
   }
 }

src/css/FileItem.styl

 .file
   display flex
   border-bottom 0
+  cursor pointer
   &:hover
     background-color files-hover
   &__type
     display flex
     justify-content space-between
     padding 15px 5px
-    cursor pointer
     &__text
       font-size 17px
     &__icons

src/css/Sidebar.styl

   flex-grow 0
   height 100%
   font-size 18px
-  background-color rgba(253,253,253,0.3)
+  background-color rgba(253, 253, 253, 0.3)
 
 .sidebar
   &__btnnewworkspace
               padding 10px 15px
               min-width 50px
               leftside()
+            &.activeFilter
+              .dropdown__icon
+                background-color rgba(253, 253, 253, 0.8)

src/reducer/workspace.js

   id: -1,
   title: '',
   ownerId: '',
-  content: []
+  content: [],
+  filter: []
 }, action) {
   switch (action.type) {
-    case `Update/${WORKSPACE}`:
-      return serializeWorkspace(action.workspace)
+    case `Set/${WORKSPACE}`:
+      return {
+        ...serializeWorkspace(action.workspace),
+        filter: action.filterStr ? action.filterStr.split(';') : []
+      }
+
+    case `Update/${WORKSPACE}/Filter`:
+      return {...state, filter: action.filterList}
 
     default:
       return state