src/components/Header.vue

@@ -1,36 +1,22 @@
 <template>
   <nav id="header" class="main-nav">
-    <img src="https://www.cycloid.io/themes/cycloid/images/owl_logo.png" alt="Cycloid.io" />
-    <h1>Fruits</h1>
+    <router-link to="/">
+      <img src="https://www.cycloid.io/themes/cycloid/images/owl_logo.png" alt="Cycloid.io" />
+      <h1>Fruits</h1>
+    </router-link>
   </nav>
 </template>
 
 <script>
 export default {
-  name: "Header",
-  created() {
-    // const header = document.getElementById("header");
-    // this.observeElmt(header);
-  },
-  methods: {
-    // observeElmt(elmt) {
-    //   const observer = new IntersectionObserver(
-    //     ([e]) => e.target.classList.toggle("box-shadow", e.intersectionRatio < 1),
-    //     { threshold: [1] }
-    //   );
-    //   observer.observe(elmt);
-    // }
-  }
+  name: "Header"
 };
 </script>
 
 <style lang="less">
 nav {
-  display: flex;
-  align-items: center;
   background-color: @secondary-color;
   padding: 0.5rem;
-  // TODO: Use
   box-shadow: 0 0px 14px 0px #cecece;
 
   h1 {
@@ -49,6 +35,11 @@ nav {
     height: calc(58px - 0.5rem * 2);
     z-index: 15;
 
+    a {
+      display: flex;
+      align-items: center;
+    }
+
     img {
       width: 35px;
       height: 35px;