Moved movies to separate table.

assets/components/header/header.vue

@@ -46,6 +46,20 @@
 						</router-link>
 					</li>
 
+					<li class="nav-item">
+						<router-link
+							v-slot="{ href, isActive, navigate }"
+							to="/movies"
+						>
+							<a
+								class="nav-link"
+								:href="href"
+								:class="{ active: isActive }"
+								@click="navigate"
+							>Movies</a>
+						</router-link>
+					</li>
+
 					<li class="nav-item">
 						<router-link
 							v-slot="{ href, isActive, navigate }"

assets/components/movies/movies.vue

@@ -0,0 +1,11 @@
+<template>
+	<div class="movies">
+		<h1 class="heading">Movies</h1>
+	</div>
+</template>
+
+<style lang="scss">
+.movies {
+    padding: 1rem;
+}
+</style>

assets/components/sidebar/sidebar.vue

@@ -73,6 +73,21 @@
 							</router-link>
 						</li>
 
+						<li class="nav-item">
+							<router-link
+								v-slot="{ href, isActive, navigate }"
+								to="/movies"
+								@click.native="toggleSidebar(false)"
+							>
+								<a
+									class="nav-link"
+									:href="href"
+									:class="{ active: isActive }"
+									@click="navigate"
+								>Movies</a>
+							</router-link>
+						</li>
+
 						<li class="nav-item">
 							<router-link
 								v-slot="{ href, isActive, navigate }"

assets/components/tags/tags.vue

@@ -159,11 +159,6 @@ export default {
 }
 
 .heading {
-	display: inline-block;
-	color: var(--primary);
-	padding: 0 .5rem;
-	margin: .5rem 0 1rem 0;
-    font-size: 1.2rem;
     text-transform: capitalize;
 }