Apply 50% opacity to left breadcrumbs

Fixes https://github.com/vector-im/riot-web/issues/8564

We listen for membership changes to make sure the state is kept up to date.

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -47,6 +47,9 @@ limitations under the License.
         transform: scale(0);
     }
 
+    .mx_RoomBreadcrumbs_left {
+        opacity: 0.5;
+    }
 
     // Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar
     // will deal with left/right positioning for us. Normally we'd use position:sticky on

src/components/views/rooms/RoomBreadcrumbs.js

@@ -52,10 +52,15 @@ export default class RoomBreadcrumbs extends React.Component {
                 console.error("Failed to parse breadcrumbs:", e);
             }
         }
+
+        MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
     }
 
     componentWillUnmount() {
         dis.unregister(this._dispatcherRef);
+
+        const client = MatrixClientPeg.get();
+        if (client) client.removeListener("Room.myMembership", this.onMyMembership);
     }
 
     componentDidUpdate() {
@@ -81,6 +86,13 @@ export default class RoomBreadcrumbs extends React.Component {
         }
     }
 
+    onMyMembership = (room, membership) => {
+        if (membership === "leave" || membership === "ban") {
+            // Force left rooms to render appropriately
+            this.forceUpdate();
+        }
+    };
+
     _appendRoomId(roomId) {
         const room = MatrixClientPeg.get().getRoom(roomId);
         if (!room) {
@@ -136,6 +148,7 @@ export default class RoomBreadcrumbs extends React.Component {
                 "mx_RoomBreadcrumbs_crumb": true,
                 "mx_RoomBreadcrumbs_preAnimate": isFirst && !animated,
                 "mx_RoomBreadcrumbs_animate": isFirst,
+                "mx_RoomBreadcrumbs_left": !['invite', 'join'].includes(room.getMyMembership()),
             });
 
             let tooltip = null;