Fix the width and fix the scroll on the responsive mode of the sidebar

frontend/src/component/Sidebar/WorkspaceListItem.jsx

@@ -7,27 +7,27 @@ import { Link } from 'react-router-dom'
 
 const WorkspaceListItem = props => {
   return (
-    <li className='sidebar__navigation__workspace__item'>
+    <li className='sidebar__content__navigation__workspace__item'>
       <div
-        className='sidebar__navigation__workspace__item__wrapper primaryColorBg primaryColorBgDarkenHover primaryColorBorder'
+        className='sidebar__content__navigation__workspace__item__wrapper primaryColorBg primaryColorBgDarkenHover primaryColorBorder'
         onClick={props.onClickTitle}
       >
-        <div className='sidebar__navigation__workspace__item__number'>
+        <div className='sidebar__content__navigation__workspace__item__number'>
           {props.label.substring(0, 2).toUpperCase()}
         </div>
 
-        <div className='sidebar__navigation__workspace__item__name' title={props.label}>
+        <div className='sidebar__content__navigation__workspace__item__name' title={props.label}>
           {props.label}
         </div>
 
-        <div className='sidebar__navigation__workspace__item__icon'>
+        <div className='sidebar__content__navigation__workspace__item__icon'>
           <i className={classnames(props.isOpenInSidebar ? 'fa fa-chevron-up' : 'fa fa-chevron-down')} />
         </div>
       </div>
 
       <AnimateHeight duration={500} height={props.isOpenInSidebar ? 'auto' : 0}>
         <ul
-          className='sidebar__navigation__workspace__item__submenu'
+          className='sidebar__content__navigation__workspace__item__submenu'
           id={`sidebarSubMenu_${props.number}`}
         >
           { props.allowedApp.map(aa =>
@@ -37,14 +37,14 @@ const WorkspaceListItem = props => {
             >
               <Link to={aa.route}>
                 <div className={classnames(
-                  'sidebar__navigation__workspace__item__submenu__dropdown primaryColorBgLighten primaryColorBgHover primaryColorBorderDarken',
+                  'sidebar__content__navigation__workspace__item__submenu__dropdown primaryColorBgLighten primaryColorBgHover primaryColorBorderDarken',
                   {'activeFilter': props.activeFilterList.includes(aa.slug)}
                 )}>
                   <div className='dropdown__icon'>
                     <i className={classnames(`fa fa-${aa.faIcon}`)} style={{backgroudColor: aa.hexcolor}} />
                   </div>
 
-                  <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
+                  <div className='sidebar__content__navigation__workspace__item__submenu__dropdown__showdropdown'>
                     <div className='dropdown__title' id='navbarDropdown'>
                       <div className='dropdown__title__text'>
                         {aa.label/* [props.lang.id] */}

frontend/src/container/Sidebar.jsx

@@ -106,49 +106,47 @@ class Sidebar extends React.Component {
 
     return (
       <div className={classnames('sidebar primaryColorBgDarken', {'sidebarclose': sidebarClose})}>
-        <div className='sidebarSticky'>
-          <div className='sidebar__expand primaryColorBg' onClick={this.handleClickToggleSidebar}>
-            <i className={classnames('fa fa-chevron-left', {'fa-chevron-right': sidebarClose, 'fa-chevron-left': !sidebarClose})} />
-          </div>
 
-          <div className='sidebar__content'>
-
-            <nav className='sidebar__navigation'>
-              <ul className='sidebar__navigation__workspace'>
-                { workspaceList.map(ws =>
-                  <WorkspaceListItem
-                    idWs={ws.id}
-                    label={ws.label}
-                    allowedApp={ws.sidebarEntry}
-                    lang={activeLang}
-                    activeFilterList={ws.id === workspaceIdInUrl ? [qs.parse(this.props.location.search).type] : []}
-                    isOpenInSidebar={ws.isOpenInSidebar}
-                    onClickTitle={() => this.handleClickWorkspace(ws.id, !ws.isOpenInSidebar)}
-                    onClickAllContent={this.handleClickAllContent}
-                    // onClickContentFilter={this.handleClickContentFilter}
-                    key={ws.id}
-                  />
-                )}
-              </ul>
-            </nav>
-
-            <div className='sidebar__btnnewworkspace'>
-              <button
-                className='sidebar__btnnewworkspace__btn btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover mb-5'
-                onClick={this.handleClickNewWorkspace}
-              >
-                {t('Create a workspace')}
-              </button>
-            </div>
+        <div className='sidebar__expand primaryColorBg' onClick={this.handleClickToggleSidebar}>
+          <i className={classnames('fa fa-chevron-left', {'fa-chevron-right': sidebarClose, 'fa-chevron-left': !sidebarClose})} />
+        </div>
 
+        <div className='sidebar__content'>
+          <nav className={classnames('sidebar__content__navigation', {'sidebarclose': sidebarClose})}>
+            <ul className='sidebar__content__navigation__workspace'>
+              { workspaceList.map(ws =>
+                <WorkspaceListItem
+                  idWs={ws.id}
+                  label={ws.label}
+                  allowedApp={ws.sidebarEntry}
+                  lang={activeLang}
+                  activeFilterList={ws.id === workspaceIdInUrl ? [qs.parse(this.props.location.search).type] : []}
+                  isOpenInSidebar={ws.isOpenInSidebar}
+                  onClickTitle={() => this.handleClickWorkspace(ws.id, !ws.isOpenInSidebar)}
+                  onClickAllContent={this.handleClickAllContent}
+                  // onClickContentFilter={this.handleClickContentFilter}
+                  key={ws.id}
+                />
+              )}
+            </ul>
+          </nav>
+
+          <div className='sidebar__content__btnnewworkspace'>
+            <button
+              className='sidebar__content__btnnewworkspace__btn btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover mb-5'
+              onClick={this.handleClickNewWorkspace}
+            >
+              {t('Create a workspace')}
+            </button>
           </div>
 
-          <div className='sidebar__footer mb-2'>
-            <div className='sidebar__footer__text whiteFontColor d-flex align-items-end justify-content-center'>
-              Copyright - 2013 - 2018
-              <div className='sidebar__footer__text__link'>
-                <a href='http://www.tracim.fr/' target='_blank' className='ml-3'>tracim.fr</a>
-              </div>
+        </div>
+
+        <div className='sidebar__footer mb-2'>
+          <div className='sidebar__footer__text whiteFontColor d-flex align-items-end justify-content-center'>
+            Copyright - 2013 - 2018
+            <div className='sidebar__footer__text__link'>
+              <a href='http://www.tracim.fr/' target='_blank' className='ml-3'>tracim.fr</a>
             </div>
           </div>
         </div>

frontend/src/css/Sidebar.styl

@@ -15,8 +15,12 @@ leftside()
   background-color rgba(253, 253, 253, 0.3)
 
 .sidebar
+  display flex
+  flex-direction column
+  justify-content space-between
   position relative
   transition all sidebar-animate-speed
+  width sidebar-width
   min-height 100%
   background-image url('../img/applat.png')
   background-repeat repeat
@@ -25,8 +29,7 @@ leftside()
     width 0
   &__expand
     position absolute
-    top 0
-    right -43px
+    right -42px
     display flex
     justify-content center
     align-items center
@@ -37,74 +40,79 @@ leftside()
     cursor pointer
     color white
     transition all sidebar-animate-speed
-  &__btnnewworkspace
-    margin 50px 0
-    overflow hidden
-    &__btn
-      display block
-      margin 0 auto
-      padding 15px 30px
-  &__navigation
-    padding 0
-    width sidebar-width
-    overflow hidden
-    &__workspace
-      padding-left 0
-      list-style none
-      &__item
-        &__wrapper
-          display flex
-          align-items center
-          border-bottom 1px solid
-          width 100%
-          height 100%
-          cursor pointer
-        &__number
-          display flex
-          leftside()
-          padding 12px
-          width 50px
-          letter-spacing 2px
-        &__name
-          padding 10px
-          font-size 20px
-          color off-white
-          white-space nowrap
-          overflow hidden
-          text-overflow ellipsis
-        &__icon
-          margin 0 10px 0 auto
-          color white
-        &__submenu
-          margin 0
-          padding 0
-          width 100%
-          overflow hidden
-          & > li
-            display block
-          &__dropdown
+  &__content
+    height 100%
+    &__btnnewworkspace
+      margin 50px 0
+      overflow hidden
+      &__btn
+        display block
+        margin 0 auto
+        padding 15px 30px
+    &__navigation
+      padding 0
+      width sidebar-width
+      transition all sidebar-animate-speed
+      overflow hidden
+      &.sidebarclose
+        width 0
+      &__workspace
+        padding-left 0
+        list-style none
+        &__item
+          &__wrapper
             display flex
             align-items center
             border-bottom 1px solid
+            width 100%
+            height 100%
             cursor pointer
-            &__showdropdown
+          &__number
+            display flex
+            leftside()
+            padding 12px
+            width 50px
+            letter-spacing 2px
+          &__name
+            padding 10px
+            font-size 20px
+            color off-white
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+          &__icon
+            margin 0 10px 0 auto
+            color white
+          &__submenu
+            margin 0
+            padding 0
+            width 100%
+            overflow hidden
+            & > li
+              display block
+            &__dropdown
               display flex
-              justify-content space-between
               align-items center
-              padding 0 10px
-              width 100%
-            .dropdown__icon
-              padding 10px 15px
-              min-width 50px
-              leftside()
-            .dropdown__title
-              white-space nowrap
-              overflow hidden
-              text-overflow ellipsis
-              // color off-white
-            &.activeFilter
+              border-bottom 1px solid
+              cursor pointer
+              &__showdropdown
+                display flex
+                justify-content space-between
+                align-items center
+                padding 0 10px
+                width 100%
               .dropdown__icon
-                background-color rgba(253, 253, 253, 0.8)
+                padding 10px 15px
+                min-width 50px
+                leftside()
+              .dropdown__title
+                white-space nowrap
+                overflow hidden
+                text-overflow ellipsis
+                // color off-white
+              &.activeFilter
+                .dropdown__icon
+                  background-color rgba(253, 253, 253, 0.8)
   &__footer
     &__text
       font-size 14px
@@ -116,22 +124,19 @@ leftside()
             text-decoration underline
             color fourthColor
 
-/***** MEDIA 992px and 1199px ******/
-
-@media (min-width: min-lg) and (max-width: max-lg)
 
-  .sidebar
-    position fixed
+/***** MEDIA 576px and 1199px ******/
 
-/***** MEDIA 576px and 991px ******/
+// Regroup the css rules in one mediaqueries
 
-@media (min-width: min-sm) and (max-width: max-md)
+@media (min-width: min-sm) and (max-width: max-lg)
 
-  .sidebarSticky
-    top 69px
+  .sidebarpagecontainer
+    position relative
 
   .sidebar
-    position fixed
+    position absolute
+
 
 /***** MEDIA 576px and 767px *****/
 
@@ -145,10 +150,8 @@ leftside()
 @media (max-width: 575px)
 
   .sidebarpagecontainer
+    position relative
     padding-top 69px
 
-  .sidebarSticky
-    top 69px
-
   .sidebar
-    position fixed
+    position absolute