67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<template>
|
|
<div :class="containerClass">
|
|
<AppNews />
|
|
<AppTopBar @menubutton-click="onMenuButtonClick" />
|
|
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
|
|
<div class="layout-content">
|
|
<app-menu :active="sidebarActive" />
|
|
<div class="layout-content-slot">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
<AppFooter />
|
|
<Toast />
|
|
<Toast position="top-left" group="tl" />
|
|
<Toast position="bottom-left" group="bl" />
|
|
<Toast position="bottom-right" group="br" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Toast from '@/volt/toast';
|
|
import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom';
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { computed, ref, watch } from 'vue';
|
|
|
|
const { layoutState } = useLayout();
|
|
const route = useRoute();
|
|
const toast = useToast();
|
|
const sidebarActive = ref(false);
|
|
|
|
const containerClass = computed(() => {
|
|
return [
|
|
{
|
|
'layout-news-active': layoutState.newsActive
|
|
}
|
|
];
|
|
});
|
|
|
|
const onMenuButtonClick = () => {
|
|
if (sidebarActive.value) {
|
|
sidebarActive.value = false;
|
|
unblockBodyScroll('blocked-scroll');
|
|
} else {
|
|
sidebarActive.value = true;
|
|
blockBodyScroll('blocked-scroll');
|
|
}
|
|
};
|
|
|
|
const onMaskClick = () => {
|
|
sidebarActive.value = false;
|
|
unblockBodyScroll('blocked-scroll');
|
|
};
|
|
|
|
watch(
|
|
() => route.path,
|
|
() => {
|
|
// if (!import.meta.client || typeof window === 'undefined') {
|
|
// return;
|
|
// }
|
|
|
|
sidebarActive.value = false;
|
|
unblockBodyScroll('blocked-scroll');
|
|
toast.removeAllGroups();
|
|
}
|
|
);
|
|
</script>
|