Added meta header with sort input to movie page. Highlighting active page in header.

components/header/header.vue

@@ -14,6 +14,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'updates' }"
 						href="/updates"
 					>Updates</Link>
 				</li>
@@ -21,6 +22,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'actors' }"
 						href="/actors"
 					>Actors</Link>
 				</li>
@@ -28,6 +30,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'channels' }"
 						href="/channels"
 					>Channels</Link>
 				</li>
@@ -35,6 +38,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'tags' }"
 						href="/tags"
 					>Tags</Link>
 				</li>
@@ -42,6 +46,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'movies' }"
 						href="/movies"
 					>Movies</Link>
 				</li>
@@ -65,7 +70,7 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+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
@@ -73,6 +78,8 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 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 });
 }