fix leave and hide click, color and position

packages/rocketchat-theme/client/imports/components/popover.css

@@ -92,6 +92,14 @@
 
 		font-size: var(--popover-item-text-size);
 		align-items: center;
+
+		&--error {
+			color: var(--color-error);
+
+			& .rc-icon {
+				fill: var(--color-error);
+			}
+		}
 	}
 
 	&__icon {

packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css

@@ -136,6 +136,8 @@
 	&__menu {
 		display: none;
 
+		padding: 8px 0 8px 8px;
+
 		&-icon {
 			fill: var(--color-white);
 		}

packages/rocketchat-ui-sidenav/client/accountBox.js

@@ -62,28 +62,28 @@ Template.accountBox.events({
 									name: t('Online'),
 									type: 'set-state',
 									id: 'online',
-									class: 'online'
+									modifier: 'online'
 								},
 								{
 									icon: 'circle',
 									name: t('Away'),
 									type: 'set-state',
 									id: 'away',
-									class: 'away'
+									modifier: 'away'
 								},
 								{
 									icon: 'circle',
 									name: t('Busy'),
 									type: 'set-state',
 									id: 'busy',
-									class: 'busy'
+									modifier: 'busy'
 								},
 								{
 									icon: 'circle',
 									name: t('Invisible'),
 									type: 'set-state',
 									id: 'offline',
-									class: 'offline'
+									modifier: 'offline'
 								}
 							]
 						},

packages/rocketchat-ui-sidenav/client/sidebarItem.js

@@ -19,6 +19,8 @@ Template.sidebarItem.events({
 		return menu.close();
 	},
 	'click .sidebar-item__menu'(e) {
+		e.preventDefault();
+
 		const config = {
 			popoverClass: 'sidebar-item',
 			columns: [
@@ -36,7 +38,8 @@ Template.sidebarItem.events({
 									icon: 'sign-out',
 									name: t('Leave_room'),
 									type: 'sidebar-item',
-									id: 'leave'
+									id: 'leave',
+									modifier: 'error'
 								}
 							]
 						}
@@ -57,7 +60,3 @@ Template.sidebarItem.events({
 		popover.open(config);
 	}
 });
-
-Template.sidebarItem.onCreated(function() {
-	// console.log('sidebarItem', this.data);
-});

packages/rocketchat-ui/client/views/app/popover.html

@@ -9,7 +9,7 @@
 						{{/if}}
 						<ul class="rc-popover__list">
 							{{#each item in group.items}}
-							<li class="rc-popover__item rc-popover__item--{{item.class}}" data-type={{item.type}} data-id={{item.id.toLowerCase}} data-href={{item.href}} data-sidenav={{item.sideNav}}>
+							<li class="rc-popover__item rc-popover__item--{{item.modifier}}" data-type={{item.type}} data-id={{item.id.toLowerCase}} data-href={{item.href}} data-sidenav={{item.sideNav}}>
 									{{#if item.icon}}
 										<span class="rc-popover__icon">
 											{{> icon block="rc-popover__icon-element" icon=item.icon }}

packages/rocketchat-ui/client/views/app/popover.js

@@ -52,6 +52,8 @@ Template.popover.onRendered(function() {
 			left = mousePosition.x - popoverWidth;
 		} else if (mousePosition.x <= popoverWidth) {
 			left = isRtl() ? mousePosition.x + 10 : 10;
+		} else if (mousePosition.x <= windowWidth / 2) {
+			left = mousePosition.x;
 		} else {
 			left = mousePosition.x - popoverWidth;
 		}