xref: /openbmc/webui-vue/src/layouts/AppLayout.vue (revision 7d6b44cb263da09e575c7cb28cab88c1eb339c7b) 
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@import '@/assets/styles/bmc/helpers/_index.scss';
67@import '@/assets/styles/bootstrap/_helpers.scss';
68
69.app-container {
70  display: grid;
71  grid-template-columns: 100%;
72  grid-template-rows: auto;
73  grid-template-areas:
74    'header'
75    'content';
76
77  @include media-breakpoint-up($responsive-layout-bp) {
78    grid-template-columns: $navigation-width 1fr;
79    grid-template-areas:
80      'header header'
81      'navigation content';
82  }
83}
84
85.app-header {
86  grid-area: header;
87  position: sticky;
88  top: 0;
89  z-index: $zindex-fixed + 1;
90}
91
92.app-navigation {
93  grid-area: navigation;
94}
95
96.app-content {
97  grid-area: content;
98  background-color: $white;
99}
100</style>
101