Toolbar updates

src/transitions/TransitionAnimation.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import { TransitionAnimationProps } from './TransitionAnimation.types';
 import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
@@ -6,11 +7,30 @@ export function TransitionAnimation(props: TransitionAnimationProps): JSX.Elemen
 {
     const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
 
+    const [ showChild, setShowChild ] = useState(false);
+    const [ timeoutInstance, setTimeoutInstance ] = useState<any>(null);
+
+    useEffect(() =>
+    {
+        if(inProp)
+        {
+            clearTimeout(timeoutInstance);
+            setShowChild(true);
+        }
+        else
+        {
+            setTimeoutInstance(setTimeout(() => {
+                setShowChild(false);
+                clearTimeout(timeoutInstance);
+            }, timeout));
+        }
+    }, [ inProp ])
+
     return (
         <Transition in={ inProp } timeout={ timeout }>
             {state => (
                 <div className={ className + " animate__animated" } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
-                    { children }
+                    { showChild && children }
                 </div>
             )}
         </Transition>

src/views/toolbar/ToolbarView.scss

@@ -34,7 +34,7 @@
                     
                     .avatar-image {
                         margin-left: -5px;
-                        margin-top: -20px;
+                        margin-top: -30px;
                     }
 
                     &:hover, &.active {

src/views/toolbar/ToolbarView.tsx

@@ -59,9 +59,9 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
 
     return (
         <>
-            { expandMeToolbar && <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_UP } inProp={ false } timeout={ 300 }>
+            { <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_UP } inProp={ expandMeToolbar } timeout={ 300 }>
                 <ToolbarMeView />
-                </TransitionAnimation> }
+            </TransitionAnimation> }
             <div className="d-flex nitro-toolbar py-1 px-3">
                 <div className="navigation-items navigation-avatar pe-1 me-2">
                     <div className="navigation-item">