From 35974df78bac6960620d424241f81a106abc0bf7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 27 Aug 2021 15:46:44 +0300
Subject: [PATCH] #1275 for Menubar

---
 api-generator/components/menubar.js   |  6 ++++++
 src/components/menubar/Menubar.d.ts   |  1 +
 src/components/menubar/Menubar.vue    |  7 ++++++-
 src/components/menubar/MenubarSub.vue | 20 ++++++++++++++------
 src/views/menubar/MenubarDoc.vue      | 20 +++++++++++++++++++-
 5 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/api-generator/components/menubar.js b/api-generator/components/menubar.js
index 549d8c047..675607011 100644
--- a/api-generator/components/menubar.js
+++ b/api-generator/components/menubar.js
@@ -4,6 +4,12 @@ const MenubarProps = [
         type: "array",
         default: "null",
         description: "An array of menuitems."
+    },
+    {
+        name: "exact",
+        type: "boolean",
+        default: "true",
+        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
     }
 ];
 
diff --git a/src/components/menubar/Menubar.d.ts b/src/components/menubar/Menubar.d.ts
index b7d34a09e..f443f01ce 100755
--- a/src/components/menubar/Menubar.d.ts
+++ b/src/components/menubar/Menubar.d.ts
@@ -2,6 +2,7 @@ import { VNode } from 'vue';
 
 interface MenubarProps {
     model?: any[];
+    exact?: boolean;
 }
 
 declare class Menubar {
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
index 5935650c4..4833a91da 100755
--- a/src/components/menubar/Menubar.vue
+++ b/src/components/menubar/Menubar.vue
@@ -6,7 +6,8 @@
         <a ref="menubutton" tabindex="0" class="p-menubar-button" @click="toggle($event)">
             <i class="pi pi-bars" />
         </a>
-        <MenubarSub ref="rootmenu" :model="model" :root="true" :mobileActive="mobileActive" @leaf-click="onLeafClick" :template="$slots.item"/>
+        <MenubarSub ref="rootmenu" :model="model" :root="true" :mobileActive="mobileActive" 
+            @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
         <div class="p-menubar-end" v-if="$slots.end">
             <slot name="end"></slot>
         </div>
@@ -23,6 +24,10 @@ export default {
 		model: {
             type: Array,
             default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     outsideClickListener: null,
diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
index da63d3a11..090af581c 100755
--- a/src/components/menubar/MenubarSub.vue
+++ b/src/components/menubar/MenubarSub.vue
@@ -4,13 +4,13 @@
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
                 @mouseenter="onItemMouseEnter($event, item)">
                 <template v-if="!template">
-                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
-                        <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
+                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                        <a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
                     </router-link>
-                    <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
+                    <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
                         @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
@@ -19,7 +19,7 @@
                 </template>
                 <component v-else :is="template" :item="item"></component>
                 <MenubarSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :mobileActive="mobileActive"
-                    @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem"  :template="template" />
+                    @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :template="template" :exact="exact" />
             </li>
             <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
         </template>
@@ -57,6 +57,10 @@ export default {
         template: {
             type: Object,
             default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     documentClickListener: null,
@@ -250,8 +254,12 @@ export default {
                 }
             ]
         },
-        getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
+        linkClass(item, routerProps) {
+            return ['p-menuitem-link', {
+                'p-disabled': this.disabled(item),
+                'router-link-active': routerProps && routerProps.isActive,
+                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+            }];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index 7e95c0962..741c55425 100755
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -154,7 +154,7 @@ export default {
 
 </code></pre>
 
-        <h5>Custom Content</h5>
+        <h5>Templating</h5>
         <p>Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
 <pre v-code><code><template v-pre>
 &lt;Menubar :model="items"&gt;
@@ -169,6 +169,18 @@ export default {
     &lt;/template&gt;
 &lt;/Menubar&gt;
 </template>
+</code></pre>
+
+<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+<pre v-code><code><template v-pre>
+&lt;Menubar :model="items"&gt;
+    &lt;template #item="{item}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
+        &lt;/router-link&gt;
+    &lt;/template&gt;
+&lt;/Menubar&gt;
+</template>
 </code></pre>
 
         <h5>Properties</h5>
@@ -189,6 +201,12 @@ export default {
                         <td>array</td>
                         <td>null</td>
                         <td>An array of menuitems.</td>
+                    </tr>
+                     <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
                     </tr>
 				</tbody>
 			</table>