Add animation on hover in sidebar

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/atoms/tooltip/Tooltip.jsx

@@ -4,7 +4,7 @@ import './Tooltip.scss';
 import Tippy from '@tippyjs/react';
 
 function Tooltip({
-  className, placement, content, children,
+  className, placement, content, delay, children,
 }) {
   return (
     <Tippy
@@ -14,7 +14,7 @@ function Tooltip({
       arrow={false}
       maxWidth={250}
       placement={placement}
-      delay={[0, 0]}
+      delay={delay}
       duration={[100, 0]}
     >
       {children}
@@ -25,12 +25,14 @@ function Tooltip({
 Tooltip.defaultProps = {
   placement: 'top',
   className: '',
+  delay: [200, 0],
 };
 
 Tooltip.propTypes = {
   className: PropTypes.string,
   placement: PropTypes.string,
   content: PropTypes.node.isRequired,
+  delay: PropTypes.arrayOf(PropTypes.number),
   children: PropTypes.node.isRequired,
 };
 

src/app/molecules/sidebar-avatar/SidebarAvatar.scss

@@ -14,6 +14,16 @@
 
     margin: 0 !important;
   }
+  & .avatar-container,
+  & .notification-badge {
+    transition: transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97);
+  }
+  &:hover .avatar-container {
+    transform: translateX(4px)
+  }
+  &:hover .notification-badge {
+    transform: translate(calc(20% + 4px), -20%);
+  }
   &:focus {
     outline: none;
   }
@@ -33,7 +43,7 @@
 
     width: 3px;
     height: 12px;
-    background-color: var(--ic-surface-normal);
+    background-color: var(--tc-surface-high);
     border-radius: 0 4px 4px 0;
     transition: height 200ms linear;
 

src/app/organisms/navigation/SideBar.jsx

@@ -175,7 +175,6 @@ function SideBar() {
                 notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0}
                 isAlert={dmsNoti?.highlight > 0}
               />
-              <SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
             </div>
             <div className="sidebar-divider" />
             <div className="space-container">