fixed header profil + fixed skeleton css display

src/component/Header/MenuActionListItem/MenuProfil.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
+import { PAGE_NAME } from '../../../helper.js'
 
 const MenuProfil = props => {
-  return props.user.isLoggedin
+  return props.user.isLoggedIn
     ? (
       <li className='header__menu__rightside__itemprofil'>
         <div className='header__menu__rightside__itemprofil__profilgroup dropdown'>
@@ -13,7 +15,7 @@ const MenuProfil = props => {
             </div>
           </button>
           <div className='profilgroup__setting dropdown-menu' aria-labelledby='dropdownMenuButton'>
-            <div className='setting__link dropdown-item' onClick={props.onClickMyProfil}>Mon compte</div>
+            <Link className='setting__link dropdown-item' to={PAGE_NAME.ACCOUNT}>Mon compte</Link>
             {/* <div className='setting__link dropdown-item'>Mot de passe</div> */}
             <div className='setting__link dropdown-item' onClick={props.onClickLogout}>Se déconnecter</div>
           </div>
@@ -26,6 +28,5 @@ export default MenuProfil
 
 MenuProfil.propTypes = {
   user: PropTypes.object.isRequired,
-  onClickMyProfil: PropTypes.func.isRequired,
   onClickLogout: PropTypes.func.isRequired
 }

src/container/Header.jsx

@@ -29,47 +29,46 @@ class Header extends React.Component {
 
   handleClickHelp = () => {}
 
-  handleClickMyProfil = () => {}
   handleClickLogout = () => {}
 
   render () {
     const { lang, user } = this.props
 
-    const HeaderWrapper = props => <header><nav className='header navbar navbar-expand-md navbar-light bg-light'>{props.children}</nav></header>
-    const HeaderMenuRightWrapper = props => <div className='header__menu collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>{props.children}</div>
-    const MenuActionListWrapper = props => <ul className='header__menu__rightside'>{ props.children }</ul>
-
     return (
-      <HeaderWrapper>
-        <Logo logoSrc={logoHeader} onClickImg={this.handleClickLogo} />
-        <NavbarToggler />
+      <header>
+        <nav className='header navbar navbar-expand-md navbar-light bg-light'>
+          <Logo logoSrc={logoHeader} onClickImg={this.handleClickLogo} />
 
-        <HeaderMenuRightWrapper>
-          <MenuLinkList
-            onClickFeature={this.handleClickFeature}
-            onClickExplore={this.handleClickExplore}
-            onClickAbout={this.handleClickAbout}
-          />
-          <MenuActionListWrapper>
-            <MenuActionListItemSearch
-              onChangeInput={this.handleChangeInput}
-              onClickSubmit={this.handleClickSubmit}
-            />
-            <MenuActionListItemDropdownLang
-              langList={lang}
-              onChangeLang={this.handleChangeLang}
-            />
-            <MenuActionListItemHelp
-              onClickHelp={this.handleClickHelp}
-            />
-            <MenuActionListItemMenuProfil
-              user={user}
-              onClickMyProfil={this.handleClickMyProfil}
-              onClickLogout={this.handleClickLogout}
+          <NavbarToggler />
+
+          <div className='header__menu collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>
+            <MenuLinkList
+              onClickFeature={this.handleClickFeature}
+              onClickExplore={this.handleClickExplore}
+              onClickAbout={this.handleClickAbout}
             />
-          </MenuActionListWrapper>
-        </HeaderMenuRightWrapper>
-      </HeaderWrapper>
+
+            <ul className='header__menu__rightside'>
+              <MenuActionListItemSearch
+                onChangeInput={this.handleChangeInput}
+                onClickSubmit={this.handleClickSubmit}
+              />
+              <MenuActionListItemDropdownLang
+                langList={lang}
+                onChangeLang={this.handleChangeLang}
+              />
+              <MenuActionListItemHelp
+                onClickHelp={this.handleClickHelp}
+              />
+              <MenuActionListItemMenuProfil
+                user={user}
+                onClickLogout={this.handleClickLogout}
+              />
+            </ul>
+
+          </div>
+        </nav>
+      </header>
     )
   }
 }

src/container/Sidebar.jsx

@@ -35,7 +35,7 @@ class Sidebar extends React.Component {
     const { workspaceList, t } = this.props
 
     return (
-      <div className='sidebar d-none d-lg-table-cell'>
+      <div className='sidebar d-none d-lg-block'>
         <nav className='sidebar__navigation'>
           <ul className='sidebar__navigation__workspace'>
             { workspaceList.map((ws, i) =>

src/container/Tracim.jsx

@@ -38,13 +38,13 @@ class Tracim extends React.Component {
       : props.children
 
     return (
-      <div>
+      <div className='tracim'>
         <Header />
 
         { user.isLoggedIn === undefined
           ? (<div />) // while we dont know if user is connected, display nothing but the header @TODO show loader
           : (
-            <div>
+            <div className='tracim__content'>
               <Route path={PAGE_NAME.LOGIN} component={Login} />
 
               <SidebarWrapper locationPath={location.pathname}>

src/css/Generic.styl

@@ -1,13 +1,12 @@
-/*** SIDEBAR ***/
+.tracim
+  height 100%
+  &__content
+    height 100%
 
 .sidebarpagecontainer
   display flex
+  padding-top 88px
   min-height calc(100% - 50px)
-  padding-top 85px
-
-/********************/
-
-/*** ELEMENTS ON ALL PAGE ***/
 
 .pageWrapperGeneric
   width 100%

src/css/Sidebar.styl

@@ -15,7 +15,6 @@
       color white
 
 .sidebar
-  display none
   min-height 100%
   background-color secondColor
   z-index 1

src/css/index.styl

@@ -1,6 +1,6 @@
 body
   font-family 'Quicksand', sans-serif
-html, body, #content, #content > div
+html, body, #content
   height 100%
 
 @import 'Variable.styl' // Côme - this comes from node_modules/tracim_lib