xref: /openbmc/webui-vue/src/layouts/AppLayout.vue (revision 511650a9) 
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    setInterval(() => {
49      if (!localStorage.getItem('storedUsername')) {
50        this.$eventBus.$consoleWindow.close();
51        this.refresh();
52      }
53    }, 10000);
54  },
55  methods: {
56    refresh() {
57      // Changing the component :key value will trigger
58      // a component re-rendering and 'refresh' the view
59      this.routerKey += 1;
60    },
61  },
62};
63</script>
64
65<style lang="scss" scoped>
66.app-container {
67  display: grid;
68  grid-template-columns: 100%;
69  grid-template-rows: auto;
70  grid-template-areas:
71    'header'
72    'content';
73
74  @include media-breakpoint-up($responsive-layout-bp) {
75    grid-template-columns: $navigation-width 1fr;
76    grid-template-areas:
77      'header header'
78      'navigation content';
79  }
80}
81
82.app-header {
83  grid-area: header;
84  position: sticky;
85  top: 0;
86  z-index: $zindex-fixed + 1;
87}
88
89.app-navigation {
90  grid-area: navigation;
91}
92
93.app-content {
94  grid-area: content;
95  background-color: $white;
96}
97</style>
98