From 78b3cb16f4f736181024a2c6f394538f3355c166 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 13 May 2020 16:59:23 +0300
Subject: [PATCH] Animated menu

---
 src/AppMenu.vue                  | 124 +++++++++++++++++--------------
 src/assets/styles/app/_menu.scss |   2 +-
 2 files changed, 71 insertions(+), 55 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 8e230406c..e22e9c915 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -63,31 +63,35 @@
                 <router-link to="/datatable" v-slot="{href,route,navigate,isActive,isExactActive}">
                     <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
                         <a :href="href" @click="navigate">DataTable</a>
-                        <ul>
-                            <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>
+                        <transition name="p-toggleable-content">
+                            <div class="p-toggleable-content" v-show="isActive">
+                                <ul>
+                                    <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>
                     </div>
                 </router-link>
 
@@ -100,29 +104,37 @@
                 <router-link to="/tree" v-slot="{href,route,navigate,isActive,isExactActive}">
                     <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
                         <a :href="href" @click="navigate">Tree</a>
-                        <ul>
-                            <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>
+                        <transition name="p-toggleable-content">
+                            <div class="p-toggleable-content" v-show="isActive">
+                                <ul>
+                                    <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>
                     </div>
                 </router-link>
                 <router-link to="/treetable" v-slot="{href,route,navigate,isActive,isExactActive}">
                     <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
                         <a :href="href" @click="navigate">TreeTable</a>
-                        <ul>
-                            <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>
+                        <transition name="p-toggleable-content">
+                            <div class="p-toggleable-content" v-show="isActive">
+                                <ul>
+                                    <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>
                     </div>
                 </router-link>
             </div>
@@ -209,17 +221,21 @@
                 <router-link to="/galleria" v-slot="{href,route,navigate,isActive,isExactActive}">
                     <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
                         <a :href="href" @click="navigate">Galleria</a>
-                        <ul>
-                            <li><router-link to="/galleria">Documentation</router-link></li>
-                            <li><router-link to="/galleria/basic">Basic</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/preview">Preview</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/circular">Circular</router-link></li>
-                            <li><router-link to="/galleria/caption">Caption</router-link></li>
-                        </ul>
+                        <transition name="p-toggleable-content">
+                            <div class="p-toggleable-content" v-show="isActive">
+                                <ul>
+                                    <li><router-link to="/galleria">Documentation</router-link></li>
+                                    <li><router-link to="/galleria/basic">Basic</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/preview">Preview</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/circular">Circular</router-link></li>
+                                    <li><router-link to="/galleria/caption">Caption</router-link></li>
+                                </ul>
+                            </div>
+                        </transition>
                     </div>
                 </router-link>
             </div>
diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss
index f54f45eb3..01a4930f2 100644
--- a/src/assets/styles/app/_menu.scss
+++ b/src/assets/styles/app/_menu.scss
@@ -7,6 +7,7 @@
     overflow: auto;
     width: 250px;
     border-right: 1px solid var(--layer-2);
+    user-select: none;
 
     .layout-menu {
         > span {
@@ -69,7 +70,6 @@
                 }
 
                 ul {
-                    display: none;
                     padding: .5rem 0;
                     margin: 0;
                     list-style-type: none;