1a2988f40SDerick Montague<template> 242c19893SDerick Montague <b-nav vertical> 371ac230aSYoshie Muranaka <b-nav-item to="/"><icon-overview />Overview</b-nav-item> 442c19893SDerick Montague 542c19893SDerick Montague <li class="nav-item"> 642c19893SDerick Montague <b-button v-b-toggle.health-menu variant="link"> 771ac230aSYoshie Muranaka <icon-health />Health 871ac230aSYoshie Muranaka <icon-expand class="icon-expand" /> 942c19893SDerick Montague </b-button> 1009e45cd4SDerick Montague <b-collapse id="health-menu" tag="ul" class="nav-item__nav"> 1142c19893SDerick Montague <b-nav-item href="javascript:void(0)">Event Log</b-nav-item> 1242c19893SDerick Montague <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item> 1342c19893SDerick Montague <b-nav-item href="javascript:void(0)">Sensors</b-nav-item> 1442c19893SDerick Montague </b-collapse> 15a2988f40SDerick Montague </li> 1642c19893SDerick Montague 1742c19893SDerick Montague <li class="nav-item"> 1842c19893SDerick Montague <b-button v-b-toggle.control-menu variant="link"> 1971ac230aSYoshie Muranaka <icon-control />Control 2071ac230aSYoshie Muranaka <icon-expand class="icon-expand" /> 2142c19893SDerick Montague </b-button> 2209e45cd4SDerick Montague <b-collapse id="control-menu" tag="ul" class="nav-item__nav"> 2371ac230aSYoshie Muranaka <b-nav-item href="javascript:void(0)"> 2471ac230aSYoshie Muranaka Server power operations 2571ac230aSYoshie Muranaka </b-nav-item> 2642c19893SDerick Montague <b-nav-item href="javascript:void(0)">Manage power usage</b-nav-item> 2742c19893SDerick Montague <b-nav-item href="javascript:void(0)">Server LED</b-nav-item> 2842c19893SDerick Montague </b-collapse> 2942c19893SDerick Montague </li> 3071ac230aSYoshie Muranaka 3142c19893SDerick Montague <li class="nav-item"> 3242c19893SDerick Montague <b-button v-b-toggle.configuration-menu variant="link"> 3371ac230aSYoshie Muranaka <icon-configuration />Configuration 3471ac230aSYoshie Muranaka <icon-expand class="icon-expand" /> 3542c19893SDerick Montague </b-button> 3609e45cd4SDerick Montague <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav"> 3742c19893SDerick Montague <b-nav-item href="javascript:void(0)">Network settings</b-nav-item> 3842c19893SDerick Montague <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item> 3942c19893SDerick Montague <b-nav-item href="javascript:void(0)">Firmware</b-nav-item> 4042c19893SDerick Montague </b-collapse> 4142c19893SDerick Montague </li> 4242c19893SDerick Montague 4342c19893SDerick Montague <li class="nav-item"> 4442c19893SDerick Montague <b-button v-b-toggle.access-control-menu variant="link"> 4571ac230aSYoshie Muranaka <icon-access-control />Access Control 4671ac230aSYoshie Muranaka <icon-expand class="icon-expand" /> 4742c19893SDerick Montague </b-button> 4809e45cd4SDerick Montague <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav"> 4942c19893SDerick Montague <b-nav-item href="javascript:void(0)">LDAP</b-nav-item> 5071ac230aSYoshie Muranaka <b-nav-item to="/access-control/local-user-management"> 5171ac230aSYoshie Muranaka Local user management 5271ac230aSYoshie Muranaka </b-nav-item> 5342c19893SDerick Montague <b-nav-item href="javascript:void(0)">SSL Certificates</b-nav-item> 5442c19893SDerick Montague </b-collapse> 5542c19893SDerick Montague </li> 5642c19893SDerick Montague </b-nav> 57a2988f40SDerick Montague</template> 58a2988f40SDerick Montague 59a2988f40SDerick Montague<script> 6071ac230aSYoshie Muranakaimport IconAnalytics from '@carbon/icons-vue/es/analytics/16'; 6171ac230aSYoshie Muranakaimport IconDataCheck from '@carbon/icons-vue/es/data--check/16'; 6271ac230aSYoshie Muranakaimport IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16'; 6371ac230aSYoshie Muranakaimport IconSettings from '@carbon/icons-vue/es/settings/16'; 6471ac230aSYoshie Muranakaimport IconPassword from '@carbon/icons-vue/es/password/16'; 6571ac230aSYoshie Muranakaimport IconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; 66a2988f40SDerick Montague 67a2988f40SDerick Montagueexport default { 68e2fd1567SDerick Montague name: 'AppNavigation', 6942c19893SDerick Montague components: { 7071ac230aSYoshie Muranaka iconOverview: IconAnalytics, 7171ac230aSYoshie Muranaka iconHealth: IconDataCheck, 7271ac230aSYoshie Muranaka iconControl: IconSettingsAdjust, 7371ac230aSYoshie Muranaka iconConfiguration: IconSettings, 7471ac230aSYoshie Muranaka iconAccessControl: IconPassword, 7571ac230aSYoshie Muranaka iconExpand: IconChevronUp 7642c19893SDerick Montague } 77a2988f40SDerick Montague}; 78a2988f40SDerick Montague</script> 7942c19893SDerick Montague 8071ac230aSYoshie Muranaka<style scoped lang="scss"> 8171ac230aSYoshie Muranakasvg { 8271ac230aSYoshie Muranaka fill: $gray-900; 8371ac230aSYoshie Muranaka margin-left: 0 !important; //!important overriding button specificity 8471ac230aSYoshie Muranaka vertical-align: text-bottom; 8571ac230aSYoshie Muranaka &:not(.icon-expand) { 8671ac230aSYoshie Muranaka margin-right: $spacer; 8771ac230aSYoshie Muranaka } 8871ac230aSYoshie Muranaka} 8971ac230aSYoshie Muranaka 9071ac230aSYoshie Muranaka.nav { 9171ac230aSYoshie Muranaka min-height: 100%; 9271ac230aSYoshie Muranaka padding-top: $spacer; 9371ac230aSYoshie Muranaka} 9471ac230aSYoshie Muranaka 9571ac230aSYoshie Muranaka.nav-item__nav { 9642c19893SDerick Montague list-style: none; 9742c19893SDerick Montague padding-left: 0; 9871ac230aSYoshie Muranaka margin-left: 0; 9971ac230aSYoshie Muranaka 10071ac230aSYoshie Muranaka .nav-link { 10171ac230aSYoshie Muranaka padding-left: $spacer * 4; 10271ac230aSYoshie Muranaka 10371ac230aSYoshie Muranaka &:not(.nav-link--current) { 10471ac230aSYoshie Muranaka font-weight: normal; 10571ac230aSYoshie Muranaka } 10671ac230aSYoshie Muranaka } 10771ac230aSYoshie Muranaka} 10871ac230aSYoshie Muranaka 10971ac230aSYoshie Muranaka.btn-link { 11071ac230aSYoshie Muranaka width: 100%; 11171ac230aSYoshie Muranaka text-align: left; 11271ac230aSYoshie Muranaka text-decoration: none !important; 11371ac230aSYoshie Muranaka border-radius: 0; 11471ac230aSYoshie Muranaka 11571ac230aSYoshie Muranaka &.collapsed { 11671ac230aSYoshie Muranaka .icon-expand { 11771ac230aSYoshie Muranaka transform: rotate(180deg); 11871ac230aSYoshie Muranaka } 11971ac230aSYoshie Muranaka } 12071ac230aSYoshie Muranaka} 12171ac230aSYoshie Muranaka 12271ac230aSYoshie Muranaka.icon-expand { 12371ac230aSYoshie Muranaka float: right; 12471ac230aSYoshie Muranaka margin-top: $spacer / 4; 12571ac230aSYoshie Muranaka} 12671ac230aSYoshie Muranaka 12771ac230aSYoshie Muranaka.btn-link, 12871ac230aSYoshie Muranaka.nav-link { 12971ac230aSYoshie Muranaka position: relative; 13071ac230aSYoshie Muranaka font-weight: $headings-font-weight; 13171ac230aSYoshie Muranaka padding-left: $spacer; // defining consistent padding for links and buttons 13271ac230aSYoshie Muranaka padding-right: $spacer; 13371ac230aSYoshie Muranaka color: $gray-900 !important; //using important to avoid styling states 13471ac230aSYoshie Muranaka 13571ac230aSYoshie Muranaka &:hover { 13671ac230aSYoshie Muranaka background-color: $gray-300; 13771ac230aSYoshie Muranaka } 138*9f5cea8bSYoshie Muranaka 139*9f5cea8bSYoshie Muranaka &:focus { 140*9f5cea8bSYoshie Muranaka box-shadow: $btn-focus-box-shadow; 141*9f5cea8bSYoshie Muranaka } 14271ac230aSYoshie Muranaka} 14371ac230aSYoshie Muranaka 14471ac230aSYoshie Muranaka.nav-link--current { 14571ac230aSYoshie Muranaka font-weight: $headings-font-weight; 14671ac230aSYoshie Muranaka background-color: $gray-300; 14771ac230aSYoshie Muranaka 14871ac230aSYoshie Muranaka &::before { 14971ac230aSYoshie Muranaka content: ''; 15071ac230aSYoshie Muranaka position: absolute; 15171ac230aSYoshie Muranaka top: 0; 15271ac230aSYoshie Muranaka bottom: 0; 15371ac230aSYoshie Muranaka left: 0; 15471ac230aSYoshie Muranaka width: 4px; 15571ac230aSYoshie Muranaka background-color: $primary; 15671ac230aSYoshie Muranaka } 15742c19893SDerick Montague} 15842c19893SDerick Montague</style> 159