소스 검색

added expandable sidebar

Skylsmoi 7 년 전
부모
커밋
da2a7c2e0d
2개의 변경된 파일29개의 추가작업 그리고 2개의 파일을 삭제
  1. 10 2
      src/container/Sidebar.jsx
  2. 19 0
      src/css/Sidebar.styl

+ 10 - 2
src/container/Sidebar.jsx 파일 보기

1
 import React from 'react'
1
 import React from 'react'
2
 import { connect } from 'react-redux'
2
 import { connect } from 'react-redux'
3
 import { withRouter } from 'react-router'
3
 import { withRouter } from 'react-router'
4
+import classnames from 'classnames'
4
 import { translate } from 'react-i18next'
5
 import { translate } from 'react-i18next'
5
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
6
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
6
 import { getWorkspaceList } from '../action-creator.async.js'
7
 import { getWorkspaceList } from '../action-creator.async.js'
14
   constructor (props) {
15
   constructor (props) {
15
     super(props)
16
     super(props)
16
     this.state = {
17
     this.state = {
18
+      sidebarClose: false,
17
       workspaceIdInUrl: parseInt(props.match.params.idws)
19
       workspaceIdInUrl: parseInt(props.match.params.idws)
18
     }
20
     }
19
   }
21
   }
55
     history.push(`${PAGE_NAME.WS_CONTENT}/${wsId}/${filterList.join(';')}`) // workspace.filter gets updated on react redraw from match.params
57
     history.push(`${PAGE_NAME.WS_CONTENT}/${wsId}/${filterList.join(';')}`) // workspace.filter gets updated on react redraw from match.params
56
   }
58
   }
57
 
59
 
60
+  handleClickToggleSidebar = () => this.setState(prev => ({sidebarClose: !prev.sidebarClose}))
61
+
58
   render () {
62
   render () {
59
-    const { workspaceIdInUrl } = this.state
63
+    const { sidebarClose, workspaceIdInUrl } = this.state
60
     const { activeLang, workspace, workspaceList, app, t } = this.props
64
     const { activeLang, workspace, workspaceList, app, t } = this.props
61
 
65
 
62
     return (
66
     return (
63
-      <div className='sidebar d-none d-lg-block'>
67
+      <div className={classnames('sidebar d-none d-lg-block', {'sidebarclose': sidebarClose})}>
68
+        <div className='sidebar__expand' onClick={this.handleClickToggleSidebar}>
69
+          <i className={classnames('fa fa-fw', {'fa-plus-square-o': sidebarClose, 'fa-minus-square-o': !sidebarClose})} />
70
+        </div>
71
+
64
         <nav className='sidebar__navigation'>
72
         <nav className='sidebar__navigation'>
65
           <ul className='sidebar__navigation__workspace'>
73
           <ul className='sidebar__navigation__workspace'>
66
             { workspaceList.map((ws, i) =>
74
             { workspaceList.map((ws, i) =>

+ 19 - 0
src/css/Sidebar.styl 파일 보기

31
   background-color rgba(253, 253, 253, 0.3)
31
   background-color rgba(253, 253, 253, 0.3)
32
 
32
 
33
 .sidebar
33
 .sidebar
34
+  position relative
35
+  transition all 0.5s
36
+  width 300px
37
+  &.sidebarclose
38
+    width 0
39
+    transform translateX(-300px)
40
+    .sidebar__expand
41
+      right -339px
42
+  &__expand
43
+    position absolute
44
+    top 0
45
+    right -39px
46
+    padding 5px 8px
47
+    border 1px solid white
48
+    border-bottom-right-radius 15px
49
+    cursor pointer
50
+    background-color blue
51
+    color white
52
+    transition all 0.5s
34
   &__btnnewworkspace
53
   &__btnnewworkspace
35
     margin-top 40px
54
     margin-top 40px
36
     padding 10px
55
     padding 10px