From f76ef79b2177fe3c0d4c969865da3343475c4cae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Thu, 3 Nov 2022 01:37:25 +0300
Subject: [PATCH] Transition added

---
 src/composables/layoutService.js | 2 +-
 src/layout/AppLayout.vue         | 5 ++---
 src/layout/AppMenuItem.vue       | 8 +++++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/composables/layoutService.js b/src/composables/layoutService.js
index 3b8bf41..2939a5b 100644
--- a/src/composables/layoutService.js
+++ b/src/composables/layoutService.js
@@ -1,4 +1,4 @@
-import { toRefs, reactive, watch, ref, computed } from 'vue';
+import { toRefs, reactive, computed } from 'vue';
 
 const layoutConfig = reactive({
     ripple: false,
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 483263c..917d044 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -16,17 +16,16 @@
 </template>
 
 <script setup>
-import { computed, watch, ref, onMounted } from 'vue';
+import { computed, watch, ref } from 'vue';
 import AppTopbar from './AppTopbar.vue';
 import AppFooter from './AppFooter.vue';
 import AppSidebar from './AppSidebar.vue';
 import AppConfig from './AppConfig.vue';
 import { useLayoutService } from '@/composables/layoutService';
 
-const { onMenuToggle, layoutConfig, layoutState, isSidebarActive } = useLayoutService();
+const { layoutConfig, layoutState, isSidebarActive } = useLayoutService();
 
 const outsideClickListener = ref(null);
-const sidebarActive = ref(false);
 
 watch(isSidebarActive, (newVal) => {
     if (newVal) {
diff --git a/src/layout/AppMenuItem.vue b/src/layout/AppMenuItem.vue
index e06139c..8d748c1 100644
--- a/src/layout/AppMenuItem.vue
+++ b/src/layout/AppMenuItem.vue
@@ -32,9 +32,11 @@ defineProps({
             <span class="layout-menuitem-text">{{ item.label }}</span>
             <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
         </a>
-        <ul v-if="item.items && item.visible !== false">
-            <app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :root="false"></app-menu-item>
-        </ul>
+        <Transition class="layout-submenu">
+            <ul v-if="item.items && item.visible !== false">
+                <app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :root="false"></app-menu-item>
+            </ul>
+        </Transition>
     </li>
 </template>