changes

src/components/GdprConsent.vue

@@ -0,0 +1,121 @@
+<template>
+  <div v-if="!hideGdpr" class="gdpr-overlay">
+    <section class="gdpr-container">
+      <div class="gdpr-content">
+        <div class="gdpr-text">{{ $t('gdpr.text') }} <a href="https://tayronafoods.myshopify.com/pages/gdpr-privacy-policy">{{ $t('gdpr.policy') }}</a></div>
+        <div class="gdpr-buttons">
+          <button class="secondary" @click="closeGdpr">{{ $t('gdpr.reject')}}</button>
+          <button @click="enableGdpr">{{ $t('gdpr.accept')}}</button>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { bootstrap, setOptions } from 'vue-gtag';
+
+export default {
+  data() {
+    return {
+      hideGdpr: false,
+    };
+  },
+  methods: {
+    async enableGdpr() {
+      setOptions({
+        config: { id: 'G-WSGLW74RC1',  },
+      });
+      const gtag = await bootstrap();
+      this.closeGdpr();
+    },
+    closeGdpr() {
+      this.hideGdpr = true;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .gdpr {
+    &-overlay {
+      position: fixed;
+      top:0;
+      right:0;
+      bottom: 0;
+      left: 0;
+      z-index: 20;
+      background-color: rgba(255, 255, 255, 0.3);
+      width: 100%;
+    }
+
+    &-container {
+      position: relative;
+      left: 0;
+      width: 700px;
+      z-index: 21;
+      margin: 0 auto;
+      background-color: #fff;
+      box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
+      border-radius: 6px;
+    }
+
+    &-content {
+      background-color: #fefefe;
+      color: #121212;
+      width: 100%;
+      margin: 0 auto;
+      padding: 16px 32px;
+      height: auto;
+      display: grid;
+      
+      align-items: center;
+      justify-items: center;
+      font-size: 14px;
+      gap: 20px;
+      border-radius: 6px;
+    }
+
+    &-buttons {
+      display: flex;
+      gap: 16px;
+    }
+  }
+
+  @media only screen and (min-width: 961px) {
+    .gdpr {
+      &-container {
+        top:30%;  
+      }
+
+      &-content {
+        grid-template-columns: 4fr auto;
+      }
+    }
+  }
+
+  // @media only screen and (max-width: 960px) {
+
+  // }
+
+  @media only screen and (max-width: 767px) {
+    .gdpr {
+      &-container {
+        position: absolute;
+        bottom: 0;
+        border-radius: 0;
+        width: 100%;
+      }
+
+      &-content {
+        grid-template-rows: 1fr;
+      }
+
+      &-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+    }
+  }
+</style>

src/components/Menu.vue

@@ -73,7 +73,7 @@ export default {
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1000;
+    z-index: 10;
     width: 100%;
 
     nav {