Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layoutService label changes. AppLayout fixes

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-03 01:06:33 +03:00
parent 8ddf9d47bf
commit e0fb57a255
5 changed files with 75 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/layout/AppLayout.vue
View File

@@ -16,29 +16,63 @@
</template>
<script setup>
import { computed } from 'vue';
import { computed, watch, ref, onMounted } from 'vue';
import AppTopbar from './AppTopbar.vue';
import AppFooter from './AppFooter.vue';
import AppSidebar from './AppSidebar.vue';
import AppConfig from './AppConfig.vue';
import { useLayoutService } from '@/composables/layoutService';
import { useThemeService } from '@/composables/theme';
const { onMenuToggle, layoutConfig, layoutState, isSidebarActive } = useLayoutService();
const { appConfig, layoutState } = useThemeService();
const outsideClickListener = ref(null);
const sidebarActive = ref(false);
watch(isSidebarActive, (newVal) => {
if (newVal) {
bindOutsideClickListener();
} else {
unbindOutsideClickListener();
}
});
const containerClass = computed(() => {
return {
'layout-theme-light': appConfig.darkTheme.value === 'light',
'layout-theme-dark': appConfig.darkTheme.value === 'dark',
'layout-overlay': appConfig.menuMode.value === 'overlay',
'layout-static': appConfig.menuMode.value === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && appConfig.menuMode.value === 'static',
'layout-theme-light': layoutConfig.darkTheme.value === 'light',
'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
'layout-overlay': layoutConfig.menuMode.value === 'overlay',
'layout-static': layoutConfig.menuMode.value === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
'layout-overlay-active': layoutState.overlayMenuActive.value,
'layout-mobile-active': layoutState.staticMenuMobileActive.value,
'p-input-filled': appConfig.inputStyle.value === 'filled',
'p-ripple-disabled': !appConfig.ripple.value
'p-input-filled': layoutConfig.inputStyle.value === 'filled',
'p-ripple-disabled': !layoutConfig.ripple.value
};
});
const bindOutsideClickListener = () => {
if (!outsideClickListener.value) {
outsideClickListener.value = (event) => {
if (isOutsideClicked(event)) {
layoutState.overlayMenuActive.value = false;
layoutState.staticMenuMobileActive.value = false;
layoutState.menuHoverActive.value = false;
}
};
document.addEventListener('click', outsideClickListener.value);
}
};
const unbindOutsideClickListener = () => {
if (outsideClickListener.value) {
document.removeEventListener('click', outsideClickListener);
outsideClickListener.value = null;
}
};
const isOutsideClicked = (event) => {
const sidebarEl = document.querySelector('.layout-sidebar');
const topbarEl = document.querySelector('.layout-menu-button');
return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
};
</script>
<style lang="scss" scoped></style>