Added mobile navigation.

components/footer/navigation.vue

@@ -0,0 +1,110 @@
+<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;
+	border: none;
+	background: none;
+	color: var(--highlight-strong-20);
+	font-weight: bold;
+	font-size: .9rem;
+
+	&: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-50) {
+	.nav-item.channels {
+		display: none;
+	}
+}
+</style>