From a5f4bba440d7f9ea47046a0a561d49adf0a1e6d4 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Wed, 16 Jun 2021 18:25:58 +0000
Subject: Add latest changes from gitlab-org/gitlab@14-0-stable-ee

---
 .../nav/components/top_nav_menu_item.vue           | 27 +++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

(limited to 'app/assets/javascripts/nav/components/top_nav_menu_item.vue')

diff --git a/app/assets/javascripts/nav/components/top_nav_menu_item.vue b/app/assets/javascripts/nav/components/top_nav_menu_item.vue
index a0d92811a6f..08b2fbf2ed1 100644
--- a/app/assets/javascripts/nav/components/top_nav_menu_item.vue
+++ b/app/assets/javascripts/nav/components/top_nav_menu_item.vue
@@ -1,5 +1,10 @@
 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
+import { kebabCase, mapKeys } from 'lodash';
+
+const getDataKey = (key) => `data-${kebabCase(key)}`;
+
+const ACTIVE_CLASS = 'gl-shadow-none! gl-font-weight-bold! active';
 
 export default {
   components: {
@@ -11,7 +16,18 @@ export default {
       type: Object,
       required: true,
     },
+    iconOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    dataAttrs() {
+      return mapKeys(this.menuItem.data || {}, (value, key) => getDataKey(key));
+    },
   },
+  ACTIVE_CLASS,
 };
 </script>
 
@@ -20,12 +36,17 @@ export default {
     category="tertiary"
     :href="menuItem.href"
     class="top-nav-menu-item gl-display-block"
+    :class="[menuItem.css_class, { [$options.ACTIVE_CLASS]: menuItem.active }]"
+    :aria-label="menuItem.title"
+    v-bind="dataAttrs"
     v-on="$listeners"
   >
     <span class="gl-display-flex">
-      <gl-icon v-if="menuItem.icon" :name="menuItem.icon" class="gl-mr-2!" />
-      {{ menuItem.title }}
-      <gl-icon v-if="menuItem.view" name="chevron-right" class="gl-ml-auto" />
+      <gl-icon v-if="menuItem.icon" :name="menuItem.icon" :class="{ 'gl-mr-2!': !iconOnly }" />
+      <template v-if="!iconOnly">
+        {{ menuItem.title }}
+        <gl-icon v-if="menuItem.view" name="chevron-right" class="gl-ml-auto" />
+      </template>
     </span>
   </gl-button>
 </template>
-- 
cgit v1.2.1