AppLayout.vue
2.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<template>
<VaLayout
:top="{ fixed: true, order: 2 }"
:left="{ fixed: true, absolute: breakpoints.mdDown, order: 1, overlay: breakpoints.mdDown && !isSidebarMinimized }"
@leftOverlayClick="isSidebarMinimized = true"
>
<template #top>
<AppNavbar :is-mobile="isMobile" />
</template>
<template #left>
<AppSidebar :minimized="isSidebarMinimized" :animated="!isMobile" :mobile="isMobile" />
</template>
<template #content>
<div :class="{ minimized: isSidebarMinimized }" class="app-layout__sidebar-wrapper">
<div v-if="isFullScreenSidebar" class="flex justify-end">
<VaButton class="px-4 py-4" icon="md_close" preset="plain" @click="onCloseSidebarButtonClick" />
</div>
</div>
<AppLayoutNavigation v-if="!isMobile" class="p-4" />
<main class="p-4 pt-0">
<article>
<RouterView />
</article>
</main>
</template>
</VaLayout>
</template>
<script setup>
import { onBeforeUnmount, onMounted, ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { onBeforeRouteUpdate } from 'vue-router'
import { useBreakpoint } from 'vuestic-ui'
import { useGlobalStore } from '../stores/global-store'
import AppLayoutNavigation from '../components/app-layout-navigation/AppLayoutNavigation.vue'
import AppNavbar from '../components/navbar/AppNavbar.vue'
import AppSidebar from '../components/sidebar/AppSidebar.vue'
const GlobalStore = useGlobalStore()
const breakpoints = useBreakpoint()
const sidebarWidth = ref('16rem')
const sidebarMinimizedWidth = ref(undefined)
const isMobile = ref(false)
const isTablet = ref(false)
const { isSidebarMinimized } = storeToRefs(GlobalStore)
const onResize = () => {
isSidebarMinimized.value = breakpoints.mdDown
isMobile.value = breakpoints.smDown
isTablet.value = breakpoints.mdDown
sidebarMinimizedWidth.value = isMobile.value ? '0' : '4.5rem'
sidebarWidth.value = isTablet.value ? '100%' : '16rem'
}
onMounted(() => {
window.addEventListener('resize', onResize)
onResize()
})
onBeforeUnmount(() => {
window.removeEventListener('resize', onResize)
})
onBeforeRouteUpdate(() => {
if (breakpoints.mdDown) {
// Collapse sidebar after route change for Mobile
isSidebarMinimized.value = true
}
})
const isFullScreenSidebar = computed(() => isTablet.value && !isSidebarMinimized.value)
const onCloseSidebarButtonClick = () => {
isSidebarMinimized.value = true
}
</script>
<style lang="scss" scoped>
// Prevent icon jump on animation
.va-sidebar {
width: unset !important;
min-width: unset !important;
}
</style>