Persistent layouts - preserve state

[talelmishali]

Hello!

As part of my persistent layout, I have a slide-over component (cart), in that component, there is an <inertia-link> that links to the checkout page.
The cart component (slide-over) is displayed conditionally ( showSlideOver: false) and when using with a persistent layout the cart display condition never turns to false and stays open when getting to the checkout page.

Question is, should I extract this link to a button with a method where I set the cart display condition to false and then manually visit the checkout page, or there is a more elegant suitable solution?

Thanks!
Tal.

Cart.vue

<template>
    ...
     <!-- Cart slide-over -->
     <div v-show="showSlideOver" class="...">
    </div>
    ...
</template>

<script>
    import Store from '@/Store/Store'

    export default {
        mixins: [Store],
        data() {
            return {
                showSlideOver: false,
                showCoupon: false,
            }
        },
    }
</script>

Checkout link

<inertia-link :href="route('checkout.index')" class="..."> Checkout </inertia-link>