fix

resources/js/@layouts/components/VerticalNav.vue

@@ -5,6 +5,7 @@ VerticalNavGroup,
 VerticalNavLink,
 VerticalNavSectionTitle,
 } from '@layouts/components'
+import VerticalNavDropdown from '@layouts/components/VerticalNavDropdown.vue'
 import { useLayoutConfigStore } from '@layouts/stores/config'
 import { injectionKeyIsVerticalNavHovered } from '@layouts/symbols'
 import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
@@ -44,9 +45,10 @@ const configStore = useLayoutConfigStore()
 const resolveNavItemComponent = item => {
   if ('heading' in item)
     return VerticalNavSectionTitle
+  if ('children' in item && item.isDropdownButton)
+    return VerticalNavDropdown
   if ('children' in item)
     return VerticalNavGroup
-  
   return VerticalNavLink
 }
 
@@ -171,6 +173,7 @@ const hideTitleAndIcon = configStore.isVerticalNavMini(isHovered)
 
     <slot name="after-nav-items" />
   </Component>
+    
 </template>
 
 <style lang="scss" scoped>
@@ -266,4 +269,7 @@ const hideTitleAndIcon = configStore.isVerticalNavMini(isHovered)
     transition: transform 0.25s ease-in-out;
   }
 }
+.v-icon {
+  margin-right: 8px; /* Adds space between the icon and the text */
+}
 </style>