Reinitialized commit. Update and actors overview with some filters.

components/header/header.vue

@@ -0,0 +1,100 @@
+<template>
+	<header class="header">
+		<Link href="/">
+			<h1 class="title">
+				<div
+					class="logo"
+					v-html="logo"
+				/>
+			</h1>
+		</Link>
+
+		<nav class="nav">
+			<ul class="nav-list nolist">
+				<li class="nav-item">
+					<Link
+						class="link"
+						href="/updates"
+					>Updates</Link>
+				</li>
+
+				<li class="nav-item">
+					<Link
+						class="link"
+						href="/actors"
+					>Actors</Link>
+				</li>
+
+				<li class="nav-item">
+					<Link
+						class="link"
+						href="/channels"
+					>Channels</Link>
+				</li>
+
+				<li class="nav-item">
+					<Link
+						class="link"
+						href="/tags"
+					>Tags</Link>
+				</li>
+
+				<li class="nav-item">
+					<Link
+						class="link"
+						href="/movies"
+					>Movies</Link>
+				</li>
+			</ul>
+		</nav>
+	</header>
+</template>
+
+<script setup>
+import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
+</script>
+
+<style scoped>
+.header {
+	display: flex;
+	align-items: center;
+	box-shadow: 0 0 3px var(--shadow-weak-10);
+}
+
+.title {
+	margin: 0;
+	display: inline-block;
+}
+
+.logo {
+	display: flex;
+	width: 8rem;
+	height: 3rem;
+	padding: .75rem;
+	margin-right: 1rem;
+	fill: var(--primary);
+}
+
+.nav {
+	display: inline-block;
+}
+
+.nav-item .link {
+	font-size: .9rem;
+	color: var(--shadow-strong-10);
+	padding: 1rem;
+	height: 100%;
+
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.link {
+	font-weight: bold;
+
+	&.active {
+		color: var(--primary);
+	}
+}
+</style>