Просмотр исходного кода

change the open/close sidebar icon

AlexiCauvin 7 лет назад
Родитель
Сommit
46f27e1963
2 измененных файлов: 48 добавлений и 7 удалений
  1. 6 1
      src/container/Sidebar.jsx
  2. 42 6
      src/css/Sidebar.styl

+ 6 - 1
src/container/Sidebar.jsx Просмотреть файл

69
     return (
69
     return (
70
       <div className={classnames('sidebar d-none d-lg-block', {'sidebarclose': sidebarClose})}>
70
       <div className={classnames('sidebar d-none d-lg-block', {'sidebarclose': sidebarClose})}>
71
         <div className='sidebar__expand' onClick={this.handleClickToggleSidebar}>
71
         <div className='sidebar__expand' onClick={this.handleClickToggleSidebar}>
72
-          <i className={classnames('fa fa-fw', {'fa-plus-square-o': sidebarClose, 'fa-minus-square-o': !sidebarClose})} />
72
+          { /* <i className={classnames('fa fa-fw', {'fa-plus-square-o': sidebarClose, 'fa-minus-square-o': !sidebarClose})} /> */ }
73
+          <button className='hamburger hamburger--spring sidebar__expand__btnHamburger' type='button'>
74
+            <span className='hamburger-box sidebar__expand__btnHamburger__box'>
75
+              <span className='hamburger-inner sidebar__expand__btnHamburger__box__icon' />
76
+            </span>
77
+          </button>
73
         </div>
78
         </div>
74
 
79
 
75
         <nav className='sidebar__navigation'>
80
         <nav className='sidebar__navigation'>

+ 42 - 6
src/css/Sidebar.styl Просмотреть файл

14
     &:hover
14
     &:hover
15
       color white
15
       color white
16
 
16
 
17
+/**** MENU HAMBURGER ON EXPAND BAR *****/
18
+
19
+.hamburger--spring .hamburger-inner
20
+  margin 2px 6px
21
+
22
+.hamburger--spring .hamburger-inner::before
23
+  top 8px
24
+
25
+.hamburger--spring .hamburger-inner::after
26
+  top 16px
27
+
28
+ /***************************************/
29
+
17
 .sidebar
30
 .sidebar
18
   min-height 100%
31
   min-height 100%
19
   background-color secondColor
32
   background-color secondColor
34
   width sidebar-width
47
   width sidebar-width
35
   &.sidebarclose
48
   &.sidebarclose
36
     width 0
49
     width 0
37
-    .sidebar__expand
38
-      border-bottom-right-radius 0
50
+    .hamburger--spring
51
+      .hamburger-inner
52
+        transition-delay 0.22s
53
+        background-color transparent
54
+        &::before
55
+            top 0
56
+            transition top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
57
+            transform translate3d(0, 10px, 0) rotate(45deg)
58
+        &::after
59
+            top 0
60
+            transition top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
61
+            transform translate3d(0, 10px, 0) rotate(-45deg)
39
   &__expand
62
   &__expand
40
     position absolute
63
     position absolute
41
-    top 1px
42
-    right -44px
43
-    padding 5px 8px
44
-    border 3px solid transparent
64
+    top 0
65
+    right -49px
66
+    padding 4px
67
+    border-left 1px solid off-white
45
     border-bottom-right-radius 15px
68
     border-bottom-right-radius 15px
46
     cursor pointer
69
     cursor pointer
47
     background-color blue
70
     background-color blue
48
     color white
71
     color white
49
     transition all sidebar-animate-speed
72
     transition all sidebar-animate-speed
73
+    &__btnHamburger
74
+      padding 0
75
+      &:focus
76
+        outline none
77
+      &__box
78
+        &__icon, &__icon::before, &__icon::after
79
+          width 25px
80
+          height 3px
81
+          background-color off-white
82
+        &__icon::before
83
+          top 8px
84
+        &__icon::after
85
+          top 16px
50
   &__btnnewworkspace
86
   &__btnnewworkspace
51
     margin 50px 0
87
     margin 50px 0
52
     overflow hidden
88
     overflow hidden