change the MenuSubComponent icon for an animated icon

src/component/Account/MenuSubComponent.jsx

@@ -6,7 +6,11 @@ export const Navbar = props => {
     <nav className='account__userpreference__menu navbar d-flex align-items-start'>
 
       <div className='account__userpreference__menu__responsive d-lg-none'>
-        <i className='fa fa-bars' />
+        <button className='hamburger hamburger--spring account__userpreference__menu__responsive__hamburger' type='button'>
+          <span className='hamburger-box account__userpreference__menu__responsive__hamburger__box'>
+            <span className='hamburger-inner account__userpreference__menu__responsive__hamburger__box__icon'></span>
+          </span>
+        </button>
       </div>
 
       <ul className='account__userpreference__menu__list nav flex-column'>

src/css/AccountPage.styl

@@ -161,11 +161,18 @@ settingText()
       &__menu
         justify-content center
         margin-bottom 25px
-        border-radius 30px
+        border-radius 50%
         width 60px
         min-height 60px
         &__responsive
-          align-self center
+          &__hamburger
+            margin 18px 0 0 10px
+            padding 0
+            &__box
+              &:focus
+                outline none
+              &__icon, &__icon::before, &__icon::after
+                width 30px
         &__list
           display none
       &__setting