traxxx-web/components/header/header.vue

<template>
	<header class="header">
		<nav class="nav">
			<Link href="/">
				<h1 class="title">
					<div
						class="logo"
						v-html="logo"
					/>
				</h1>
			</Link>

			<ul class="nav-list nolist">
				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'updates' }"
						href="/updates"
					>Updates</Link>
				</li>

				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'actors' }"
						href="/actors"
					>Actors</Link>
				</li>

				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'channels' }"
						href="/channels"
					>Channels</Link>
				</li>

				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'tags' }"
						href="/tags"
					>Tags</Link>
				</li>

				<li class="nav-item">
					<Link
						class="link"
						:class="{ active: activePage === 'movies' }"
						href="/movies"
					>Movies</Link>
				</li>
			</ul>
		</nav>

		<form
			class="search"
			@submit.prevent="search"
		>
			<input
				v-model="query"
				type="search"
				placeholder="Search"
				class="input"
			>

			<Icon icon="search" />
		</form>
	</header>
</template>

<script setup>
import { ref, computed, inject } from 'vue';
import navigate from '#/src/navigate.js';

import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved

const pageContext = inject('pageContext');
const query = ref(pageContext.urlParsed.search.q || '');

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

function search() {
	navigate('/search', { q: query.value }, { redirect: true });
}
</script>

<style scoped>
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	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: flex;
	align-items: center;
}

.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);
	}
}

.search {
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;

	.input {
		height: 100%;
		border: none;
		border-radius: 0;
		border-left: solid 1px var(--shadow-weak-30);
		background: var(--background);
	}

	.icon {
		margin-right: .75rem;
		fill: var(--shadow-weak-10);
	}

	.input:focus + .icon {
		fill: var(--primary);
	}
}
</style>