1<template> 2 <div class="app-container"> 3 <app-header ref="focusTarget" class="app-header" @refresh="refresh" /> 4 <app-navigation class="app-navigation" /> 5 <page-container class="app-content"> 6 <router-view ref="routerView" :key="routerKey" /> 7 <!-- Scroll to top button --> 8 <button-back-to-top /> 9 </page-container> 10 </div> 11</template> 12 13<script> 14import AppHeader from '@/components/AppHeader'; 15import AppNavigation from '@/components/AppNavigation'; 16import PageContainer from '@/components/Global/PageContainer'; 17import ButtonBackToTop from '@/components/Global/ButtonBackToTop'; 18 19export default { 20 name: 'App', 21 components: { 22 AppHeader, 23 AppNavigation, 24 PageContainer, 25 ButtonBackToTop, 26 }, 27 data() { 28 return { 29 routerKey: 0, 30 }; 31 }, 32 watch: { 33 $route: function () { 34 // $nextTick = DOM updated 35 this.$nextTick(function () { 36 // Get the focusTarget DOM element 37 let focusTarget = this.$refs.focusTarget.$el; 38 39 // Make focustarget programmatically focussable 40 focusTarget.setAttribute('tabindex', '-1'); 41 42 // Focus element 43 focusTarget.focus(); 44 45 // Remove tabindex from focustarget 46 // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk 47 focusTarget.removeAttribute('tabindex'); 48 }); 49 }, 50 }, 51 mounted() { 52 this.$root.$on('refresh-application', () => this.refresh()); 53 }, 54 methods: { 55 refresh() { 56 // Changing the component :key value will trigger 57 // a component re-rendering and 'refresh' the view 58 this.routerKey += 1; 59 }, 60 }, 61}; 62</script> 63 64<style lang="scss" scoped> 65.app-container { 66 display: grid; 67 grid-template-columns: 100%; 68 grid-template-rows: auto; 69 grid-template-areas: 70 'header' 71 'content'; 72 73 @include media-breakpoint-up($responsive-layout-bp) { 74 grid-template-columns: $navigation-width 1fr; 75 grid-template-areas: 76 'header header' 77 'navigation content'; 78 } 79} 80 81.app-header { 82 grid-area: header; 83 position: sticky; 84 top: 0; 85 z-index: $zindex-fixed + 1; 86} 87 88.app-navigation { 89 grid-area: navigation; 90} 91 92.app-content { 93 grid-area: content; 94 background-color: $white; 95} 96</style> 97