Add animation on hover in sidebar

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

diff --git a/src/app/atoms/tooltip/Tooltip.jsx b/src/app/atoms/tooltip/Tooltip.jsx
index 131c6869934d76847bbf1aebd9ad239d19fa8b79..0f9067f59e90f38b25bdc5612c9d0cb87372cc45 100644 (file)
--- a/src/app/atoms/tooltip/Tooltip.jsx
+++ b/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,
 };
 

diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
index 3f445dfd4becc1af0cd0c1260883e86569948ec9..ecb3812854d86f7f20f31de1221ad8225dae7cc1 100644 (file)
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
+++ b/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;
 

diff --git a/src/app/organisms/navigation/SideBar.jsx b/src/app/organisms/navigation/SideBar.jsx
index b93a6b52a5e887fe5d39b9416a44e1dbac516a09..3be5e195788b4791fa2aff48a56a216466076bbb 100644 (file)
--- a/src/app/organisms/navigation/SideBar.jsx
+++ b/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">