Party members in header v2 (#8815)

* update comemnt

* flyout on hover

* fix hasClass and isBuffed

* polish members in party header

website/client/components/appHeader.vue

@@ -1,24 +1,26 @@
 <template lang="pug">
 #app-header.row
   member-details(:member="user", @click="$router.push({name: 'avatar'})")
+  .view-party
+    // TODO button should open the party members modal
+    router-link.btn.btn-primary(:active-class="''", :to="{name: 'party'}") {{ $t('viewParty') }}
   .party-members.d-flex(v-if="partyMembers && partyMembers.length > 1")
     member-details(
-      v-for="member in partyMembers",
+      v-for="(member, $index) in partyMembers",
       :key="member._id",
-      v-if="member._id !== user._id",
+      v-if="member._id !== user._id && $index < 10",
       :member="member",
       condensed=true,
-      @click="expandMember(member._id)"
+      @onHover="expandMember(member._id)",
       :expanded="member._id === expandedMember",
     )
-    button.btn.btn-primary {{ $t('viewParty') }}
   .no-party.d-flex.justify-content-center.text-center(v-else)
     .align-self-center(v-once)
       h3 {{ $t('battleWithFriends') }}
       span.small-text(v-html="$t('inviteFriendsParty')")
       br
-      // TODO link to party creation
-      button.btn.btn-primary {{ $t('startAParty') }}
+      // TODO link to party creation or party page if partying solo
+      router-link.btn.btn-primary(:active-class="''", :to="{name: 'party'}") {{ $t('startAParty') }}
 </template>
 
 <style lang="scss" scoped>
@@ -31,6 +33,7 @@
   height: 204px;
   color: $header-color;
   flex-wrap: nowrap;
+  position: relative;
 }
 
 .no-party, .party-members {
@@ -38,7 +41,19 @@
 }
 
 .party-members {
-  overflow-x: auto;
+}
+
+.view-party {
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  padding-right: 40px;
+  height: 100%;
+  background-image: linear-gradient(to right, rgba($purple-50, 0), $purple-50);
+
+  .btn {
+    margin-top: 75%;
+  }
 }
 
 .no-party {