Create app header links component

Author: realstoman

src/components/AppHeader.vue

@@ -65,40 +65,7 @@
 			<!-- Header menu links and small screen hamburger menu end -->
 
 			<!-- Header links start -->
-			<div
-				:class="isOpen ? 'block' : 'hidden'"
-				class="m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none"
-			>
-				<router-link
-					to="/projects"
-					class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2"
-					aria-label="Projects"
-					>Projects</router-link
-				>
-				<router-link
-					to="/about"
-					class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
-					aria-label="About Me"
-					>About Me</router-link
-				>
-				<router-link
-					to="/contact"
-					class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
-					aria-label="Contact"
-					>Contact</router-link
-				>
-				<div
-					class="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark"
-				>
-					<button
-						class="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-sm px-4 py-2 mt-2"
-						@click="showModal()"
-						aria-label="Hire Me Button"
-					>
-						Hire Me
-					</button>
-				</div>
-			</div>
+			<AppHeaderLinks :showModal="showModal" :isOpen="isOpen" />
 			<!-- Header links end -->
 
 			<!-- Header right section buttons start -->
@@ -144,11 +111,13 @@
 import ThemeSwitcher from './ThemeSwitcher';
 import HireMeModal from './HireMeModal.vue';
 import feather from 'feather-icons';
+import AppHeaderLinks from './AppHeaderLinks.vue';
 
 export default {
 	components: {
 		ThemeSwitcher,
 		HireMeModal,
+		AppHeaderLinks,
 	},
 	data() {
 		return {

src/components/AppHeaderLinks.vue

@@ -0,0 +1,44 @@
+<template>
+	<div
+		:class="isOpen ? 'block' : 'hidden'"
+		class="m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none"
+	>
+		<router-link
+			to="/projects"
+			class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2"
+			aria-label="Projects"
+			>Projects</router-link
+		>
+		<router-link
+			to="/about"
+			class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
+			aria-label="About Me"
+			>About Me</router-link
+		>
+		<router-link
+			to="/contact"
+			class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
+			aria-label="Contact"
+			>Contact</router-link
+		>
+		<div
+			class="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark"
+		>
+			<button
+				class="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-sm px-4 py-2 mt-2"
+				@click="showModal()"
+				aria-label="Hire Me Button"
+			>
+				Hire Me
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: ['showModal', 'isOpen'],
+};
+</script>
+
+<style lang="scss" scoped></style>