Add SVG pattern on background

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="main-nav">
+  <nav id="header" class="main-nav">
     <img src="https://www.cycloid.io/themes/cycloid/images/owl_logo.png" alt="Cycloid.io" />
     <h1>Fruits</h1>
   </nav>
@@ -7,7 +7,20 @@
 
 <script>
 export default {
-  name: "Header"
+  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);
+    // }
+  }
 };
 </script>
 
@@ -17,7 +30,8 @@ nav {
   align-items: center;
   background-color: @secondary-color;
   padding: 0.5rem;
-  box-shadow: 0 19px 34px -15px #d2d2f2;
+  // TODO: Use
+  box-shadow: 0 0px 14px 0px #cecece;
 
   h1 {
     margin: 0;
@@ -26,9 +40,11 @@ nav {
   }
 
   &.main-nav {
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
+    right: 0;
+    transition: all 0.3s ease-in-out;
     width: 100%;
     height: calc(58px - 0.5rem * 2);
     z-index: 15;