traxxx/assets/components/footer/footer.vue

<template>
	<footer class="footer">
		<span class="segment">© traxxx</span>

		<router-link
			:to="{ name: 'stats' }"
			class="segment footer-link nolink"
		>stats</router-link>

		<a
			v-if="config.discord"
			:href="config.discord"
			target="_blank"
			rel="noopener noreferrer"
			class="segment footer-link nolink discord"
		><Icon icon="discord" /></a>
	</footer>
</template>

<style lang="scss" scoped>
.footer {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--background-dim);
	color: var(--shadow);
	font-size: .8rem;
	font-weight: bold;
	box-shadow: inset -3px 0 3px var(--shadow-hint);
}

.segment {
	display: inline-flex;
	align-items: center;
	padding: .5rem;

	&:not(:last-child) {
		border-right: solid 1px var(--shadow-hint);
	}
}

.footer-link {
	text-decoration: underline;

	&:hover {
		color: var(--primary);

		.icon {
			fill: var(--primary);
		}
	}
}

.discord {
	.icon {
		fill: var(--shadow);
		width: 4rem;
	}
}
</style>