MusareFork/frontend/src/pages/Station/components/Sidebar/Users.vue

<template>
	<div id="users">
		<h5 class="has-text-centered">Total users: {{ userCount }}</h5>

		<transition-group name="notification-box">
			<h6
				class="has-text-centered"
				v-if="users.loggedOut.length > 0"
				key="logged-out-users"
			>
				{{ users.loggedOut.length }}
				{{ users.loggedOut.length > 1 ? "users are" : "user is" }}
				logged-out.
			</h6>
			<h6
				class="has-text-centered"
				v-else-if="
					users.loggedIn.length === 1 && users.loggedOut.length === 0
				"
				key="only-me"
			>
				It's just you in the station!
			</h6>
		</transition-group>

		<br />

		<aside class="menu">
			<ul class="menu-list">
				<li v-for="(user, index) in users.loggedIn" :key="index">
					<router-link
						:to="{
							name: 'profile',
							params: { username: user.username }
						}"
						target="_blank"
					>
						<img
							:src="
								user.avatar.url &&
								user.avatar.type === 'gravatar'
									? `${user.avatar.url}?d=${notesUri}&s=250`
									: '/assets/notes.png'
							"
							onerror="this.src='/assets/notes.png'; this.onerror=''"
						/>

						{{ user.username }}
					</router-link>
				</li>
			</ul>
		</aside>
	</div>
</template>

<script>
import { mapState } from "vuex";

export default {
	data() {
		return {
			notesUri: ""
		};
	},
	computed: mapState({
		users: state => state.station.users,
		userCount: state => state.station.userCount
	}),
	mounted() {
		lofig.get("frontendDomain").then(frontendDomain => {
			this.notesUri = encodeURI(`${frontendDomain}/assets/notes.png`);
		});
	}
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss";

.night-mode {
	#users {
		background-color: $night-mode-bg-secondary !important;
		border: 0 !important;
	}

	a {
		color: $night-mode-text;
		background-color: $dark-grey-2 !important;
		border: 0 !important;

		&:hover {
			color: lighten($night-mode-text, 10%) !important;
		}
	}
}

.notification-box-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}
.notification-box-enter,
.notification-box-leave-to {
	opacity: 0;
}

#users {
	background-color: #fff;
	margin-bottom: 20px;
	padding: 10px;
	border-radius: 0 0 5px 5px;
	max-height: 100%;

	li {
		margin-top: 10px;

		a {
			display: flex;
			align-items: center;
			padding: 5px 10px;
			border: 0.5px $light-grey-2 solid;
			border-radius: 3px;
			cursor: pointer;

			&:hover {
				background-color: #eee;
				color: #000;
			}

			img {
				background-color: #fff;
				width: 35px;
				height: 35px;
				border-radius: 100%;
				border: 2px solid $light-grey;
				margin-right: 10px;
			}
		}
	}

	h5 {
		font-size: 20px;
		margin-top: 20px;
	}
}
</style>