salix-front/src/components/ui/VnSubToolbar.vue

44 lines
837 B
Vue

<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>