components/AppNavigation/AppNavigation.vue

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 in navigationItems">
7             <!-- Navigation items with no children -->
9               v-if="!navItem.children"
10               :key="`nav-${navItem.index}`"
11               class="nav-item"
13               <router-link
15                 :data-test-id="`nav-item-${navItem.id}`"
16                 class="nav-link"
20               </router-link>
23             <!-- Navigation items with children -->
24             <li v-else :key="`nav-group-${navItem.index}`" class="nav-item">
25               <b-button
28                 :data-test-id="`nav-button-${navItem.id}`"
29                 :aria-controls="navItem.id"
30                 :aria-expanded="isItemOpen(navItem.id) ? 'true' : 'false'"
35                 <icon-expand class="icon-expand" />
36               </b-button>
37               <b-collapse
39                 v-model="openSections[navItem.id]"
41                 class="nav-item__nav"
44                   v-for="(subNavItem, i) in filteredNavItem(navItem.children)"
46                   class="nav-item"
48                   <router-link
50                     :data-test-id="`nav-item-${subNavItem.id}`"
51                     class="nav-link"
54                   </router-link>
56               </b-collapse>
59         </b-nav>
64         v-if="isNavigationOpen"
65         id="nav-overlay"
66         class="nav-overlay"
78 import { useI18n } from 'vue-i18n';
99         'change-is-navigation-open',
106     require('@/eventBus').default.$on('toggle-navigation', () =>
114       'toggle-navigation',
169   margin-inline-start: 0 !important; //!important overriding button specificity
170   vertical-align: text-bottom;
171   &:not(.icon-expand) {
172     margin-inline-end: $spacer;
177   padding-top: calc(#{$spacer} / 4);
178   @include media-breakpoint-up($responsive-layout-bp) {
179     padding-top: $spacer;
183 .nav-item__nav {
184   list-style: none;
185   padding-inline-start: 0;
186   margin-inline-start: 0;
188   .nav-item {
190     list-style: none;
193   .nav-link {
194     padding-inline-start: $spacer * 4;
197     &:not(.nav-link--current) {
198       font-weight: normal;
203 .btn-link {
204   display: inline-block;
206   text-align: start;
207   text-decoration: none !important;
208   border-radius: 0;
211     .icon-expand {
217 .icon-expand {
218   float: inline-end;
219   margin-top: calc(#{$spacer} / 4);
222 .btn-link,
223 .nav-link {
225   font-weight: $headings-font-weight;
226   padding-inline-start: $spacer; // defining consistent padding for links and buttons
227   padding-inline-end: $spacer;
228   color: theme-color('secondary');
231     background-color: theme-color-level(dark, -10.5);
232     color: theme-color('dark');
236     background-color: theme-color-level(light, 0);
237     box-shadow: inset 0 0 0 2px theme-color('primary');
238     color: theme-color('dark');
243     background-color: theme-color('secondary');
248 .nav-link--current {
249   font-weight: $headings-font-weight;
250   background-color: theme-color('secondary');
251   color: theme-color('light');
253   box-shadow: none;
260     inset-inline-start: 0;
262     background-color: theme-color('primary');
267     background-color: theme-color('secondary');
268     color: theme-color('light');
272 .nav-container {
274   width: $navigation-width;
275   top: $header-height;
278   z-index: $zindex-fixed;
279   overflow-y: auto;
280   background-color: theme-color('light');
281   transform: translateX(-$navigation-width);
282   transition: transform $exit-easing--productive $duration--moderate-02;
283   border-inline-end: 1px solid theme-color-level('light', 2.85);
285   @include media-breakpoint-down(md) {
286     z-index: $zindex-fixed + 2;
290   &:focus-within {
292     transition-timing-function: $entrance-easing--productive;
295   @include media-breakpoint-up($responsive-layout-bp) {
296     transition-duration: $duration--fast-01;
301 .nav-overlay {
303   top: $header-height;
307   z-index: $zindex-fixed + 1;
308   background-color: $black;
311   &.fade-enter-active {
312     transition: opacity $duration--moderate-02 $entrance-easing--productive;
315   &.fade-leave-active {
316     transition: opacity $duration--fast-02 $exit-easing--productive;
319   &.fade-enter, // Remove this vue2 based only class when switching to vue3
320   &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
321   &.fade-leave-to {
325   @include media-breakpoint-up($responsive-layout-bp) {