xref: /openbmc/webui-vue/src/layouts/AppLayout.vue (revision 5e7ac490) 
1<template>
2  <div>
3    <app-header ref="focusTarget" />
4    <b-container fluid class="page-container">
5      <b-row no-gutters>
6        <b-col tag="nav" cols="12" md="3" lg="2">
7          <app-navigation />
8        </b-col>
9        <b-col cols="12" md="9" lg="10">
10          <page-container>
11            <router-view ref="routerView" />
12          </page-container>
13        </b-col>
14      </b-row>
15    </b-container>
16  </div>
17</template>
18
19<script>
20import AppHeader from '@/components/AppHeader';
21import AppNavigation from '@/components/AppNavigation';
22import PageContainer from '../components/Global/PageContainer';
23export default {
24  name: 'App',
25  components: {
26    AppHeader,
27    AppNavigation,
28    PageContainer
29  },
30  watch: {
31    $route: function() {
32      // $nextTick = DOM updated
33      this.$nextTick(function() {
34        // Get the focusTarget DOM element
35        let focusTarget = this.$refs.focusTarget.$el;
36
37        // Make focustarget programmatically focussable
38        focusTarget.setAttribute('tabindex', '-1');
39
40        // Focus element
41        focusTarget.focus();
42
43        // Remove tabindex from focustarget
44        // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
45        focusTarget.removeAttribute('tabindex');
46      });
47    }
48  }
49};
50</script>
51
52<style lang="scss" scoped>
53.page-container {
54  margin-right: 0;
55  margin-left: 0;
56  padding-right: 0;
57  padding-left: 0;
58}
59</style>
60