1<template> 2 <div> 3 <div class="nav-container" :class="{ open: isNavigationOpen }"> 4 <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')"> 5 <b-nav vertical class="mb-4"> 6 <template v-for="(navItem, index) in navigationItems"> 7 <!-- Navigation items with no children --> 8 <b-nav-item 9 v-if="!navItem.children" 10 :key="index" 11 :to="navItem.route" 12 :data-test-id="`nav-item-${navItem.id}`" 13 > 14 <component :is="navItem.icon" /> 15 {{ navItem.label }} 16 </b-nav-item> 17 18 <!-- Navigation items with children --> 19 <li v-else :key="index" class="nav-item"> 20 <b-button 21 v-b-toggle="`${navItem.id}`" 22 variant="link" 23 :data-test-id="`nav-button-${navItem.id}`" 24 > 25 <component :is="navItem.icon" /> 26 {{ navItem.label }} 27 <icon-expand class="icon-expand" /> 28 </b-button> 29 <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav"> 30 <b-nav-item 31 v-for="(subNavItem, i) of navItem.children" 32 :key="i" 33 :to="subNavItem.route" 34 :data-test-id="`nav-item-${subNavItem.id}`" 35 > 36 {{ subNavItem.label }} 37 </b-nav-item> 38 </b-collapse> 39 </li> 40 </template> 41 </b-nav> 42 </nav> 43 </div> 44 <transition name="fade"> 45 <div 46 v-if="isNavigationOpen" 47 id="nav-overlay" 48 class="nav-overlay" 49 @click="toggleIsOpen" 50 ></div> 51 </transition> 52 </div> 53</template> 54 55<script> 56//Do not change Mixin import. 57//Exact match alias set to support 58//dotenv customizations. 59import AppNavigationMixin from './AppNavigationMixin'; 60 61export default { 62 name: 'AppNavigation', 63 mixins: [AppNavigationMixin], 64 data() { 65 return { 66 isNavigationOpen: false 67 }; 68 }, 69 watch: { 70 $route: function() { 71 this.isNavigationOpen = false; 72 }, 73 isNavigationOpen: function(isNavigationOpen) { 74 this.$root.$emit('change:isNavigationOpen', isNavigationOpen); 75 } 76 }, 77 mounted() { 78 this.$root.$on('toggle:navigation', () => this.toggleIsOpen()); 79 }, 80 methods: { 81 toggleIsOpen() { 82 this.isNavigationOpen = !this.isNavigationOpen; 83 } 84 } 85}; 86</script> 87 88<style scoped lang="scss"> 89svg { 90 fill: currentColor; 91 height: 1.2rem; 92 width: 1.2rem; 93 margin-left: 0 !important; //!important overriding button specificity 94 vertical-align: text-bottom; 95 &:not(.icon-expand) { 96 margin-right: $spacer; 97 } 98} 99 100.nav { 101 padding-top: $spacer / 4; 102 @include media-breakpoint-up($responsive-layout-bp) { 103 padding-top: $spacer; 104 } 105} 106 107.nav-item__nav { 108 list-style: none; 109 padding-left: 0; 110 margin-left: 0; 111 112 .nav-item { 113 outline: none; 114 } 115 116 .nav-link { 117 padding-left: $spacer * 4; 118 outline: none; 119 120 &:not(.nav-link--current) { 121 font-weight: normal; 122 } 123 } 124} 125 126.btn-link { 127 width: 100%; 128 text-align: left; 129 text-decoration: none !important; 130 border-radius: 0; 131 132 &.collapsed { 133 .icon-expand { 134 transform: rotate(180deg); 135 } 136 } 137} 138 139.icon-expand { 140 float: right; 141 margin-top: $spacer / 4; 142} 143 144.btn-link, 145.nav-link { 146 position: relative; 147 font-weight: $headings-font-weight; 148 padding-left: $spacer; // defining consistent padding for links and buttons 149 padding-right: $spacer; 150 color: theme-color('secondary'); 151 152 &:hover { 153 background-color: gray('300'); 154 color: theme-color('dark'); 155 } 156 157 &:focus { 158 box-shadow: $btn-focus-box-shadow; 159 color: theme-color('dark'); 160 } 161} 162 163.nav-link--current, 164.nav-link--current:hover, 165.nav-link--current:focus { 166 font-weight: $headings-font-weight; 167 background-color: theme-color('secondary'); 168 color: theme-color('light'); 169 cursor: default; 170 171 &::before { 172 content: ''; 173 position: absolute; 174 top: 0; 175 bottom: 0; 176 left: 0; 177 width: 4px; 178 background-color: theme-color('primary'); 179 } 180} 181 182.nav-container { 183 position: fixed; 184 width: $navigation-width; 185 top: $header-height; 186 bottom: 0; 187 left: 0; 188 z-index: $zindex-fixed; 189 overflow-y: auto; 190 background-color: gray('100'); 191 transform: translateX(-$navigation-width); 192 transition: transform $exit-easing--productive $duration--moderate-02; 193 @include media-breakpoint-down(md) { 194 z-index: $zindex-fixed + 2; 195 } 196 197 &.open, 198 &:focus-within { 199 transform: translateX(0); 200 transition-timing-function: $entrance-easing--productive; 201 } 202 203 @include media-breakpoint-up($responsive-layout-bp) { 204 transition-duration: $duration--fast-01; 205 transform: translateX(0); 206 } 207} 208 209.nav-overlay { 210 position: fixed; 211 top: $header-height; 212 bottom: 0; 213 left: 0; 214 right: 0; 215 z-index: $zindex-fixed + 1; 216 background-color: $black; 217 opacity: 0.5; 218 219 &.fade-enter-active { 220 transition: opacity $duration--moderate-02 $entrance-easing--productive; 221 } 222 223 &.fade-leave-active { 224 transition: opacity $duration--fast-02 $exit-easing--productive; 225 } 226 227 &.fade-enter, 228 &.fade-leave-to { 229 opacity: 0; 230 } 231 232 @include media-breakpoint-up($responsive-layout-bp) { 233 display: none; 234 } 235} 236</style> 237