Added mobile navigation.

components/sidebar/sidebar.vue

@@ -0,0 +1,137 @@
+<template>
+	<div
+		class="sidebar-container"
+		@click="emit('sidebar')"
+	>
+		<div
+			class="sidebar"
+			@click.stop
+		>
+			<Link href="/updates">
+				<h1 class="title">
+					<div
+						class="logo"
+						v-html="logo"
+					/>
+				</h1>
+			</Link>
+
+			<ul class="nolist menu">
+				<li
+					class="menu-item"
+					:class="{ active: activePage === 'updates' }"
+				>
+					<a
+						href="/updates"
+						class="menu-link nolink"
+					>Updates</a>
+				</li>
+
+				<li
+					class="menu-item"
+					:class="{ active: activePage === 'actors' }"
+				>
+					<a
+						href="/actors"
+						class="menu-link nolink"
+					>Actors</a>
+				</li>
+
+				<li
+					class="menu-item"
+					:class="{ active: activePage === 'channels' }"
+				>
+					<a
+						href="/channels"
+						class="menu-link nolink"
+					>Channels</a>
+				</li>
+
+				<li
+					class="menu-item"
+					:class="{ active: activePage === 'tags' }"
+				>
+					<a
+						href="/tags"
+						class="menu-link nolink"
+					>Tags</a>
+				</li>
+
+				<li
+					class="menu-item"
+					:class="{ active: activePage === 'movies' }"
+				>
+					<a
+						href="/movies"
+						class="menu-link nolink"
+					>Movies</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+
+import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
+
+const emit = defineEmits(['sidebar']);
+const pageContext = inject('pageContext');
+
+const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
+</script>
+
+<style scoped>
+.sidebar-container {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 200;
+	display: flex;
+	justify-content: flex-end;
+	background: var(--shadow-strong-10);
+}
+
+.sidebar {
+	width: 15rem;
+	max-width: 100%;
+	height: 100%;
+	margin-left: 2rem;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-strong-30);
+}
+
+.title {
+	margin: 0;
+}
+
+.logo {
+	width: 6rem;
+	max-width: 100%;
+	padding: .5rem 1rem .75rem 1rem;
+	fill: var(--primary);
+}
+
+.menu-item {
+	display: block;
+
+	&.active .menu-link {
+		color: var(--primary);
+	}
+}
+
+.menu-link {
+	display: block;
+	padding: .75rem 1rem;
+	font-size: 1.1rem;
+	font-weight: bold;
+	color: var(--shadow-strong-10);
+
+	&:hover {
+		color: var(--primary);
+	}
+}
+</style>