diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-10 23:28:37 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-19 22:17:46 +0300 |
commit | 74f8687d4ab358c071bd081b0b7709eba5a521c2 (patch) | |
tree | 0ff89ca0403a814c39dc73d422824939b2bc1770 /src/components/AppNavigation | |
parent | eb154bbc9f71a923563479919578bd5053795980 (diff) | |
download | webui-vue-74f8687d4ab358c071bd081b0b7709eba5a521c2.tar.xz |
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
Diffstat (limited to 'src/components/AppNavigation')
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 202 |
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> |