Add responsive layout
The main navigation will be collapsed until the viewport
minimum width reaches the Bootstrap defined 'lg' breakpoint
(defaults to 992px).
- Adding motion variables and updating some CSS values to
use existing Sass variables
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 33faa38..8edc338 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -1,18 +1,10 @@
<template>
- <div>
- <app-header ref="focusTarget" @refresh="refresh" />
- <b-container fluid class="page-container">
- <b-row no-gutters>
- <b-col tag="nav" cols="12" md="3" lg="2">
- <app-navigation />
- </b-col>
- <b-col cols="12" md="9" lg="10">
- <page-container>
- <router-view ref="routerView" :key="routerKey" />
- </page-container>
- </b-col>
- </b-row>
- </b-container>
+ <div class="app-container">
+ <app-header ref="focusTarget" class="app-header" @refresh="refresh" />
+ <app-navigation class="app-navigation" />
+ <page-container class="app-content">
+ <router-view ref="routerView" :key="routerKey" />
+ </page-container>
</div>
</template>
@@ -62,10 +54,35 @@
</script>
<style lang="scss" scoped>
-.page-container {
- margin-right: 0;
- margin-left: 0;
- padding-right: 0;
- padding-left: 0;
+.app-container {
+ display: grid;
+ grid-template-columns: 100%;
+ grid-template-rows: auto;
+ grid-template-areas:
+ 'header'
+ 'content';
+
+ @include media-breakpoint-up($responsive-layout-bp) {
+ grid-template-columns: $navigation-width 1fr;
+ grid-template-areas:
+ 'header header'
+ 'navigation content';
+ }
+}
+
+.app-header {
+ grid-area: header;
+ position: sticky;
+ top: 0;
+ z-index: $zindex-fixed + 1;
+}
+
+.app-navigation {
+ grid-area: navigation;
+}
+
+.app-content {
+ grid-area: content;
+ background-color: $white;
}
</style>