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

1 files changed, 64 insertions, 6 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index e155a651..39191766 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -4,8 +4,21 @@
       Skip to content
     </a>
     <header id="page-header">
-      <b-navbar toggleable="lg" variant="dark" type="dark">
+      <b-navbar variant="dark" type="dark">
         <!-- Left aligned nav items -->
+        <b-button
+          class="nav-trigger"
+          aria-hidden="true"
+          title="Open navigation"
+          type="button"
+          variant="link"
+          :aria-expanded="isNavigationOpen"
+          :class="{ 'nav-open': isNavigationOpen }"
+          @click="toggleNavigation"
+        >
+          <icon-close v-if="isNavigationOpen" />
+          <icon-menu v-if="!isNavigationOpen" />
+        </b-button>
         <b-navbar-nav>
           <b-nav-text>BMC System Management</b-nav-text>
         </b-navbar-nav>
@@ -37,11 +50,19 @@
 
 <script>
 import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
+import IconClose from '@carbon/icons-vue/es/close/20';
+import IconMenu from '@carbon/icons-vue/es/menu/20';
 import IconRenew from '@carbon/icons-vue/es/renew/20';
 import StatusIcon from '../Global/StatusIcon';
+
 export default {
   name: 'AppHeader',
-  components: { IconAvatar, IconRenew, StatusIcon },
+  components: { IconAvatar, IconClose, IconMenu, IconRenew, StatusIcon },
+  data() {
+    return {
+      isNavigationOpen: false
+    };
+  },
   computed: {
     hostStatus() {
       return this.$store.getters['global/hostStatus'];
@@ -77,6 +98,12 @@ export default {
     this.getHostInfo();
     this.getEvents();
   },
+  mounted() {
+    this.$root.$on(
+      'change:isNavigationOpen',
+      isNavigationOpen => (this.isNavigationOpen = isNavigationOpen)
+    );
+  },
   methods: {
     getHostInfo() {
       this.$store.dispatch('global/getHostStatus');
@@ -89,6 +116,9 @@ export default {
     },
     logout() {
       this.$store.dispatch('authentication/logout');
+    },
+    toggleNavigation() {
+      this.$root.$emit('toggle:navigation');
     }
   }
 };
@@ -99,11 +129,11 @@ export default {
   position: absolute;
   top: -60px;
   left: 0.5rem;
-  z-index: 10;
-  transition: 150ms cubic-bezier(0.4, 0.14, 1, 1);
+  z-index: $zindex-popover;
+  transition: $duration--moderate-01 $exit-easing--expressive;
   &:focus {
     top: 0.5rem;
-    transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
+    transition-timing-function: $entrance-easing--expressive;
   }
 }
 .navbar-dark {
@@ -113,8 +143,36 @@ export default {
   }
 }
 .nav-item {
+  fill: $light;
+}
+
+.navbar {
+  padding: 0;
+  height: $header-height;
+  overflow: hidden;
+}
+
+.navbar-nav {
+  padding: 0 $spacer;
+}
+
+.nav-trigger {
+  fill: $white;
+  width: $header-height;
+  height: $header-height;
+  transition: none;
+
   svg {
-    fill: $light;
+    margin: 0;
+  }
+
+  &:hover {
+    fill: $white;
+    background-color: $gray-900;
+  }
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    display: none;
   }
 }
 </style>