Fix toolbar

package-lock.json

@@ -4606,6 +4606,11 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@nitrots/nitro-renderer": "file:../nitro-renderer",
+    "animate.css": "^4.1.1",
     "classnames": "^2.3.1",
     "node-sass": "^5.0.0",
     "react": "^17.0.2",

src/assets/styles/index.scss

@@ -4,6 +4,7 @@
 @import './fontawesome/solid';
 @import './fontawesome/brands';
 @import './fontawesome/regular';
+@import '../node_modules/animate.css/animate.min.css';
 @import './scrollbars';
 @import './slider';
 @import './grid';

src/views/toolbar/ToolbarView.tsx

@@ -145,7 +145,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     return (
         <div className="nitro-toolbar-container">
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
-                <ToolbarMeView setMeExpanded={ setMeExpanded } handleToolbarItemClick={ handleToolbarItemClick } />
+                <ToolbarMeView handleToolbarItemClick={ handleToolbarItemClick } />
             </TransitionAnimation>
             <div className="d-flex justify-content-between align-items-center nitro-toolbar py-1 px-3">
                 <div className="d-flex align-items-center toolbar-left-side">

src/views/toolbar/me/ToolbarMeView.tsx

@@ -1,36 +1,13 @@
-import { MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useRef } from 'react';
+import { FC } from 'react';
 import { ToolbarViewItems } from '../ToolbarView.types';
 import { ToolbarMeViewProps } from './ToolbarMeView.types';
 
 export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
 {
-    const { setMeExpanded = null, handleToolbarItemClick = null } = props;
-
-    const elementRef = useRef<HTMLDivElement>();
-
-    useEffect(() =>
-    {
-        function onClick(event: MouseEvent): void
-        {
-            const element = elementRef.current;
-
-            if((event.target !== element) && !element.contains((event.target as Node)))
-            {
-                setMeExpanded(false);
-            }
-        }
-
-        document.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
-
-        return () =>
-        {
-            document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
-        }
-    }, [ elementRef, setMeExpanded ]);
+    const { handleToolbarItemClick = null } = props;
 
     return (
-        <div ref={ elementRef } className="d-flex nitro-toolbar-me px-1 py-2">
+        <div className="d-flex nitro-toolbar-me px-1 py-2">
             <div className="navigation-items">
                 <div className="navigation-item">
                     <i className="icon icon-me-talents"></i>

src/views/toolbar/me/ToolbarMeView.types.ts

@@ -1,7 +1,5 @@
-import { Dispatch, SetStateAction } from 'react';
 
 export interface ToolbarMeViewProps
 {
-    setMeExpanded: Dispatch<SetStateAction<boolean>>;
     handleToolbarItemClick: (item: string) => void;
 }