Style primary navigation
Adding styles and interaction patterns based on community
approved design proposals.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie7f422db6fbbca2033e10d2d2ae331540a8a038a
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 6871b88..c246b53 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -1,13 +1,13 @@
<template>
<b-nav vertical>
- <b-nav-item to="/"><Analytics16 /> Overview</b-nav-item>
+ <b-nav-item to="/"><icon-overview />Overview</b-nav-item>
<li class="nav-item">
<b-button v-b-toggle.health-menu variant="link">
- <DataCheck16 /> Health
+ <icon-health />Health
+ <icon-expand class="icon-expand" />
</b-button>
-
- <b-collapse tag="ul" id="health-menu">
+ <b-collapse tag="ul" id="health-menu" class="nav-item__nav">
<b-nav-item href="javascript:void(0)">Event Log</b-nav-item>
<b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item>
<b-nav-item href="javascript:void(0)">Sensors</b-nav-item>
@@ -16,23 +16,24 @@
<li class="nav-item">
<b-button v-b-toggle.control-menu variant="link">
- <SettingsAdjust16 />
- Control
+ <icon-control />Control
+ <icon-expand class="icon-expand" />
</b-button>
- <b-collapse tag="ul" id="control-menu">
- <b-nav-item href="javascript:void(0)"
- >Server power operations</b-nav-item
- >
+ <b-collapse tag="ul" id="control-menu" class="nav-item__nav">
+ <b-nav-item href="javascript:void(0)">
+ Server power operations
+ </b-nav-item>
<b-nav-item href="javascript:void(0)">Manage power usage</b-nav-item>
<b-nav-item href="javascript:void(0)">Server LED</b-nav-item>
</b-collapse>
</li>
+
<li class="nav-item">
<b-button v-b-toggle.configuration-menu variant="link">
- <Settings16 />
- Health
+ <icon-configuration />Configuration
+ <icon-expand class="icon-expand" />
</b-button>
- <b-collapse tag="ul" id="configuration-menu">
+ <b-collapse tag="ul" id="configuration-menu" class="nav-item__nav">
<b-nav-item href="javascript:void(0)">Network settings</b-nav-item>
<b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item>
<b-nav-item href="javascript:void(0)">Firmware</b-nav-item>
@@ -41,14 +42,14 @@
<li class="nav-item">
<b-button v-b-toggle.access-control-menu variant="link">
- <Password16 />
- Access Control
+ <icon-access-control />Access Control
+ <icon-expand class="icon-expand" />
</b-button>
- <b-collapse tag="ul" id="access-control-menu">
+ <b-collapse tag="ul" id="access-control-menu" class="nav-item__nav">
<b-nav-item href="javascript:void(0)">LDAP</b-nav-item>
- <b-nav-item to="/access-control/local-user-management"
- >Local user management</b-nav-item
- >
+ <b-nav-item to="/access-control/local-user-management">
+ Local user management
+ </b-nav-item>
<b-nav-item href="javascript:void(0)">SSL Certificates</b-nav-item>
</b-collapse>
</li>
@@ -56,28 +57,102 @@
</template>
<script>
-import Analytics16 from '@carbon/icons-vue/es/analytics/16';
-import DataCheck16 from '@carbon/icons-vue/es/data--check/16';
-import SettingsAdjust16 from '@carbon/icons-vue/es/settings--adjust/16';
-import Settings16 from '@carbon/icons-vue/es/settings/16';
-import Password16 from '@carbon/icons-vue/es/password/16';
+import IconAnalytics from '@carbon/icons-vue/es/analytics/16';
+import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
+import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
+import IconSettings from '@carbon/icons-vue/es/settings/16';
+import IconPassword from '@carbon/icons-vue/es/password/16';
+import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
export default {
name: 'AppNavigation',
components: {
- Analytics16,
- DataCheck16,
- SettingsAdjust16,
- Settings16,
- Password16
+ iconOverview: IconAnalytics,
+ iconHealth: IconDataCheck,
+ iconControl: IconSettingsAdjust,
+ iconConfiguration: IconSettings,
+ iconAccessControl: IconPassword,
+ iconExpand: IconChevronUp
}
};
</script>
-<style scoped>
-ul li ul {
+<style scoped lang="scss">
+svg {
+ fill: $gray-900;
+ margin-left: 0 !important; //!important overriding button specificity
+ vertical-align: text-bottom;
+ &:not(.icon-expand) {
+ margin-right: $spacer;
+ }
+}
+
+.nav {
+ min-height: 100%;
+ padding-top: $spacer;
+}
+
+.nav-item__nav {
list-style: none;
padding-left: 0;
- margin-left: 1rem;
+ margin-left: 0;
+
+ .nav-link {
+ padding-left: $spacer * 4;
+
+ &:not(.nav-link--current) {
+ font-weight: normal;
+ }
+ }
+}
+
+.btn-link {
+ width: 100%;
+ text-align: left;
+ text-decoration: none !important;
+ border-radius: 0;
+
+ &.collapsed {
+ .icon-expand {
+ transform: rotate(180deg);
+ }
+ }
+
+ &:focus {
+ box-shadow: $btn-focus-box-shadow;
+ }
+}
+
+.icon-expand {
+ float: right;
+ margin-top: $spacer / 4;
+}
+
+.btn-link,
+.nav-link {
+ position: relative;
+ font-weight: $headings-font-weight;
+ padding-left: $spacer; // defining consistent padding for links and buttons
+ padding-right: $spacer;
+ color: $gray-900 !important; //using important to avoid styling states
+
+ &:hover {
+ background-color: $gray-300;
+ }
+}
+
+.nav-link--current {
+ font-weight: $headings-font-weight;
+ background-color: $gray-300;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 4px;
+ background-color: $primary;
+ }
}
</style>