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, 146 insertions, 56 deletions

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 28f4c715..2847e664 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>
-
-    <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.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>
+  <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.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.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 @@ export default {
     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 @@ svg {
 }
 
 .nav {
-  min-height: 100%;
   padding-top: $spacer;
 }
 
@@ -155,4 +194,55 @@ svg {
     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>