1<template> 2 <main id="main-content" class="page-container"> 3 <slot /> 4 </main> 5</template> 6 7<script> 8import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin'; 9export default { 10 name: 'PageContainer', 11 mixins: [JumpLinkMixin], 12 created() { 13 // Use global event bus instead of removed $root.$on 14 const eventBus = require('@/eventBus').default; 15 eventBus.$on('skip-navigation', () => { 16 this.setFocus(this.$el); 17 }); 18 }, 19 beforeUnmount() { 20 require('@/eventBus').default.$off( 21 'skip-navigation', 22 this.handleSkipNavigation, 23 ); 24 }, 25}; 26</script> 27<style lang="scss" scoped> 28main { 29 width: 100%; 30 height: 100%; 31 padding-top: $spacer * 1.5; 32 padding-bottom: $spacer * 3; 33 padding-inline-start: $spacer; 34 padding-inline-end: $spacer; 35 36 &:focus-visible { 37 box-shadow: inset 0 0 0 2px theme-color('primary'); 38 outline: none; 39 } 40 41 @include media-breakpoint-up($responsive-layout-bp) { 42 padding-inline-start: $spacer * 2; 43 } 44} 45</style> 46