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/AppHeader/AppHeader.vue | |
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/AppHeader/AppHeader.vue')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 70 |
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> |