diff options
Diffstat (limited to 'src/layouts/_sila/AppLayout.vue')
-rw-r--r-- | src/layouts/_sila/AppLayout.vue | 18 |
1 files changed, 16 insertions, 2 deletions
diff --git a/src/layouts/_sila/AppLayout.vue b/src/layouts/_sila/AppLayout.vue index 7ce1c806..53fae569 100644 --- a/src/layouts/_sila/AppLayout.vue +++ b/src/layouts/_sila/AppLayout.vue @@ -2,10 +2,11 @@ <div class="app-container"> <app-header ref="focusTarget" + :key="routerKey" class="app-header" - :router-key="routerKey" @refresh="refresh" /> + <sub-header ref="focusTarget" class="sub-header" :router-key="routerKey" /> <app-navigation class="app-navigation" /> <page-container class="app-content"> <router-view ref="routerView" :key="routerKey" /> @@ -17,6 +18,7 @@ <script> import AppHeader from '@/components/_sila/AppHeader'; +import SubHeader from '@/components/_sila/SubHeader'; import AppNavigation from '@/components/_sila/AppNavigation'; import PageContainer from '@/components/_sila/Global/PageContainer'; import ButtonBackToTop from '@/components/_sila/Global/ButtonBackToTop'; @@ -26,6 +28,7 @@ export default { name: 'App', components: { AppHeader, + SubHeader, AppNavigation, PageContainer, ButtonBackToTop, @@ -60,15 +63,17 @@ export default { .app-container { display: grid; grid-template-columns: 100%; - grid-template-rows: auto; + grid-template-rows: $first-header-height $second-header-height 1fr; grid-template-areas: 'header' + 'subheader' 'content'; @include media-breakpoint-up($responsive-layout-bp) { grid-template-columns: $navigation-width 1fr; grid-template-areas: 'header header' + 'subheader subheader' 'navigation content'; } } @@ -80,7 +85,16 @@ export default { z-index: $zindex-fixed + 1; } +.sub-header { + grid-area: subheader; + position: sticky; + top: $first-header-height; + z-index: $zindex-fixed - 1; +} + .app-navigation { + overflow: auto; + scrollbar-gutter: auto; grid-area: navigation; } |