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