traxxx-web/components/footer/navigation.vue

<template>
	<nav class="nav-list noselect">
		<a
			href="/updates"
			class="nav-item updates nolink"
			:class="{ active: activePage === 'updates' }"
		>
			<div class="nav-pill">Updates</div>
		</a>

		<a
			href="/actors"
			class="nav-item actors nolink"
			:class="{ active: activePage === 'actors' }"
		>
			<div class="nav-pill">Actors</div>
		</a>

		<a
			href="/channels"
			class="nav-item channels nolink"
			:class="{ active: activePage === 'channels' }"
		>
			<div class="nav-pill">Channels</div>
		</a>

		<button
			class="nav-item nav-button"
			@click="emit('sidebar')"
		>
			<div class="nav-pill">
				<Icon
					icon="menu"
				/>
			</div>
		</button>
	</nav>
</template>

<script setup>
import { computed, inject } from 'vue';

const emit = defineEmits(['sidebar']);
const pageContext = inject('pageContext');

const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
</script>

<style scoped>
.nav-list {
	display: flex;
	align-items: stretch;
	flex-shrink: 0;
	position: relative; /* required for box-shadow to show */
	background: var(--grey-dark-40);
	box-shadow: 0 0 3px var(--shadow-weak-10);
}

.nav-item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	padding: .5rem 0;
	border: none;
	background: none;
	color: var(--highlight-strong-20);
	font-weight: bold;
	font-size: .9rem;

	&:first-child {
		padding-left: .5rem;
	}

	&:last-child {
		padding-right: .5rem;
	}

	&:hover {
		cursor: pointer;

		.nav-pill {
			color: var(--text-light);
			background: var(--highlight-weak-30);
		}

		.icon {
			fill: var(--text-light);
		}
	}

	&.active {
		color: var(--text-light);
	}

	.icon {
		width: 1.5rem;
		height: 1.5rem;
		fill: var(--highlight-strong-10);
	}
}

.nav-pill {
	width: 100%;
	height: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .5rem 1rem;
	border-radius: 1.5rem;
}

@media(--small-60) {
	.nav-item.channels {
		display: none;
	}
}
</style>