animate menu accordian arrow

msamprz · Aug 30, 2019 · a5392f5 · a5392f5
1 parent 75a4d13
commit a5392f5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/trader/src/App/Components/Elements/MenuAccordion/menu-accordion-headers.jsx b/packages/trader/src/App/Components/Elements/MenuAccordion/menu-accordion-headers.jsx
@@ -1,3 +1,4 @@
+import classNames       from 'classnames';
 import React            from 'react';
 import Icon             from 'Assets/icon.jsx';
 import {
@@ -36,7 +37,9 @@ class MenuAccordionHeaders extends React.PureComponent {
                         <div key={idx}>
                             <div>
                                 <VerticalTabHeader item={item} onChange={this.handleAccordion} >
-                                    <Icon icon='IconChevronRight' className='dt_accordion-chevron' />
+                                    <Icon icon='IconChevronRight' className={classNames('dt_accordion-chevron', {
+                                        'dt_accordion-chevron--show': show_sub_tab_list, // this.state.is_active_tab_open,
+                                    })} />
                                 </VerticalTabHeader>
                             </div>
                             {show_sub_tab_list && (

diff --git a/packages/trader/src/sass/app/_common/components/menu-accordion.scss b/packages/trader/src/sass/app/_common/components/menu-accordion.scss
@@ -1,4 +1,10 @@
 .dt_accordion-chevron {
     transform: rotate(90deg);
     margin-left: auto;
+    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+    transform-origin: 50% 45%;
+
+    &--show {
+        transform: rotate(-90deg);
+    }
 }