From 0bdb14f5b7a6fe169757e0f15150b96167b51e6d Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Wed, 30 Mar 2022 18:46:55 +0530
Subject: [PATCH] Add className prop in sidebar avatar comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/sidebar-avatar/SidebarAvatar.jsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx b/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
index 7b281454..bc8b7c8f 100644
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
+++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
@@ -9,11 +9,12 @@ import Tooltip from '../../atoms/tooltip/Tooltip';
 import { blurOnBubbling } from '../../atoms/button/script';
 
 const SidebarAvatar = React.forwardRef(({
-  tooltip, active, onClick, onContextMenu,
-  avatar, notificationBadge,
+  className, tooltip, active, onClick,
+  onContextMenu, avatar, notificationBadge,
 }, ref) => {
-  let activeClass = '';
-  if (active) activeClass = ' sidebar-avatar--active';
+  const classes = ['sidebar-avatar'];
+  if (active) classes.push('sidebar-avatar--active');
+  if (className) classes.push(className);
   return (
     <Tooltip
       content={<Text variant="b1">{twemojify(tooltip)}</Text>}
@@ -21,7 +22,7 @@ const SidebarAvatar = React.forwardRef(({
     >
       <button
         ref={ref}
-        className={`sidebar-avatar${activeClass}`}
+        className={classes.join(' ')}
         type="button"
         onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
         onClick={onClick}
@@ -34,6 +35,7 @@ const SidebarAvatar = React.forwardRef(({
   );
 });
 SidebarAvatar.defaultProps = {
+  className: null,
   active: false,
   onClick: null,
   onContextMenu: null,
@@ -41,6 +43,7 @@ SidebarAvatar.defaultProps = {
 };
 
 SidebarAvatar.propTypes = {
+  className: PropTypes.string,
   tooltip: PropTypes.string.isRequired,
   active: PropTypes.bool,
   onClick: PropTypes.func,