From 2c9d0608c7e54890cda835d51906782b053e4cb0 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 21 May 2019 18:53:28 +0300
Subject: [PATCH] Menu animations redone with Vue

---
 src/AppMenu.vue            | 196 ++++++++++++++++++++-----------------
 src/assets/styles/app.scss |  40 +++-----
 2 files changed, 123 insertions(+), 113 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 98b9b5c51..d9e0ea943 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -1,153 +1,173 @@
 <template>
     <div :class="['layout-sidebar', {'active': active}]">
         <div class="layout-menu">
-            <a @click="toggleMenu($event, 0)" :class="{'active-menuitem': activeMenuIndex === 0}">
+            <a tabindex="0" @click="toggleMenu($event, 0)" :class="{'active-menuitem': activeMenuIndex === 0}">
                 <img alt="input" class="layout-menu-icon-inactive" src="./assets/images/menu/input.svg" />
                 <img alt="input" class="layout-menu-icon-active" src="./assets/images/menu/input-active.svg" />
                 <span>Input</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
-                <div>
-                    <router-link to="/autocomplete">&#9679; AutoComplete</router-link>
-                    <router-link to="/calendar">&#9679; Calendar</router-link>
-                    <router-link to="/checkbox">&#9679; Checkbox</router-link>
-                    <router-link to="/chips">&#9679; Chips</router-link>
-                    <router-link to="/dropdown">&#9679; Dropdown</router-link>
-                    <router-link to="/editor">&#9679; Editor</router-link>
-                    <router-link to="/inputgroup">&#9679; InputGroup</router-link>
-                    <router-link to="/inputswitch">&#9679; InputSwitch</router-link>
-                    <router-link to="/inputtext">&#9679; InputText</router-link>
-                    <router-link to="/listbox">&#9679; Listbox</router-link>
-                    <router-link to="/multiselect">&#9679; MultiSelect</router-link>
-                    <router-link to="/password">&#9679; Password</router-link>
-                    <router-link to="/radiobutton">&#9679; RadioButton</router-link>
-                    <router-link to="/rating">&#9679; Rating</router-link>
-                    <router-link to="/selectbutton">&#9679; SelectButton</router-link>
-                    <router-link to="/slider">&#9679; Slider</router-link>
-                    <router-link to="/spinner">&#9679; Spinner</router-link>
-                    <router-link to="/textarea">&#9679; Textarea</router-link>
-                    <router-link to="/togglebutton">&#9679; ToggleButton</router-link>
-                    <router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 0">
+                    <div>
+                        <router-link to="/autocomplete">&#9679; AutoComplete</router-link>
+                        <router-link to="/calendar">&#9679; Calendar</router-link>
+                        <router-link to="/checkbox">&#9679; Checkbox</router-link>
+                        <router-link to="/chips">&#9679; Chips</router-link>
+                        <router-link to="/dropdown">&#9679; Dropdown</router-link>
+                        <router-link to="/editor">&#9679; Editor</router-link>
+                        <router-link to="/inputgroup">&#9679; InputGroup</router-link>
+                        <router-link to="/inputswitch">&#9679; InputSwitch</router-link>
+                        <router-link to="/inputtext">&#9679; InputText</router-link>
+                        <router-link to="/listbox">&#9679; Listbox</router-link>
+                        <router-link to="/multiselect">&#9679; MultiSelect</router-link>
+                        <router-link to="/password">&#9679; Password</router-link>
+                        <router-link to="/radiobutton">&#9679; RadioButton</router-link>
+                        <router-link to="/rating">&#9679; Rating</router-link>
+                        <router-link to="/selectbutton">&#9679; SelectButton</router-link>
+                        <router-link to="/slider">&#9679; Slider</router-link>
+                        <router-link to="/spinner">&#9679; Spinner</router-link>
+                        <router-link to="/textarea">&#9679; Textarea</router-link>
+                        <router-link to="/togglebutton">&#9679; ToggleButton</router-link>
+                        <router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
 
-             <a @click="toggleMenu($event, 1)" :class="{'active-menuitem': activeMenuIndex === 1}">
+            <a tabindex="0" @click="toggleMenu($event, 1)" :class="{'active-menuitem': activeMenuIndex === 1}">
                 <img alt="button" class="layout-menu-icon-inactive" src="./assets/images/menu/button.svg" />
                 <img alt="button" class="layout-menu-icon-active" src="./assets/images/menu/button-active.svg" />
                 <span>Button</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 1, 'submenushow': activeMenuIndex === 1}">
-                <div>
-                    <router-link to="/button">&#9679; Button</router-link>
-                    <router-link to="/splitbutton">&#9679; SplitButton</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 1">
+                    <div>
+                        <router-link to="/button">&#9679; Button</router-link>
+                        <router-link to="/splitbutton">&#9679; SplitButton</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
 
-            <a @click="toggleMenu($event, 2)" :class="{'active-menuitem': activeMenuIndex === 2}">
+            <a tabindex="0" @click="toggleMenu($event, 2)" :class="{'active-menuitem': activeMenuIndex === 2}">
                 <img alt="data" class="layout-menu-icon-inactive" src="./assets/images/menu/data.svg" />
                 <img alt="data" class="layout-menu-icon-active" src="./assets/images/menu/data-active.svg" />
                 <span>Data</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 2, 'submenushow': activeMenuIndex === 2}">
-                <div>
-                    <router-link to="/dataview">&#9679; DataView</router-link>
-                    <router-link to="/fullcalendar">&#9679; FullCalendar</router-link>
-                    <router-link to="/paginator">&#9679; Paginator</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 2">
+                    <div>
+                        <router-link to="/dataview">&#9679; DataView</router-link>
+                        <router-link to="/fullcalendar">&#9679; FullCalendar</router-link>
+                        <router-link to="/paginator">&#9679; Paginator</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
 
-            <a @click="toggleMenu($event, 3)" :class="{'active-menuitem': activeMenuIndex === 3}">
+            <a tabindex="0" @click="toggleMenu($event, 3)" :class="{'active-menuitem': activeMenuIndex === 3}">
                 <img alt="panel" class="layout-menu-icon-inactive" src="./assets/images/menu/panel.svg" />
                 <img alt="panel" class="layout-menu-icon-active" src="./assets/images/menu/panel-active.svg" />
                 <span>Panel</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 3, 'submenushow': activeMenuIndex === 3}">
-                <div>
-                    <router-link to="/accordion">&#9679; Accordion</router-link>
-                    <router-link to="/card">&#9679; Card</router-link>
-                    <router-link to="/panel">&#9679; Panel</router-link>
-                    <router-link to="/fieldset">&#9679; Fieldset</router-link>
-                    <router-link to="/flexgrid">&#9679; FlexGrid</router-link>
-                    <router-link to="/tabview">&#9679; TabView</router-link>
-                    <router-link to="/toolbar">&#9679; Toolbar</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 3">
+                    <div>
+                        <router-link to="/accordion">&#9679; Accordion</router-link>
+                        <router-link to="/card">&#9679; Card</router-link>
+                        <router-link to="/panel">&#9679; Panel</router-link>
+                        <router-link to="/fieldset">&#9679; Fieldset</router-link>
+                        <router-link to="/flexgrid">&#9679; FlexGrid</router-link>
+                        <router-link to="/tabview">&#9679; TabView</router-link>
+                        <router-link to="/toolbar">&#9679; Toolbar</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
 
-            <a @click="toggleMenu($event, 4)" :class="{'active-menuitem': activeMenuIndex === 4}">
+            <a tabindex="0" @click="toggleMenu($event, 4)" :class="{'active-menuitem': activeMenuIndex === 4}">
                 <img alt="overlay" class="layout-menu-icon-inactive" src="./assets/images/menu/overlay.svg" />
                 <img alt="overlay" class="layout-menu-icon-active" src="./assets/images/menu/overlay-active.svg" />
                 <span>Overlay</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 4, 'submenushow': activeMenuIndex === 4}">
-                <div>
-                    <router-link to="/dialog">&#9679; Dialog</router-link>
-                    <router-link to="/overlaypanel">&#9679; OverlayPanel</router-link>
-                    <router-link to="/sidebar">&#9679; Sidebar</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 4">
+                    <div>
+                        <router-link to="/dialog">&#9679; Dialog</router-link>
+                        <router-link to="/overlaypanel">&#9679; OverlayPanel</router-link>
+                        <router-link to="/sidebar">&#9679; Sidebar</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
 
-            <a @click="toggleMenu($event, 5)" :class="{'active-menuitem': activeMenuIndex === 5}">
+            <a tabindex="0" @click="toggleMenu($event, 5)" :class="{'active-menuitem': activeMenuIndex === 5}">
                 <img alt="file" class="layout-menu-icon-inactive" src="./assets/images/menu/file.svg" />
                 <img alt="file" class="layout-menu-icon-active" src="./assets/images/menu/file-active.svg" />
                 <span>File</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 5, 'submenushow': activeMenuIndex === 5}">
-                <div>
-                    <router-link to="/fileupload">&#9679; Upload</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 5">
+                    <div>
+                        <router-link to="/fileupload">&#9679; Upload</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
 
-            <a @click="toggleMenu($event, 6)" :class="{'active-menuitem': activeMenuIndex === 6}">
+            <a tabindex="0" @click="toggleMenu($event, 6)" :class="{'active-menuitem': activeMenuIndex === 6}">
                 <img alt="menu" class="layout-menu-icon-inactive" src="./assets/images/menu/menu.svg" />
                 <img alt="menu" class="layout-menu-icon-active" src="./assets/images/menu/menu-active.svg" />
                 <span>Menu</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 6, 'submenushow': activeMenuIndex === 6}">
-                <div>
-                   <router-link to="/">&#9679; Link</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 6">
+                    <div>
+                        <router-link to="/">&#9679; Link</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
 
-            <a @click="toggleMenu($event, 7)" :class="{'active-menuitem': activeMenuIndex === 7}">
+            <a tabindex="0" @click="toggleMenu($event, 7)" :class="{'active-menuitem': activeMenuIndex === 7}">
                 <img alt="charts" class="layout-menu-icon-inactive" src="./assets/images/menu/charts.svg" />
                 <img alt="charts" class="layout-menu-icon-active" src="./assets/images/menu/charts-active.svg" />
                 <span>Chart</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 7, 'submenushow': activeMenuIndex === 7}">
-                <div>
-                    <router-link to="/chart">&#9679; ChartModel</router-link>
-                    <router-link to="/chart/pie">&#9679; Pie</router-link>
-                    <router-link to="/chart/doughnut">&#9679; Doughnut</router-link>
-                    <router-link to="/chart/bar">&#9679; Bar</router-link>
-                    <router-link to="/chart/line">&#9679; Line</router-link>
-                    <router-link to="/chart/polararea">&#9679; PolarArea</router-link>
-                    <router-link to="/chart/radar">&#9679; Radar</router-link>
-                    <router-link to="/chart/combo">&#9679; Combo</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 7">
+                    <div>
+                        <router-link to="/chart">&#9679; ChartModel</router-link>
+                        <router-link to="/chart/pie">&#9679; Pie</router-link>
+                        <router-link to="/chart/doughnut">&#9679; Doughnut</router-link>
+                        <router-link to="/chart/bar">&#9679; Bar</router-link>
+                        <router-link to="/chart/line">&#9679; Line</router-link>
+                        <router-link to="/chart/polararea">&#9679; PolarArea</router-link>
+                        <router-link to="/chart/radar">&#9679; Radar</router-link>
+                        <router-link to="/chart/combo">&#9679; Combo</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
 
-            <a @click="toggleMenu($event, 8)" :class="{'active-menuitem': activeMenuIndex === 8}">
+            <a tabindex="0" @click="toggleMenu($event, 8)" :class="{'active-menuitem': activeMenuIndex === 8}">
                 <img alt="message" class="layout-menu-icon-inactive" src="./assets/images/menu/message.svg" />
                 <img alt="message" class="layout-menu-icon-active" src="./assets/images/menu/message-active.svg" />
                 <span>Messages</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 8, 'submenushow': activeMenuIndex === 8}">
-                <div>
-                    <router-link to="/message">&#9679; Message</router-link>
-                    <router-link to="/toast">&#9679; Toast</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 8">
+                    <div>
+                        <router-link to="/message">&#9679; Message</router-link>
+                        <router-link to="/toast">&#9679; Toast</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
 
-            <a @click="toggleMenu($event, 9)" :class="{'active-menuitem': activeMenuIndex === 9}">
+            <a tabindex="0" @click="toggleMenu($event, 9)" :class="{'active-menuitem': activeMenuIndex === 9}">
                 <img alt="misc" class="layout-menu-icon-inactive" src="./assets/images/menu/misc.svg" />
                 <img alt="misc" class="layout-menu-icon-active" src="./assets/images/menu/misc-active.svg" />
                 <span>Misc</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 9, 'submenushow': activeMenuIndex === 9}">
-                <div>
-                    <router-link to="/progressbar">&#9679; ProgressBar</router-link>
+            <transition name="layout-submenu-wrapper">
+                <div v-show="activeMenuIndex === 9">
+                    <div>
+                        <router-link to="/progressbar">&#9679; ProgressBar</router-link>
+                    </div>
                 </div>
-            </div>
+            </transition>
         </div>
     </div>
 </template>
diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index ae74b444f..b484a7833 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -276,7 +276,6 @@ body {
         
         > div {
             width: auto;
-            overflow: hidden;
             background-color: #ffffff;
             
             > div {
@@ -284,33 +283,24 @@ body {
                 padding: 20px 15px;
             }
 
-            &.submenuhide {
-                overflow: hidden;
+            &.layout-submenu-wrapper-enter,
+            &.layout-submenu-wrapper-leave-to {
                 max-height: 0;
-                padding-top: 0;
-                padding-bottom: 0;
-                margin-top: 0;
-                margin-bottom: 0;
-                -moz-transition-duration: 0.4s;
-                -webkit-transition-duration: 0.4s;
-                -o-transition-duration: 0.4s;
-                transition-duration: 0.4s;
-                -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-                -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-                -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-                transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
             }
 
-            &.submenushow {
-                -moz-transition-duration: 0.4s;
-                -webkit-transition-duration: 0.4s;
-                -o-transition-duration: 0.4s;
-                transition-duration: 0.4s;
-                -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-                -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-                -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-                transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-                max-height: 500px;
+            &.layout-submenu-wrapper-enter-to,
+            &.layout-submenu-wrapper-leave {
+                max-height: 1000px;
+            }
+
+            &.layout-submenu-wrapper-leave-active {
+                overflow: hidden;
+                transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+            }
+
+            &.layout-submenu-wrapper-enter-active {
+                overflow: hidden;
+                transition: max-height 1s ease-in-out;
             }
 
             a {