animate red cue on the phase tabs when removing them

Author: maxceem

src/components/GenericMenu/GenericMenu.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import PT from 'prop-types'
+import cn from 'classnames'
 
 import { NavLink } from 'react-router-dom'
+import { Transition } from 'react-transition-group'
 
 import styles from './GenericMenu.scss'
 
@@ -12,7 +14,12 @@ const GenericMenu = ({
     <ul styleName="list">
       {!!navLinks && navLinks.map((item, i) => (
         <li key={i}>
-          {item.hasNotifications && <i styleName="dot" />}
+          {/* `timeout` should be same as `.dot` transition duration in CSS */}
+          <Transition in={item.hasNotifications} timeout={1000} unmountOnExit>
+            {
+              state => <i className={cn(styles['dot'], styles[state])} />
+            }
+          </Transition>
           {item.to
             ? <NavLink to={item.to} activeClassName={styles.active} exact>{item.label}</NavLink>
             : <span onClick={item.onClick} styleName={item.isActive ? 'active' : ''}>{item.label}</span>

src/components/GenericMenu/GenericMenu.scss

@@ -17,7 +17,9 @@
       position: relative;
       line-height: 50px;
       margin: 0 20px;
-      .dot {
+      .dot {        
+        opacity: 1;
+        transition: opacity 1000ms ease-in-out; // duration should be same as Transition `timeout`
         position: absolute;
         right: -12px;
         top: 10px;
@@ -26,6 +28,11 @@
         border-radius: 100%;
         background-color: $tc-red-70;
       }
+
+      .dot.exiting,
+      .dot.exited {
+        opacity: 0;
+      }
     }
     a,
     span {