additions to product page

components/HeaderBlock.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- xl -->
     <div class="w-full border-b border-border">
-      <UiContainer>
+      <UiContainer class="relative">
         <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
           <ul class="flex items-center justify-between whitespace-nowrap w-full">
             <li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index"
@@ -18,18 +18,21 @@
           <div class="w-full flex items-center justify-between">
             <div class="flex items-center gap-[30px]">
               <i class="uil uil-user text-[31px] cursor-pointer"></i>
-              <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
+              <i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
             </div>
             <div class="flex">
               <LangSwitcher />
               <CountryCurrencySelector />
             </div>
             <ThemeSwitcher />
-            <button @click="navigateToShop"
+            <button @click="menuStore.navigateToShop"
               class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter">
               {{ $t('eshop') }}
             </button>
           </div>
+          <div v-if="openCart" class="max-w-[1067px] absolute top-[130px] z-50 right-20">
+            <CartPopup />
+          </div>
         </div>
       </UiContainer>
     </div>
@@ -209,19 +212,19 @@
   </div>
 </template>
 <script lang="ts" setup>
+import CartPopup from "./CartPopup.vue";
 import CountryCurrencySelector from "./CountryCurrencySelector.vue";
 import LangSwitcher from "./LangSwitcher.vue";
 
 const menuStore = useMenuStore();
+const productStore = useProductStore();
 const open = ref(false);
+const openCart = ref(false);
 const colorMode = useColorMode();
 
+productStore.getCart()
+
 const route = useRoute()
-
-function navigateToShop() {
-  menuStore.navigateToItem(menuStore.menuItems?.items.find(item => item.page_name === 'shop'))
-}
-
 const isDark = computed({
   get() {
     return colorMode.value === "dark";