adding sticky header

src/App.vue

@@ -1,9 +1,37 @@
-<script setup>
+<script>
   import Footer from './components/Footer.vue';
+
+  export default {
+    data() {
+      return {
+        sticky: false
+      }
+    },
+    components: { Footer },
+    created() {
+      window.addEventListener('scroll', this.handleScroll);
+    },
+    destroyed() {
+      window.removeEventListener('scroll', this.handleScroll);
+    },
+    computed: {
+      stickyClass() {
+        return `${this.sticky ? 'has-sticky' : ''}`;
+      }
+    },
+    methods: {
+      handleScroll() {
+        if (this.$route.name === 'contact') {
+          return false;
+        }
+        this.sticky = window.scrollY > 60;
+      },
+    },
+}
 </script>
 
 <template>
-  <div class="main-container">
+  <div class="main-container" :class="stickyClass">
     <RouterView />
     <Footer></Footer>
   </div>
@@ -41,5 +69,9 @@
         text-align: center;
       }
     }
+
+    .has-sticky & {
+      margin-top: 120px;
+    }
   }
 </style>

src/components/Menu.vue

@@ -6,8 +6,9 @@ export default {
         type: String,
         title: String,
     },
-    components: { LocaleSelector }
+    components: { LocaleSelector },
 }
+
 </script>
 
 <template>
@@ -36,6 +37,7 @@ export default {
     height: 574px;
     background-repeat: no-repeat;
     background-size: contain;
+    transition: background-color .3s ease-in-out;
 
     .overlay {
       width: 100%;
@@ -108,5 +110,24 @@ export default {
         background: transparent;
       }
     }
+
+    .has-sticky & {
+      background-color: #121212;
+      background-image: none;
+      height: 120px;
+      position: fixed;
+      top: 0px;
+      left: 0px;
+      z-index: 1000;
+      width: 100%;
+      .overlay {
+        background: #000;
+        width: 1366px;
+        margin: 0 auto;
+      }
+      .title {
+        display: none;
+      }
+    }
   }
 </style>