don't highlight room header buttons when right panel is collapsed

src/components/views/right_panel/GroupHeaderButtons.js

@@ -55,23 +55,23 @@ export default class GroupHeaderButtons extends HeaderButtons {
     }
 
     renderButtons() {
-        const isPhaseGroup = [
+        const groupPhases = [
             RightPanel.Phase.GroupMemberInfo,
             RightPanel.Phase.GroupMemberList,
-        ].includes(this.state.phase);
+        ];
-        const isPhaseRoom = [
+        const roomPhases = [
             RightPanel.Phase.GroupRoomList,
             RightPanel.Phase.GroupRoomInfo,
-        ].includes(this.state.phase);
+        ];
 
         return [
             <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
-                isHighlighted={isPhaseGroup}
+                isHighlighted={this.isPhase(groupPhases)}
                 clickPhase={RightPanel.Phase.GroupMemberList}
                 analytics={['Right Panel', 'Group Member List Button', 'click']}
             />,
             <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-room-nobg.svg"
-                isHighlighted={isPhaseRoom}
+                isHighlighted={this.isPhase(roomPhases)}
                 clickPhase={RightPanel.Phase.GroupRoomList}
                 analytics={['Right Panel', 'Group Room List Button', 'click']}
             />,

src/components/views/right_panel/HeaderButtons.js

@@ -48,6 +48,17 @@ export default class HeaderButtons extends React.Component {
         }, extras));
     }
 
+    isPhase(phases) {
+        if (this.props.collapsedRhs) {
+            return false;
+        }
+        if (Array.isArray(phases)) {
+            return phases.includes(this.state.phase);
+        } else {
+            return phases === this.state.phase;
+        }
+    }
+
     onAction(payload) {
         if (payload.action === "view_right_panel_phase") {
             // only actions coming from header buttons should collapse the right panel

src/components/views/right_panel/RoomHeaderButtons.js

@@ -46,24 +46,24 @@ export default class RoomHeaderButtons extends HeaderButtons {
     }
 
     renderButtons() {
-        const isMembersPhase = [
+        const membersPhases = [
             RightPanel.Phase.RoomMemberList,
             RightPanel.Phase.RoomMemberInfo,
-        ].includes(this.state.phase);
+        ];
 
         return [
             <HeaderButton key="_membersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
-                isHighlighted={isMembersPhase}
+                isHighlighted={this.isPhase(membersPhases)}
                 clickPhase={RightPanel.Phase.RoomMemberList}
                 analytics={['Right Panel', 'Member List Button', 'click']}
             />,
             <HeaderButton key="_filesButton" title={_t('Files')} iconSrc="img/icons-files.svg"
-                isHighlighted={this.state.phase === RightPanel.Phase.FilePanel}
+                isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
                 clickPhase={RightPanel.Phase.FilePanel}
                 analytics={['Right Panel', 'File List Button', 'click']}
             />,
             <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/icons-notifications.svg"
-                isHighlighted={this.state.phase === RightPanel.Phase.NotificationPanel}
+                isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
                 clickPhase={RightPanel.Phase.NotificationPanel}
                 analytics={['Right Panel', 'Notification List Button', 'click']}
             />,