Transition added

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,

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) {

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>