1<template>
2  <b-nav vertical>
3    <b-nav-item to="/"><icon-overview />Overview</b-nav-item>
4
5    <li class="nav-item">
6      <b-button v-b-toggle.health-menu variant="link">
7        <icon-health />Health
8        <icon-expand class="icon-expand" />
9      </b-button>
10      <b-collapse id="health-menu" tag="ul" class="nav-item__nav">
11        <b-nav-item href="javascript:void(0)">Event Log</b-nav-item>
12        <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item>
13        <b-nav-item href="javascript:void(0)">Sensors</b-nav-item>
14      </b-collapse>
15    </li>
16
17    <li class="nav-item">
18      <b-button v-b-toggle.control-menu variant="link">
19        <icon-control />Control
20        <icon-expand class="icon-expand" />
21      </b-button>
22      <b-collapse id="control-menu" tag="ul" class="nav-item__nav">
23        <b-nav-item href="javascript:void(0)">Manage power usage</b-nav-item>
24        <b-nav-item href="javascript:void(0)">Server LED</b-nav-item>
25        <b-nav-item href="javascript:void(0)">
26          Server power operations
27        </b-nav-item>
28      </b-collapse>
29    </li>
30
31    <li class="nav-item">
32      <b-button v-b-toggle.configuration-menu variant="link">
33        <icon-configuration />Configuration
34        <icon-expand class="icon-expand" />
35      </b-button>
36      <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav">
37        <b-nav-item href="javascript:void(0)">Firmware</b-nav-item>
38        <b-nav-item href="javascript:void(0)">Network settings</b-nav-item>
39        <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item>
40      </b-collapse>
41    </li>
42
43    <li class="nav-item">
44      <b-button v-b-toggle.access-control-menu variant="link">
45        <icon-access-control />Access Control
46        <icon-expand class="icon-expand" />
47      </b-button>
48      <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav">
49        <b-nav-item href="javascript:void(0)">LDAP</b-nav-item>
50        <b-nav-item to="/access-control/local-user-management">
51          Local user management
52        </b-nav-item>
53        <b-nav-item href="javascript:void(0)">SSL Certificates</b-nav-item>
54      </b-collapse>
55    </li>
56  </b-nav>
57</template>
58
59<script>
60import IconAnalytics from '@carbon/icons-vue/es/analytics/16';
61import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
62import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
63import IconSettings from '@carbon/icons-vue/es/settings/16';
64import IconPassword from '@carbon/icons-vue/es/password/16';
65import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
66
67export default {
68  name: 'AppNavigation',
69  components: {
70    iconOverview: IconAnalytics,
71    iconHealth: IconDataCheck,
72    iconControl: IconSettingsAdjust,
73    iconConfiguration: IconSettings,
74    iconAccessControl: IconPassword,
75    iconExpand: IconChevronUp
76  }
77};
78</script>
79
80<style scoped lang="scss">
81svg {
82  fill: $gray-900;
83  margin-left: 0 !important; //!important overriding button specificity
84  vertical-align: text-bottom;
85  &:not(.icon-expand) {
86    margin-right: $spacer;
87  }
88}
89
90.nav {
91  min-height: 100%;
92  padding-top: $spacer;
93}
94
95.nav-item__nav {
96  list-style: none;
97  padding-left: 0;
98  margin-left: 0;
99
100  .nav-link {
101    padding-left: $spacer * 4;
102
103    &:not(.nav-link--current) {
104      font-weight: normal;
105    }
106  }
107}
108
109.btn-link {
110  width: 100%;
111  text-align: left;
112  text-decoration: none !important;
113  border-radius: 0;
114
115  &.collapsed {
116    .icon-expand {
117      transform: rotate(180deg);
118    }
119  }
120}
121
122.icon-expand {
123  float: right;
124  margin-top: $spacer / 4;
125}
126
127.btn-link,
128.nav-link {
129  position: relative;
130  font-weight: $headings-font-weight;
131  padding-left: $spacer; // defining consistent padding for links and buttons
132  padding-right: $spacer;
133  color: $gray-900 !important; //using important to avoid styling states
134
135  &:hover {
136    background-color: $gray-300;
137  }
138
139  &:focus {
140    box-shadow: $btn-focus-box-shadow;
141  }
142}
143
144.nav-link--current {
145  font-weight: $headings-font-weight;
146  background-color: $gray-300;
147
148  &::before {
149    content: '';
150    position: absolute;
151    top: 0;
152    bottom: 0;
153    left: 0;
154    width: 4px;
155    background-color: $primary;
156  }
157}
158</style>
159