traxxx-web/components/header/header.vue

<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;
	z-index: 1000; /* make sure shadow shows up above content */
	box-shadow: 0 0 3px var(--shadow-weak-10);
}

.title {
	margin: 0;
	display: inline-block;
}

.logo {
	display: flex;
	width: 8rem;
	height: 3rem;
	box-sizing: border-box;
	padding: .75rem;
	margin-right: 1rem;
	fill: var(--primary);
}

.nav {
	display: inline-block;
}

.nav-item .link {
	font-size: .9rem;
	color: var(--shadow-strong-10);
	box-sizing: border-box;
	padding: 1rem;
	height: 100%;

	&:hover {
		text-decoration: none;
	}
}

.link {
	font-weight: bold;

	&.active {
		color: var(--primary);
	}
}
</style>