restyled header and add subheader

1 files changed, 13 insertions, 1 deletions

diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 0b78e5b1..f53601c9 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -6,6 +6,7 @@
       :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/AppHeader';
+import SubHeader from '@/components/SubHeader';
 import AppNavigation from '@/components/AppNavigation';
 import PageContainer from '@/components/Global/PageContainer';
 import ButtonBackToTop from '@/components/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: 56px 39px 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,6 +85,13 @@ export default {
   z-index: $zindex-fixed + 1;
 }
 
+.sub-header {
+  grid-area: subheader;
+  position: sticky;
+  top: 56px;
+  z-index: $zindex-fixed + 1;
+}
+
 .app-navigation {
   grid-area: navigation;
 }