diff options
Diffstat (limited to 'src/layouts/_ibs/AppLayout.vue')
-rw-r--r-- | src/layouts/_ibs/AppLayout.vue | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/src/layouts/_ibs/AppLayout.vue b/src/layouts/_ibs/AppLayout.vue new file mode 100644 index 00000000..ef3193db --- /dev/null +++ b/src/layouts/_ibs/AppLayout.vue @@ -0,0 +1,93 @@ +<template> + <div class="app-container"> + <app-header + ref="focusTarget" + class="app-header" + :key="routerKey" + @refresh="refresh" + /> + <app-navigation class="app-navigation" /> + <page-container class="app-content"> + <router-view ref="routerView" :key="routerKey" /> + <!-- Scroll to top button --> + <button-back-to-top /> + </page-container> + </div> +</template> + +<script> +import AppHeader from '@/components/_ibs/AppHeader'; +import AppNavigation from '@/components/_ibs/AppNavigation'; +import PageContainer from '@/components/_ibs/Global/PageContainer'; +import ButtonBackToTop from '@/components/_ibs/Global/ButtonBackToTop'; +import JumpLinkMixin from '@/components/_ibs/Mixins/JumpLinkMixin'; + +export default { + name: 'App', + components: { + AppHeader, + AppNavigation, + PageContainer, + ButtonBackToTop, + }, + mixins: [JumpLinkMixin], + data() { + return { + routerKey: 0, + }; + }, + watch: { + $route: function () { + this.$nextTick(function () { + this.setFocus(this.$refs.focusTarget.$el); + }); + }, + }, + mounted() { + this.$root.$on('refresh-application', () => this.refresh()); + }, + methods: { + refresh() { + // Changing the component :key value will trigger + // a component re-rendering and 'refresh' the view + this.routerKey += 1; + }, + }, +}; +</script> + +<style lang="scss" scoped> +.app-container { + display: grid; + grid-template-columns: 100%; + grid-template-rows: auto; + grid-template-areas: + 'header' + 'content'; + + @include media-breakpoint-up($responsive-layout-bp) { + grid-template-columns: $navigation-width 1fr; + grid-template-areas: + 'header header' + 'navigation content'; + } +} + +.app-header { + grid-area: header; + position: sticky; + top: 0; + z-index: $zindex-fixed + 1; +} + +.app-navigation { + grid-area: navigation; +} + +.app-content { + grid-area: content; + background-color: $white; + overflow-x: auto; + min-height: 480px; +} +</style> |