fixed sidebar animation

src/component/Workspace/Folder.jsx

@@ -31,7 +31,7 @@ class Folder extends React.Component {
           </div>
           <div className='folder__header__name'>
             <div className='folder__header__name__icon'>
-              <i className='fa fa-folder-open-o' />
+              <i className={classnames('fa', {'fa-folder-open-o': this.state.open, 'fa-folder-o': !this.state.open})} />
             </div>
             <div className='folder__header__name__text'>
               { title }

src/container/Account.jsx

@@ -46,6 +46,7 @@ class Account extends React.Component {
 
   componentDidUpdate () {
     const { user, workspaceList, dispatch } = this.props
+
     if (user.id !== -1 && workspaceList.length > 0 && workspaceList.some(ws => ws.role === undefined)) dispatch(getUserRole(user))
   }
 

src/container/Sidebar.jsx

@@ -16,19 +16,22 @@ class Sidebar extends React.Component {
     super(props)
     this.state = {
       sidebarClose: false,
-      workspaceIdInUrl: parseInt(props.match.params.idws)
+      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null
     }
   }
 
   componentDidMount () {
     const { workspaceIdInUrl } = this.state
     const { user, workspaceList, dispatch } = this.props
+
     user.id !== -1 && workspaceList.length === 0 && dispatch(getWorkspaceList(user.id, workspaceIdInUrl))
   }
 
   componentDidUpdate (prevProps, prevState) {
     const { user, match, dispatch } = this.props
 
+    if (this.state.workspaceIdInUrl === null) return
+
     const newWorkspaceId = parseInt(match.params.idws)
     prevState.workspaceIdInUrl !== newWorkspaceId && this.setState({workspaceIdInUrl: newWorkspaceId})
 

src/css/Folder.styl

@@ -13,7 +13,7 @@ border-style = 1px solid darkBlue
   border border-style
   &.item-last
     border-bottom border-style
-// @TODO the very last line of file or folder has to be added a border bottom in js
+// @Info: the very last line of file or folder has it's border bottom added in js
 // -----------------------------------------------------
 
 folderclose()
@@ -25,7 +25,7 @@ folderopen()
   height 100%
   opacity 1
   visibility visible
-  transition opacity 1s
+  transition opacity 0.3s
 
 .folder
   padding-left 30px

src/css/Sidebar.styl

@@ -20,6 +20,7 @@
   z-index 1
 
 sidebar-width = 300px
+sidebar-animate-speed = 0.5s
 
 leftside()
   flex-grow 0
@@ -29,16 +30,15 @@ leftside()
 
 .sidebar
   position relative
-  transition all 0.5s
-  width 300px
+  transition all sidebar-animate-speed
+  width sidebar-width
   &.sidebarclose
     width 0
-    transform translateX("-%s" % sidebar-width)
     .sidebar__expand
-      right "calc(-%s - 39px)" % sidebar-width
+      border-bottom-right-radius 0
   &__expand
     position absolute
-    top 0
+    top -1px
     right -39px
     padding 5px 8px
     border 1px solid white
@@ -46,22 +46,21 @@ leftside()
     cursor pointer
     background-color blue
     color white
-    transition all 0.5s
+    transition all sidebar-animate-speed
   &__btnnewworkspace
-    margin-top 40px
-    padding 10px
-    width 100%
+    margin-top 50px
+    overflow hidden
     &__btn
       display block
       margin 0 auto
       padding 15px 30px
   &__navigation
     padding 0
+    overflow hidden
     &__workspace
       padding-left 0
       list-style none
       &__item
-        width sidebar-width
         &__wrapper
           display flex
           align-items center