1a2988f40SDerick Montague<template> 274f8687dSYoshie Muranaka <div> 374f8687dSYoshie Muranaka <div class="nav-container" :class="{ open: isNavigationOpen }"> 46859203cSDerick Montague <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')"> 57d044352SYoshie Muranaka <b-nav vertical class="mb-4"> 6d329ec84SYoshie Muranaka <template v-for="(navItem, index) in navigationItems"> 7d329ec84SYoshie Muranaka <!-- Navigation items with no children --> 8d329ec84SYoshie Muranaka <b-nav-item 9d329ec84SYoshie Muranaka v-if="!navItem.children" 10d329ec84SYoshie Muranaka :key="index" 11d329ec84SYoshie Muranaka :to="navItem.route" 12d329ec84SYoshie Muranaka :data-test-id="`nav-item-${navItem.id}`" 13d329ec84SYoshie Muranaka > 14d329ec84SYoshie Muranaka <component :is="navItem.icon" /> 15d329ec84SYoshie Muranaka {{ navItem.label }} 16e0b76c33SYoshie Muranaka </b-nav-item> 1742c19893SDerick Montague 18d329ec84SYoshie Muranaka <!-- Navigation items with children --> 19d329ec84SYoshie Muranaka <li v-else :key="index" class="nav-item"> 202d589a74SDerick Montague <b-button 21d329ec84SYoshie Muranaka v-b-toggle="`${navItem.id}`" 222d589a74SDerick Montague variant="link" 23d329ec84SYoshie Muranaka :data-test-id="`nav-button-${navItem.id}`" 242d589a74SDerick Montague > 25d329ec84SYoshie Muranaka <component :is="navItem.icon" /> 26d329ec84SYoshie Muranaka {{ navItem.label }} 2771ac230aSYoshie Muranaka <icon-expand class="icon-expand" /> 2842c19893SDerick Montague </b-button> 29d329ec84SYoshie Muranaka <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav"> 30fba4d625SSukanya Pandey <li class="nav-item"> 31fba4d625SSukanya Pandey <router-link 32*aeb19816SDamian Celico v-for="(subNavItem, i) of filteredNavItem(navItem.children)" 33d329ec84SYoshie Muranaka :key="i" 34d329ec84SYoshie Muranaka :to="subNavItem.route" 35d329ec84SYoshie Muranaka :data-test-id="`nav-item-${subNavItem.id}`" 36fba4d625SSukanya Pandey class="nav-link" 372d589a74SDerick Montague > 38d329ec84SYoshie Muranaka {{ subNavItem.label }} 39fba4d625SSukanya Pandey </router-link> 40fba4d625SSukanya Pandey </li> 4142c19893SDerick Montague </b-collapse> 42a2988f40SDerick Montague </li> 43d329ec84SYoshie Muranaka </template> 4442c19893SDerick Montague </b-nav> 4574f8687dSYoshie Muranaka </nav> 4674f8687dSYoshie Muranaka </div> 4774f8687dSYoshie Muranaka <transition name="fade"> 4874f8687dSYoshie Muranaka <div 4974f8687dSYoshie Muranaka v-if="isNavigationOpen" 50ad2ceb6dSDerick Montague id="nav-overlay" 5174f8687dSYoshie Muranaka class="nav-overlay" 5274f8687dSYoshie Muranaka @click="toggleIsOpen" 5374f8687dSYoshie Muranaka ></div> 5474f8687dSYoshie Muranaka </transition> 5574f8687dSYoshie Muranaka </div> 56a2988f40SDerick Montague</template> 57a2988f40SDerick Montague 58a2988f40SDerick Montague<script> 598263d85cSYoshie Muranaka//Do not change Mixin import. 608263d85cSYoshie Muranaka//Exact match alias set to support 618263d85cSYoshie Muranaka//dotenv customizations. 62d329ec84SYoshie Muranakaimport AppNavigationMixin from './AppNavigationMixin'; 63a2988f40SDerick Montague 64a2988f40SDerick Montagueexport default { 65e2fd1567SDerick Montague name: 'AppNavigation', 66d329ec84SYoshie Muranaka mixins: [AppNavigationMixin], 6774f8687dSYoshie Muranaka data() { 6874f8687dSYoshie Muranaka return { 69602e98aaSDerick Montague isNavigationOpen: false, 70*aeb19816SDamian Celico currentUserRole: null, 7174f8687dSYoshie Muranaka }; 7274f8687dSYoshie Muranaka }, 7374f8687dSYoshie Muranaka watch: { 7474f8687dSYoshie Muranaka $route: function () { 7574f8687dSYoshie Muranaka this.isNavigationOpen = false; 7674f8687dSYoshie Muranaka }, 7774f8687dSYoshie Muranaka isNavigationOpen: function (isNavigationOpen) { 78edb8a774SSukanya Pandey this.$root.$emit('change-is-navigation-open', isNavigationOpen); 79602e98aaSDerick Montague }, 8074f8687dSYoshie Muranaka }, 8174f8687dSYoshie Muranaka mounted() { 82*aeb19816SDamian Celico this.getPrivilege(); 83edb8a774SSukanya Pandey this.$root.$on('toggle-navigation', () => this.toggleIsOpen()); 8474f8687dSYoshie Muranaka }, 8574f8687dSYoshie Muranaka methods: { 8674f8687dSYoshie Muranaka toggleIsOpen() { 8774f8687dSYoshie Muranaka this.isNavigationOpen = !this.isNavigationOpen; 88602e98aaSDerick Montague }, 89*aeb19816SDamian Celico getPrivilege() { 90*aeb19816SDamian Celico this.currentUserRole = this.$store?.getters['global/userPrivilege']; 91*aeb19816SDamian Celico }, 92*aeb19816SDamian Celico filteredNavItem(navItem) { 93*aeb19816SDamian Celico if (this.currentUserRole) { 94*aeb19816SDamian Celico return navItem.filter(({ exclusiveToRoles }) => { 95*aeb19816SDamian Celico if (!exclusiveToRoles?.length) return true; 96*aeb19816SDamian Celico return exclusiveToRoles.includes(this.currentUserRole); 97*aeb19816SDamian Celico }); 98*aeb19816SDamian Celico } else return navItem; 99*aeb19816SDamian Celico }, 100602e98aaSDerick Montague }, 101a2988f40SDerick Montague}; 102a2988f40SDerick Montague</script> 10342c19893SDerick Montague 10471ac230aSYoshie Muranaka<style scoped lang="scss"> 10571ac230aSYoshie Muranakasvg { 10666f903fbSDerick Montague fill: currentColor; 10766f903fbSDerick Montague height: 1.2rem; 10866f903fbSDerick Montague width: 1.2rem; 10971ac230aSYoshie Muranaka margin-left: 0 !important; //!important overriding button specificity 11071ac230aSYoshie Muranaka vertical-align: text-bottom; 11171ac230aSYoshie Muranaka &:not(.icon-expand) { 11271ac230aSYoshie Muranaka margin-right: $spacer; 11371ac230aSYoshie Muranaka } 11471ac230aSYoshie Muranaka} 11571ac230aSYoshie Muranaka 11671ac230aSYoshie Muranaka.nav { 117057232b8SSurenNeware padding-top: $spacer / 4; 118057232b8SSurenNeware @include media-breakpoint-up($responsive-layout-bp) { 11971ac230aSYoshie Muranaka padding-top: $spacer; 12071ac230aSYoshie Muranaka } 121057232b8SSurenNeware} 12271ac230aSYoshie Muranaka 12371ac230aSYoshie Muranaka.nav-item__nav { 12442c19893SDerick Montague list-style: none; 12542c19893SDerick Montague padding-left: 0; 12671ac230aSYoshie Muranaka margin-left: 0; 12771ac230aSYoshie Muranaka 12885358ed1SYoshie Muranaka .nav-item { 12985358ed1SYoshie Muranaka outline: none; 13085358ed1SYoshie Muranaka } 13185358ed1SYoshie Muranaka 13271ac230aSYoshie Muranaka .nav-link { 13371ac230aSYoshie Muranaka padding-left: $spacer * 4; 13485358ed1SYoshie Muranaka outline: none; 13571ac230aSYoshie Muranaka 13671ac230aSYoshie Muranaka &:not(.nav-link--current) { 13771ac230aSYoshie Muranaka font-weight: normal; 13871ac230aSYoshie Muranaka } 13971ac230aSYoshie Muranaka } 14071ac230aSYoshie Muranaka} 14171ac230aSYoshie Muranaka 14271ac230aSYoshie Muranaka.btn-link { 14330f11f81SDixsie Wolmers display: inline-block; 14471ac230aSYoshie Muranaka width: 100%; 14571ac230aSYoshie Muranaka text-align: left; 14671ac230aSYoshie Muranaka text-decoration: none !important; 14771ac230aSYoshie Muranaka border-radius: 0; 14871ac230aSYoshie Muranaka 14971ac230aSYoshie Muranaka &.collapsed { 15071ac230aSYoshie Muranaka .icon-expand { 15171ac230aSYoshie Muranaka transform: rotate(180deg); 15271ac230aSYoshie Muranaka } 15371ac230aSYoshie Muranaka } 15471ac230aSYoshie Muranaka} 15571ac230aSYoshie Muranaka 15671ac230aSYoshie Muranaka.icon-expand { 15771ac230aSYoshie Muranaka float: right; 15871ac230aSYoshie Muranaka margin-top: $spacer / 4; 15971ac230aSYoshie Muranaka} 16071ac230aSYoshie Muranaka 16171ac230aSYoshie Muranaka.btn-link, 16271ac230aSYoshie Muranaka.nav-link { 16371ac230aSYoshie Muranaka position: relative; 16471ac230aSYoshie Muranaka font-weight: $headings-font-weight; 16571ac230aSYoshie Muranaka padding-left: $spacer; // defining consistent padding for links and buttons 16671ac230aSYoshie Muranaka padding-right: $spacer; 16701da8187SYoshie Muranaka color: theme-color('secondary'); 16871ac230aSYoshie Muranaka 16971ac230aSYoshie Muranaka &:hover { 1701f8117f8SSurenNeware background-color: theme-color-level(dark, -10.5); 17101da8187SYoshie Muranaka color: theme-color('dark'); 17271ac230aSYoshie Muranaka } 1739f5cea8bSYoshie Muranaka 1749f5cea8bSYoshie Muranaka &:focus { 1751f8117f8SSurenNeware background-color: theme-color-level(light, 0); 1761f8117f8SSurenNeware box-shadow: inset 0 0 0 2px theme-color('primary'); 17701da8187SYoshie Muranaka color: theme-color('dark'); 17859569d8fSDerick Montague outline: 0; 1799f5cea8bSYoshie Muranaka } 1801f8117f8SSurenNeware 1811f8117f8SSurenNeware &:active { 18259569d8fSDerick Montague background-color: theme-color('secondary'); 1831f8117f8SSurenNeware color: $white; 1841f8117f8SSurenNeware } 18571ac230aSYoshie Muranaka} 18671ac230aSYoshie Muranaka 1871f8117f8SSurenNeware.nav-link--current { 18871ac230aSYoshie Muranaka font-weight: $headings-font-weight; 18901da8187SYoshie Muranaka background-color: theme-color('secondary'); 19001da8187SYoshie Muranaka color: theme-color('light'); 19166f903fbSDerick Montague cursor: default; 1921f8117f8SSurenNeware box-shadow: none; 19371ac230aSYoshie Muranaka 19471ac230aSYoshie Muranaka &::before { 19571ac230aSYoshie Muranaka content: ''; 19671ac230aSYoshie Muranaka position: absolute; 19771ac230aSYoshie Muranaka top: 0; 19871ac230aSYoshie Muranaka bottom: 0; 19971ac230aSYoshie Muranaka left: 0; 20071ac230aSYoshie Muranaka width: 4px; 20101da8187SYoshie Muranaka background-color: theme-color('primary'); 20271ac230aSYoshie Muranaka } 20359569d8fSDerick Montague 20459569d8fSDerick Montague &:hover, 2051f8117f8SSurenNeware &:focus { 20659569d8fSDerick Montague background-color: theme-color('secondary'); 20759569d8fSDerick Montague color: theme-color('light'); 2081f8117f8SSurenNeware } 2091f8117f8SSurenNeware} 21074f8687dSYoshie Muranaka 21174f8687dSYoshie Muranaka.nav-container { 21274f8687dSYoshie Muranaka position: fixed; 21374f8687dSYoshie Muranaka width: $navigation-width; 21474f8687dSYoshie Muranaka top: $header-height; 21574f8687dSYoshie Muranaka bottom: 0; 21674f8687dSYoshie Muranaka left: 0; 21774f8687dSYoshie Muranaka z-index: $zindex-fixed; 21874f8687dSYoshie Muranaka overflow-y: auto; 21959569d8fSDerick Montague background-color: theme-color('light'); 22074f8687dSYoshie Muranaka transform: translateX(-$navigation-width); 22174f8687dSYoshie Muranaka transition: transform $exit-easing--productive $duration--moderate-02; 22259569d8fSDerick Montague border-right: 1px solid theme-color-level('light', 2.85); 22359569d8fSDerick Montague 224057232b8SSurenNeware @include media-breakpoint-down(md) { 225057232b8SSurenNeware z-index: $zindex-fixed + 2; 226057232b8SSurenNeware } 22774f8687dSYoshie Muranaka 22874466b85SDerick Montague &.open, 22974466b85SDerick Montague &:focus-within { 23074f8687dSYoshie Muranaka transform: translateX(0); 23174f8687dSYoshie Muranaka transition-timing-function: $entrance-easing--productive; 23274f8687dSYoshie Muranaka } 23374f8687dSYoshie Muranaka 23474f8687dSYoshie Muranaka @include media-breakpoint-up($responsive-layout-bp) { 23574f8687dSYoshie Muranaka transition-duration: $duration--fast-01; 23674f8687dSYoshie Muranaka transform: translateX(0); 23774f8687dSYoshie Muranaka } 23874f8687dSYoshie Muranaka} 23974f8687dSYoshie Muranaka 24074f8687dSYoshie Muranaka.nav-overlay { 24174f8687dSYoshie Muranaka position: fixed; 24274f8687dSYoshie Muranaka top: $header-height; 24374f8687dSYoshie Muranaka bottom: 0; 24474f8687dSYoshie Muranaka left: 0; 24574f8687dSYoshie Muranaka right: 0; 246057232b8SSurenNeware z-index: $zindex-fixed + 1; 24774f8687dSYoshie Muranaka background-color: $black; 24874f8687dSYoshie Muranaka opacity: 0.5; 24974f8687dSYoshie Muranaka 25074f8687dSYoshie Muranaka &.fade-enter-active { 25174f8687dSYoshie Muranaka transition: opacity $duration--moderate-02 $entrance-easing--productive; 25274f8687dSYoshie Muranaka } 25374f8687dSYoshie Muranaka 25474f8687dSYoshie Muranaka &.fade-leave-active { 25574f8687dSYoshie Muranaka transition: opacity $duration--fast-02 $exit-easing--productive; 25674f8687dSYoshie Muranaka } 25774f8687dSYoshie Muranaka 258151dd249SSurenNeware &.fade-enter, // Remove this vue2 based only class when switching to vue3 259151dd249SSurenNeware &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter' 26074f8687dSYoshie Muranaka &.fade-leave-to { 26174f8687dSYoshie Muranaka opacity: 0; 26274f8687dSYoshie Muranaka } 26374f8687dSYoshie Muranaka 26474f8687dSYoshie Muranaka @include media-breakpoint-up($responsive-layout-bp) { 26574f8687dSYoshie Muranaka display: none; 26674f8687dSYoshie Muranaka } 26774f8687dSYoshie Muranaka} 26842c19893SDerick Montague</style> 269