diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-04-28 15:28:17 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-04-28 15:28:17 +0300 |
commit | 6b73ccbfeb4dd2bab907e6226e0655de99a56e13 (patch) | |
tree | a150912d797c0be22a8bdf4950cd1ad1c8d8ee73 /src/layouts | |
parent | 3f9ce4eaf391733e8769caec8da84302c012b21e (diff) | |
download | webui-vue-6b73ccbfeb4dd2bab907e6226e0655de99a56e13.tar.xz |
restyled header and add subheader
Diffstat (limited to 'src/layouts')
-rw-r--r-- | src/layouts/AppLayout.vue | 14 |
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; } |