<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useStateStore } from 'stores/useStateStore';

const stateStore = useStateStore();

onMounted(() => {
    stateStore.toggleSubToolbar();
});

onUnmounted(() => {
    stateStore.toggleSubToolbar();
});
</script>

<template>
    <QToolbar class="bg-vn-section-color justify-end sticky">
        <slot name="st-data">
            <div id="st-data"></div>
        </slot>
        <QSpace />
        <slot name="st-actions">
            <div id="st-actions"></div>
        </slot>
    </QToolbar>
</template>
<style lang="scss">
.q-toolbar {
    background: var(--vn-section-color);
}
</style>
<style lang="scss" scoped>
.sticky {
    position: sticky;
    top: 61px;
    z-index: 1;
}
@media (max-width: $breakpoint-sm) {
    .sticky {
        top: 90px;
    }
}
</style>
