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/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 28f4c71..2847e66 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -1,59 +1,78 @@
<template>
- <b-nav vertical>
- <b-nav-item to="/"><icon-overview />Overview</b-nav-item>
+ <div>
+ <div class="nav-container" :class="{ open: isNavigationOpen }">
+ <nav ref="nav">
+ <b-nav vertical>
+ <b-nav-item to="/"><icon-overview />Overview</b-nav-item>
- <li class="nav-item">
- <b-button v-b-toggle.health-menu variant="link">
- <icon-health />Health
- <icon-expand class="icon-expand" />
- </b-button>
- <b-collapse id="health-menu" tag="ul" class="nav-item__nav">
- <b-nav-item href="javascript:void(0)">Event Log</b-nav-item>
- <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item>
- <b-nav-item href="javascript:void(0)">Sensors</b-nav-item>
- </b-collapse>
- </li>
+ <li class="nav-item">
+ <b-button v-b-toggle.health-menu variant="link">
+ <icon-health />Health
+ <icon-expand class="icon-expand" />
+ </b-button>
+ <b-collapse id="health-menu" tag="ul" class="nav-item__nav">
+ <b-nav-item href="javascript:void(0)">Event Log</b-nav-item>
+ <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item>
+ <b-nav-item href="javascript:void(0)">Sensors</b-nav-item>
+ </b-collapse>
+ </li>
- <li class="nav-item">
- <b-button v-b-toggle.control-menu variant="link">
- <icon-control />Control
- <icon-expand class="icon-expand" />
- </b-button>
- <b-collapse id="control-menu" tag="ul" class="nav-item__nav">
- <b-nav-item href="javascript:void(0)">Manage power usage</b-nav-item>
- <b-nav-item href="javascript:void(0)">Server LED</b-nav-item>
- <b-nav-item href="javascript:void(0)">
- Server power operations
- </b-nav-item>
- </b-collapse>
- </li>
+ <li class="nav-item">
+ <b-button v-b-toggle.control-menu variant="link">
+ <icon-control />Control
+ <icon-expand class="icon-expand" />
+ </b-button>
+ <b-collapse id="control-menu" tag="ul" class="nav-item__nav">
+ <b-nav-item href="javascript:void(0)">
+ Manage power usage
+ </b-nav-item>
+ <b-nav-item href="javascript:void(0)">Server LED</b-nav-item>
+ <b-nav-item href="javascript:void(0)">
+ Server power operations
+ </b-nav-item>
+ </b-collapse>
+ </li>
- <li class="nav-item">
- <b-button v-b-toggle.configuration-menu variant="link">
- <icon-configuration />Configuration
- <icon-expand class="icon-expand" />
- </b-button>
- <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav">
- <b-nav-item href="javascript:void(0)">Firmware</b-nav-item>
- <b-nav-item href="javascript:void(0)">Network settings</b-nav-item>
- <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item>
- </b-collapse>
- </li>
+ <li class="nav-item">
+ <b-button v-b-toggle.configuration-menu variant="link">
+ <icon-configuration />Configuration
+ <icon-expand class="icon-expand" />
+ </b-button>
+ <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav">
+ <b-nav-item href="javascript:void(0)">Firmware</b-nav-item>
+ <b-nav-item href="javascript:void(0)">
+ Network settings
+ </b-nav-item>
+ <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item>
+ </b-collapse>
+ </li>
- <li class="nav-item">
- <b-button v-b-toggle.access-control-menu variant="link">
- <icon-access-control />Access Control
- <icon-expand class="icon-expand" />
- </b-button>
- <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav">
- <b-nav-item href="javascript:void(0)">LDAP</b-nav-item>
- <b-nav-item to="/access-control/local-user-management">
- Local user management
- </b-nav-item>
- <b-nav-item href="javascript:void(0)">SSL Certificates</b-nav-item>
- </b-collapse>
- </li>
- </b-nav>
+ <li class="nav-item">
+ <b-button v-b-toggle.access-control-menu variant="link">
+ <icon-access-control />Access Control
+ <icon-expand class="icon-expand" />
+ </b-button>
+ <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav">
+ <b-nav-item href="javascript:void(0)">LDAP</b-nav-item>
+ <b-nav-item to="/access-control/local-user-management">
+ Local user management
+ </b-nav-item>
+ <b-nav-item href="javascript:void(0)">
+ SSL Certificates
+ </b-nav-item>
+ </b-collapse>
+ </li>
+ </b-nav>
+ </nav>
+ </div>
+ <transition name="fade">
+ <div
+ v-if="isNavigationOpen"
+ class="nav-overlay"
+ @click="toggleIsOpen"
+ ></div>
+ </transition>
+ </div>
</template>
<script>
@@ -73,6 +92,27 @@
iconConfiguration: IconSettings,
iconAccessControl: IconPassword,
iconExpand: IconChevronUp
+ },
+ data() {
+ return {
+ isNavigationOpen: false
+ };
+ },
+ watch: {
+ $route: function() {
+ this.isNavigationOpen = false;
+ },
+ isNavigationOpen: function(isNavigationOpen) {
+ this.$root.$emit('change:isNavigationOpen', isNavigationOpen);
+ }
+ },
+ mounted() {
+ this.$root.$on('toggle:navigation', () => this.toggleIsOpen());
+ },
+ methods: {
+ toggleIsOpen() {
+ this.isNavigationOpen = !this.isNavigationOpen;
+ }
}
};
</script>
@@ -88,7 +128,6 @@
}
.nav {
- min-height: 100%;
padding-top: $spacer;
}
@@ -155,4 +194,55 @@
background-color: $primary;
}
}
+
+.nav-container {
+ position: fixed;
+ width: $navigation-width;
+ top: $header-height;
+ bottom: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+ overflow-y: auto;
+ background-color: $gray-200;
+ transform: translateX(-$navigation-width);
+ transition: transform $exit-easing--productive $duration--moderate-02;
+
+ &.open {
+ transform: translateX(0);
+ transition-timing-function: $entrance-easing--productive;
+ }
+
+ @include media-breakpoint-up($responsive-layout-bp) {
+ transition-duration: $duration--fast-01;
+ transform: translateX(0);
+ }
+}
+
+.nav-overlay {
+ position: fixed;
+ top: $header-height;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: $zindex-fixed - 1;
+ background-color: $black;
+ opacity: 0.5;
+
+ &.fade-enter-active {
+ transition: opacity $duration--moderate-02 $entrance-easing--productive;
+ }
+
+ &.fade-leave-active {
+ transition: opacity $duration--fast-02 $exit-easing--productive;
+ }
+
+ &.fade-enter,
+ &.fade-leave-to {
+ opacity: 0;
+ }
+
+ @include media-breakpoint-up($responsive-layout-bp) {
+ display: none;
+ }
+}
</style>