routeRules: {
    "/**": { prerender: true },
}

routeRules: {
    "/**": { prerender: true },
}

watch(mobileNav, (value) => {
    if (value) {
        document.body.style.overflow = 'visible';
    }
});

watch(mobileNav, (value) => {
    if (value) {
        document.body.style.overflow = 'visible';
    }
});

const mobileNav = ref(false);

const openMobileNav = () => {
    console.log('open');
    mobileNav.value = true;
    document.body.style.overflow = 'hidden';
};

const closeMobileNav = () => {
    console.log('close');
    mobileNav.value = false;
    document.body.style.overflow = 'visible'; // Reset the overflow property to its default value
};

const mobileNav = ref(false);

const openMobileNav = () => {
    console.log('open');
    mobileNav.value = true;
    document.body.style.overflow = 'hidden';
};

const closeMobileNav = () => {
    console.log('close');
    mobileNav.value = false;
    document.body.style.overflow = 'visible'; // Reset the overflow property to its default value
};

<div v-if="mobileNav" class="fixed inset-0 z-50 flex flex-col py-8 mx-auto bg-primary-d h-scren">
            <div class="container flex justify-between w-full px-4 mx-auto">
                <NuxtLink to="/">
                    <img class="w-full h-10 m-auto" :src="siteLogo.filename" alt="">
                </NuxtLink>
                <div>
                    <button @click="closeMobileNav"
                        class="p-2 text-black rounded-full bg-gradient-to-r from-primary to-secondary">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>

                    </button>
                </div>

            </div>
            <div class="my-12 border opacity-60 border-primary-l "></div>
            <nav class="container px-4 mx-auto " v-if="headerMenu">
                <ul class="space-y-8 text-lg font-medium text-white">
                    <li class="my-auto" v-for="blok in headerMenu" :key="blok._uid">
                        <NuxtLink :to="`/${blok.link.cached_url}`" class="hover:text-[#50b0ae] my-auto">
                            {{ blok.link.story.name }}
                        </NuxtLink>
                    </li>

                </ul>
                <div class="my-8 space-y-5">
                    <div v-for="action in quote">
                        <StoryblokComponent class="w-full" :blok="action" />
                    </div>
                    <div v-for="action in contact">
                        <StoryblokComponent class="w-full" :blok="action" />
                    </div>
                </div>
            </nav>
        </div>

<div v-if="mobileNav" class="fixed inset-0 z-50 flex flex-col py-8 mx-auto bg-primary-d h-scren">
            <div class="container flex justify-between w-full px-4 mx-auto">
                <NuxtLink to="/">
                    <img class="w-full h-10 m-auto" :src="siteLogo.filename" alt="">
                </NuxtLink>
                <div>
                    <button @click="closeMobileNav"
                        class="p-2 text-black rounded-full bg-gradient-to-r from-primary to-secondary">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>

                    </button>
                </div>

            </div>
            <div class="my-12 border opacity-60 border-primary-l "></div>
            <nav class="container px-4 mx-auto " v-if="headerMenu">
                <ul class="space-y-8 text-lg font-medium text-white">
                    <li class="my-auto" v-for="blok in headerMenu" :key="blok._uid">
                        <NuxtLink :to="`/${blok.link.cached_url}`" class="hover:text-[#50b0ae] my-auto">
                            {{ blok.link.story.name }}
                        </NuxtLink>
                    </li>

                </ul>
                <div class="my-8 space-y-5">
                    <div v-for="action in quote">
                        <StoryblokComponent class="w-full" :blok="action" />
                    </div>
                    <div v-for="action in contact">
                        <StoryblokComponent class="w-full" :blok="action" />
                    </div>
                </div>
            </nav>
        </div>

export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || 'helo',
    }),
    getters: {
        cartId: () => nuxtStorage.localStorage.getData('cartId'),
    },
    actions: {
        setCartId(id) {
            this.id = id;
            nuxtStorage.localStorage.setData('cartId', id);
        },
    },
});

export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || 'helo',
    }),
    getters: {
        cartId: () => nuxtStorage.localStorage.getData('cartId'),
    },
    actions: {
        setCartId(id) {
            this.id = id;
            nuxtStorage.localStorage.setData('cartId', id);
        },
    },
});

watch(
    () => store.id,
    (newId) => {
        localStorage.setItem('cartId', JSON.stringify(newId));
    },
    { deep: true }
);

watch(
    () => store.id,
    (newId) => {
        localStorage.setItem('cartId', JSON.stringify(newId));
    },
    { deep: true }
);

import { defineStore } from 'pinia';
import nuxtStorage from 'nuxt-storage';

// You can name the return value of `defineStore()` anything you want,
// but it's best to use the name of the store and surround it with `use`
// and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application
export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || null,
    }),
});

import { defineStore } from 'pinia';
import nuxtStorage from 'nuxt-storage';

// You can name the return value of `defineStore()` anything you want,
// but it's best to use the name of the store and surround it with `use`
// and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application
export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || null,
    }),
});

watch(
    () => store.id,
    (newId) => {
        localStorage.setItem('cartId', JSON.stringify(newId));
    },
    { deep: true }
);

watch(
    () => store.id,
    (newId) => {
        localStorage.setItem('cartId', JSON.stringify(newId));
    },
    { deep: true }
);