AppLayout.vue (eb154bbc9f71a923563479919578bd5053795980) AppLayout.vue (74f8687d4ab358c071bd081b0b7709eba5a521c2)
1<template>
1<template>
2 <div>
3 <app-header ref="focusTarget" @refresh="refresh" />
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" :key="routerKey" />
12 </page-container>
13 </b-col>
14 </b-row>
15 </b-container>
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 </page-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 {

--- 33 unchanged lines hidden (view full) ---

57 // a component re-rendering and 'refresh' the view
58 this.routerKey += 1;
59 }
60 }
61};
62</script>
63
64<style lang="scss" scoped>
8 </div>
9</template>
10
11<script>
12import AppHeader from '@/components/AppHeader';
13import AppNavigation from '@/components/AppNavigation';
14import PageContainer from '../components/Global/PageContainer';
15export default {

--- 33 unchanged lines hidden (view full) ---

49 // a component re-rendering and 'refresh' the view
50 this.routerKey += 1;
51 }
52 }
53};
54</script>
55
56<style lang="scss" scoped>
65.page-container {
66 margin-right: 0;
67 margin-left: 0;
68 padding-right: 0;
69 padding-left: 0;
57.app-container {
58 display: grid;
59 grid-template-columns: 100%;
60 grid-template-rows: auto;
61 grid-template-areas:
62 'header'
63 'content';
64
65 @include media-breakpoint-up($responsive-layout-bp) {
66 grid-template-columns: $navigation-width 1fr;
67 grid-template-areas:
68 'header header'
69 'navigation content';
70 }
70}
71}
72
73.app-header {
74 grid-area: header;
75 position: sticky;
76 top: 0;
77 z-index: $zindex-fixed + 1;
78}
79
80.app-navigation {
81 grid-area: navigation;
82}
83
84.app-content {
85 grid-area: content;
86 background-color: $white;
87}
71</style>
88</style>