2 files changed, 73 insertions, 0 deletions
diff --git a/components/NavLink/NavLink.test.js b/components/NavLink/NavLink.test.js
new file mode 100644
index 0000000..a5da412
--- /dev/null
+++ b/components/NavLink/NavLink.test.js
@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils';
+import NavLink from './index.vue';
+
+describe('NavLink', () => {
+  // Now mount the component and you have the wrapper
+  const wrapper = mount(NavLink);
+
+  wrapper.setProps({ link: '/link', name: 'Link' });
+
+  it('renders the correct markup', () => {
+    expect(wrapper.html()).toContain(`  <li class="navlink">
+    <a class="link" href="/link">Link</a>
+  </li>`);
+  });
+
+  // it's also easy to check for the existence of elements
+  it('has a button', () => {
+    expect(wrapper.contains('button')).toBe(true);
+  });
+});
diff --git a/components/NavLink/index.vue b/components/NavLink/index.vue
new file mode 100644
index 0000000..8915585
--- /dev/null
+++ b/components/NavLink/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <li class="navlink">
+    <a v-if="external" class="link" target="_blank" rel="”noopener”" :href="link">{{ name }}</a>
+    <router-link v-else class="link" :to="link">{{ name }}</router-link>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    link: String,
+    name: String,
+    external: { type: Boolean, default: false }
+  }
+};
+</script>
+
+<style scoped>
+@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");
+
+.link {
+  font-family: "Roboto Slab", serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  text-decoration: none;
+  color: #181818;
+
+  padding: 10px;
+
+  border-radius: 5px;
+}
+
+.link:hover {
+  background-color: #cfcfcf;
+}
+
+.navlink {
+  list-style-type: none;
+
+  margin: 10px;
+}
+
+.router-link-exact-active {
+  background-color: #ececec !important;
+}
+
+@media (max-width: 1300px) {
+  .navlink {
+    margin: 0;
+  }
+}
+</style>
\ No newline at end of file