Open space options on right click pinned space icon

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

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

@@ -12,7 +12,8 @@ import { blurOnBubbling } from '../../atoms/button/script';
 
 const SidebarAvatar = React.forwardRef(({
   tooltip, text, bgColor, imageSrc,
-  iconSrc, active, onClick, isUnread, notificationCount, isAlert,
+  iconSrc, active, onClick, onContextMenu,
+  isUnread, notificationCount, isAlert,
 }, ref) => {
   let activeClass = '';
   if (active) activeClass = ' sidebar-avatar--active';
@@ -27,6 +28,7 @@ const SidebarAvatar = React.forwardRef(({
         type="button"
         onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
         onClick={onClick}
+        onContextMenu={onContextMenu}
       >
         <Avatar
           text={text}
@@ -52,6 +54,7 @@ SidebarAvatar.defaultProps = {
   imageSrc: null,
   active: false,
   onClick: null,
+  onContextMenu: null,
   isUnread: false,
   notificationCount: 0,
   isAlert: false,
@@ -65,6 +68,7 @@ SidebarAvatar.propTypes = {
   iconSrc: PropTypes.string,
   active: PropTypes.bool,
   onClick: PropTypes.func,
+  onContextMenu: PropTypes.func,
   isUnread: PropTypes.bool,
   notificationCount: PropTypes.oneOfType([
     PropTypes.string,

src/app/organisms/navigation/SideBar.jsx

@@ -5,12 +5,14 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import {
-  selectTab, openInviteList, openSearch, openSettings,
+  selectTab, openInviteList, openSearch,
+  openSettings, openReusableContextMenu,
 } from '../../../client/action/navigation';
-import { abbreviateNumber } from '../../../util/common';
+import { abbreviateNumber, getEventCords } from '../../../util/common';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
+import SpaceOptions from '../../molecules/space-options/SpaceOptions';
 
 import HomeIC from '../../../../public/res/ic/outlined/home.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
@@ -96,6 +98,15 @@ function SideBar() {
     };
   }, []);
 
+  const openSpaceOptions = (e, spaceId) => {
+    e.preventDefault();
+    openReusableContextMenu(
+      'right',
+      getEventCords(e, '.sidebar-avatar'),
+      (closeMenu) => <SpaceOptions roomId={spaceId} afterOptionSelect={closeMenu} />,
+    );
+  };
+
   function getHomeNoti() {
     const orphans = roomList.getOrphans();
     let noti = null;
@@ -174,6 +185,7 @@ function SideBar() {
                       notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
                       isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
                       onClick={() => selectTab(shortcut)}
+                      onContextMenu={(e) => openSpaceOptions(e, sRoomId)}
                     />
                   );
                 })