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 -->
8             <b-nav-item
9               v-if="!navItem.children"
12               :data-test-id="`nav-item-${navItem.id}`"
16             </b-nav-item>
18             <!-- Navigation items with children -->
19             <li v-else :key="navItem.index" class="nav-item">
20               <b-button
21                 v-b-toggle="`${navItem.id}`"
23                 :data-test-id="`nav-button-${navItem.id}`"
27                 <icon-expand class="icon-expand" />
28               </b-button>
29               <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav">
30                 <li class="nav-item">
31                   <router-link
32                     v-for="(subNavItem, i) of filteredNavItem(navItem.children)"
35                     :data-test-id="`nav-item-${subNavItem.id}`"
36                     class="nav-link"
39                   </router-link>
41               </b-collapse>
44         </b-nav>
49         v-if="isNavigationOpen"
50         id="nav-overlay"
51         class="nav-overlay"
63 import { useI18n } from 'vue-i18n';
80       this.$root.$emit('change-is-navigation-open', isNavigationOpen);
85     this.$root.$on('toggle-navigation', () => this.toggleIsOpen());
111   margin-left: 0 !important; //!important overriding button specificity
112   vertical-align: text-bottom;
113   &:not(.icon-expand) {
114     margin-right: $spacer;
119   padding-top: $spacer / 4;
120   @include media-breakpoint-up($responsive-layout-bp) {
121     padding-top: $spacer;
125 .nav-item__nav {
126   list-style: none;
127   padding-left: 0;
128   margin-left: 0;
130   .nav-item {
134   .nav-link {
135     padding-left: $spacer * 4;
138     &:not(.nav-link--current) {
139       font-weight: normal;
144 .btn-link {
145   display: inline-block;
147   text-align: left;
148   text-decoration: none !important;
149   border-radius: 0;
152     .icon-expand {
158 .icon-expand {
160   margin-top: $spacer / 4;
163 .btn-link,
164 .nav-link {
166   font-weight: $headings-font-weight;
167   padding-left: $spacer; // defining consistent padding for links and buttons
168   padding-right: $spacer;
169   color: theme-color('secondary');
172     background-color: theme-color-level(dark, -10.5);
173     color: theme-color('dark');
177     background-color: theme-color-level(light, 0);
178     box-shadow: inset 0 0 0 2px theme-color('primary');
179     color: theme-color('dark');
184     background-color: theme-color('secondary');
189 .nav-link--current {
190   font-weight: $headings-font-weight;
191   background-color: theme-color('secondary');
192   color: theme-color('light');
194   box-shadow: none;
203     background-color: theme-color('primary');
208     background-color: theme-color('secondary');
209     color: theme-color('light');
213 .nav-container {
214   position: fixed;
215   width: $navigation-width;
216   top: $header-height;
219   z-index: $zindex-fixed;
220   overflow-y: auto;
221   background-color: theme-color('light');
222   transform: translateX(-$navigation-width);
223   transition: transform $exit-easing--productive $duration--moderate-02;
224   border-right: 1px solid theme-color-level('light', 2.85);
226   @include media-breakpoint-down(md) {
227     z-index: $zindex-fixed + 2;
231   &:focus-within {
233     transition-timing-function: $entrance-easing--productive;
236   @include media-breakpoint-up($responsive-layout-bp) {
237     transition-duration: $duration--fast-01;
242 .nav-overlay {
243   position: fixed;
244   top: $header-height;
248   z-index: $zindex-fixed + 1;
249   background-color: $black;
252   &.fade-enter-active {
253     transition: opacity $duration--moderate-02 $entrance-easing--productive;
256   &.fade-leave-active {
257     transition: opacity $duration--fast-02 $exit-easing--productive;
260   &.fade-enter, // Remove this vue2 based only class when switching to vue3
261   &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
262   &.fade-leave-to {
266   @include media-breakpoint-up($responsive-layout-bp) {