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;
 }