From cf198eee219b5d684e045110dfbbeb78e5036b46 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 15 May 2020 18:43:15 +0300
Subject: [PATCH] Router support for menu

---
 src/AppMenu.vue                  | 168 ++++++++++++++++---------------
 src/assets/styles/app/_menu.scss |   2 +-
 2 files changed, 90 insertions(+), 80 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index f1ba841e5..9a6a7d4ea 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -60,37 +60,39 @@
             </span>
             <div>
                 <router-link to="/carousel">Carousel</router-link>
-                <a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
-                <transition name="p-toggleable-content">
-                    <div class="p-toggleable-content" v-show="activeSubmenus['datatable'] === true">
-                        <ul>
-                            <li><router-link to="/datatable">Documentation</router-link></li>
-                            <li><router-link to="/datatable/basic">Basic</router-link></li>
-                            <li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li>
-                            <li><router-link to="/datatable/templating">Templating</router-link></li>
-                            <li><router-link to="/datatable/size">Size</router-link></li>
-                            <li><router-link to="/datatable/colgroup">ColGroup</router-link></li>
-                            <li><router-link to="/datatable/paginator">Paginator</router-link></li>
-                            <li><router-link to="/datatable/sort">Sort</router-link></li>
-                            <li><router-link to="/datatable/filter">Filter</router-link></li>
-                            <li><router-link to="/datatable/selection">Selection</router-link></li>
-                            <li><router-link to="/datatable/lazy">Lazy</router-link></li>
-                            <li><router-link to="/datatable/scroll">Scroll</router-link></li>
-                            <li><router-link to="/datatable/rowexpand">Expand</router-link></li>
-                            <li><router-link to="/datatable/edit">Edit</router-link></li>
-                            <li><router-link to="/datatable/coltoggle">ColToggle</router-link></li>
-                            <li><router-link to="/datatable/colresize">ColResize</router-link></li>
-                            <li><router-link to="/datatable/reorder">Reorder</router-link></li>
-                            <li><router-link to="/datatable/rowgroup">RowGroup</router-link></li>
-                            <li><router-link to="/datatable/contextmenu">ContextMenu</router-link></li>
-                            <li><router-link to="/datatable/responsive">Responsive</router-link></li>
-                            <li><router-link to="/datatable/export">Export</router-link></li>
-                            <li><router-link to="/datatable/state">State</router-link></li>
-                            <li><router-link to="/datatable/style">Style</router-link></li>
-                            <li><router-link to="/datatable/crud">Crud</router-link></li>
-                        </ul>
-                    </div>
-                </transition>
+                <router-link to="/datatable" v-slot="{ href, route, navigate, isActive }">
+                    <a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>                
+                    <transition name="p-toggleable-content">
+                        <div class="p-toggleable-content" v-show="isSubmenuActive('datatable', isActive)">
+                            <ul>
+                                <li><router-link to="/datatable">Documentation</router-link></li>
+                                <li><router-link to="/datatable/basic">Basic</router-link></li>
+                                <li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li>
+                                <li><router-link to="/datatable/templating">Templating</router-link></li>
+                                <li><router-link to="/datatable/size">Size</router-link></li>
+                                <li><router-link to="/datatable/colgroup">ColGroup</router-link></li>
+                                <li><router-link to="/datatable/paginator">Paginator</router-link></li>
+                                <li><router-link to="/datatable/sort">Sort</router-link></li>
+                                <li><router-link to="/datatable/filter">Filter</router-link></li>
+                                <li><router-link to="/datatable/selection">Selection</router-link></li>
+                                <li><router-link to="/datatable/lazy">Lazy</router-link></li>
+                                <li><router-link to="/datatable/scroll">Scroll</router-link></li>
+                                <li><router-link to="/datatable/rowexpand">Expand</router-link></li>
+                                <li><router-link to="/datatable/edit">Edit</router-link></li>
+                                <li><router-link to="/datatable/coltoggle">ColToggle</router-link></li>
+                                <li><router-link to="/datatable/colresize">ColResize</router-link></li>
+                                <li><router-link to="/datatable/reorder">Reorder</router-link></li>
+                                <li><router-link to="/datatable/rowgroup">RowGroup</router-link></li>
+                                <li><router-link to="/datatable/contextmenu">ContextMenu</router-link></li>
+                                <li><router-link to="/datatable/responsive">Responsive</router-link></li>
+                                <li><router-link to="/datatable/export">Export</router-link></li>
+                                <li><router-link to="/datatable/state">State</router-link></li>
+                                <li><router-link to="/datatable/style">Style</router-link></li>
+                                <li><router-link to="/datatable/crud">Crud</router-link></li>
+                            </ul>
+                        </div>
+                    </transition>
+                </router-link>
 
                 <router-link to="/dataview">DataView</router-link>
                 <router-link to="/fullcalendar">FullCalendar</router-link>
@@ -98,37 +100,40 @@
                 <router-link to="/organizationchart">OrganizationChart</router-link>
                 <router-link to="/paginator">Paginator</router-link>
                 <router-link to="/picklist">PickList</router-link>
-                <a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
-                <transition name="p-toggleable-content">
-                    <div class="p-toggleable-content" v-show="activeSubmenus['tree']">
-                        <ul>
-                            <li><router-link to="/tree">Documentation</router-link></li>
-                            <li><router-link to="/tree/selection">Selection</router-link></li>
-                            <li><router-link to="/tree/lazy">Lazy</router-link></li>
-                            <li><router-link to="/tree/templating">Templating</router-link></li>
-                            <li><router-link to="/tree/filter">Filter</router-link></li>
-                        </ul>
-                    </div>
-                </transition>
-
-                <a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a>
-                <transition name="p-toggleable-content">
-                    <div class="p-toggleable-content" v-show="activeSubmenus['treetable']">
-                        <ul>
-                            <li><router-link to="/treetable">Documentation</router-link></li>
-                            <li><router-link to="/treetable/templating">Templating</router-link></li>
-                            <li><router-link to="/treetable/size">Size</router-link></li>
-                            <li><router-link to="/treetable/paginator">Paginator</router-link></li>
-                            <li><router-link to="/treetable/sort">Sort</router-link></li>
-                            <li><router-link to="/treetable/filter">Filter</router-link></li>
-                            <li><router-link to="/treetable/selection">Selection</router-link></li>
-                            <li><router-link to="/treetable/lazy">Lazy</router-link></li>
-                            <li><router-link to="/treetable/coltoggle">ColToggle</router-link></li>
-                            <li><router-link to="/treetable/colresize">Resize</router-link></li>
-                            <li><router-link to="/treetable/responsive">Responsive</router-link></li>
-                        </ul>
-                    </div>
-                </transition>
+                <router-link to="/tree" v-slot="{ href, route, navigate, isActive }">
+                    <a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
+                    <transition name="p-toggleable-content">
+                        <div class="p-toggleable-content" v-show="isSubmenuActive('tree', isActive)">
+                            <ul>
+                                <li><router-link to="/tree">Documentation</router-link></li>
+                                <li><router-link to="/tree/selection">Selection</router-link></li>
+                                <li><router-link to="/tree/lazy">Lazy</router-link></li>
+                                <li><router-link to="/tree/templating">Templating</router-link></li>
+                                <li><router-link to="/tree/filter">Filter</router-link></li>
+                            </ul>
+                        </div>
+                    </transition>
+                </router-link>
+                <router-link to="/treetable" v-slot="{ href, route, navigate, isActive }">
+                    <a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a>
+                    <transition name="p-toggleable-content">
+                        <div class="p-toggleable-content" v-show="isSubmenuActive('treetable', isActive)">
+                            <ul>
+                                <li><router-link to="/treetable">Documentation</router-link></li>
+                                <li><router-link to="/treetable/templating">Templating</router-link></li>
+                                <li><router-link to="/treetable/size">Size</router-link></li>
+                                <li><router-link to="/treetable/paginator">Paginator</router-link></li>
+                                <li><router-link to="/treetable/sort">Sort</router-link></li>
+                                <li><router-link to="/treetable/filter">Filter</router-link></li>
+                                <li><router-link to="/treetable/selection">Selection</router-link></li>
+                                <li><router-link to="/treetable/lazy">Lazy</router-link></li>
+                                <li><router-link to="/treetable/coltoggle">ColToggle</router-link></li>
+                                <li><router-link to="/treetable/colresize">Resize</router-link></li>
+                                <li><router-link to="/treetable/responsive">Responsive</router-link></li>
+                            </ul>
+                        </div>
+                    </transition>
+                </router-link>
             </div>
 
             <span>
@@ -210,23 +215,25 @@
                 <span>Image</span>
             </span>
             <div>
-                <a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
-                <transition name="p-toggleable-content">
-                    <div class="p-toggleable-content" v-show="activeSubmenus['galleria']">
-                         <ul>
-                            <li><router-link to="/galleria">Documentation</router-link></li>
-                            <li><router-link to="/galleria/programmatic">Programmatic</router-link></li>
-                            <li><router-link to="/galleria/indicator">Indicator</router-link></li>
-                            <li><router-link to="/galleria/thumbnail">Thumbnail</router-link></li>
-                            <li><router-link to="/galleria/navigator">Navigator</router-link></li>
-                            <li><router-link to="/galleria/responsive">Responsive</router-link></li>
-                            <li><router-link to="/galleria/fullscreen">FullScreen</router-link></li>
-                            <li><router-link to="/galleria/autoplay">AutoPlay</router-link></li>
-                            <li><router-link to="/galleria/caption">Caption</router-link></li>
-                            <li><router-link to="/galleria/advanced">Advanced</router-link></li>
-                        </ul>
-                    </div>
-                </transition>
+                <router-link to="/galleria" v-slot="{ href, route, navigate, isActive }">
+                    <a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
+                    <transition name="p-toggleable-content">
+                        <div class="p-toggleable-content" v-show="isSubmenuActive('galleria', isActive)">
+                            <ul>
+                                <li><router-link to="/galleria">Documentation</router-link></li>
+                                <li><router-link to="/galleria/programmatic">Programmatic</router-link></li>
+                                <li><router-link to="/galleria/indicator">Indicator</router-link></li>
+                                <li><router-link to="/galleria/thumbnail">Thumbnail</router-link></li>
+                                <li><router-link to="/galleria/navigator">Navigator</router-link></li>
+                                <li><router-link to="/galleria/responsive">Responsive</router-link></li>
+                                <li><router-link to="/galleria/fullscreen">FullScreen</router-link></li>
+                                <li><router-link to="/galleria/autoplay">AutoPlay</router-link></li>
+                                <li><router-link to="/galleria/caption">Caption</router-link></li>
+                                <li><router-link to="/galleria/advanced">Advanced</router-link></li>
+                            </ul>
+                        </div>
+                    </transition>
+                </router-link>
             </div>
 
             <span>
@@ -261,6 +268,9 @@ export default {
             this.activeSubmenus[name] = this.activeSubmenus[name] ? false: true;
             this.activeSubmenus = {...this.activeSubmenus};
             event.preventDefault();
+        },
+        isSubmenuActive(name, routerIsActive) {
+            return this.activeSubmenus.hasOwnProperty(name) ? this.activeSubmenus[name] : routerIsActive;
         }
     }
 }
diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss
index 98332d9cf..6bbe84dfa 100644
--- a/src/assets/styles/app/_menu.scss
+++ b/src/assets/styles/app/_menu.scss
@@ -59,7 +59,7 @@
                 }
             }
 
-            > div {
+            div {
                 &.router-link-exact-active {
                     > a {
                         font-weight: 700;