From 75fef86f678886043ae35e3ad581aaddc0b87636 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Tue, 11 May 2021 22:12:42 -0300
Subject: [PATCH] Toolbar updates

---
 src/transitions/TransitionAnimation.tsx | 22 +++++++++++++++++++++-
 src/views/toolbar/ToolbarView.scss      |  2 +-
 src/views/toolbar/ToolbarView.tsx       |  4 ++--
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/transitions/TransitionAnimation.tsx b/src/transitions/TransitionAnimation.tsx
index 0104f42d..7f343416 100644
--- a/src/transitions/TransitionAnimation.tsx
+++ b/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>
diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss
index 26d22d2e..ff9796be 100644
--- a/src/views/toolbar/ToolbarView.scss
+++ b/src/views/toolbar/ToolbarView.scss
@@ -34,7 +34,7 @@
                     
                     .avatar-image {
                         margin-left: -5px;
-                        margin-top: -20px;
+                        margin-top: -30px;
                     }
 
                     &:hover, &.active {
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index c8b87457..881cfbf4 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/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">