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>

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

@@ -0,0 +1,83 @@
+<template>
+  <li class="nav-item" :class="item.class?item.class:''">
+   
+<div class="demo-space-x">
+    <VMenu transition="scale-transition">
+      <template #activator="{ props }">
+        <Component
+          :is="itemIcon(item)"
+          v-if="!hideTitleAndIcon && item.icon"
+          :class="itemIconClass(item)"
+        />
+        <VBtn v-bind="props" block >
+          <VIcon v-if="item.icon" :icon="item.icon.icon" class="mr-2" />{{ item.title }}
+        </VBtn>
+      </template>
+
+      <VList class="list-reset">
+        <VListItem
+          v-for="(child, index) in item.children"
+          :key="index"
+          class="list-item-reset"
+        >
+        
+          <VerticalNavLink :item="child" :hideTitleAndIcon="hideTitleAndIcon" :class="item.class" />
+        </VListItem>
+      </VList>
+    </VMenu>
+</div>
+  </li>
+</template>
+
+
+<script setup>
+import VerticalNavLink from './VerticalNavLink.vue';
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  hideTitleAndIcon: {
+    type: Boolean,
+    default: false,
+  },
+  hideMarker: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const itemIcon = (item) => {
+  return item.icon.icon ? item.icon.icon  : ''
+}
+
+const itemIconClass = (item) => {
+  return item.icon ? item.icon.class : ''
+}
+</script>
+<style scoped>
+
+
+.list-reset {
+  list-style: none; /* Removes bullets or numbers from the list */
+  padding: 0; /* Removes default padding */
+  margin: 0px; /* Removes default margin */
+}
+
+.list-item-reset {
+  list-style: none; /* Ensures each list item has no bullets or numbers */
+  padding: 0; /* Removes default padding */
+  margin: 0px; /* Removes default margin */
+}
+.nav-item > .v-menu {
+  width: 100%; /* Ensures the menu takes the full width */
+}
+.bottom-end button {
+    position: fixed;
+    width: 100%;
+    bottom: 20px;
+}
+
+
+</style>

resources/js/navigation/vertical/dashboard.js

@@ -56,25 +56,34 @@ export default [
     title: 'Settings',
     icon: { icon: 'ri-settings-4-line' },
     class: 'bottom-end',
+    isDropdownButton: true,
     children: [
       {
         title: 'Profile',
         to: 'admin-profile',
+        icon: {
+        icon: 'ri-group-line',
+        },
+     
         
       },
       {
         title: 'Security',
         to: 'admin-change-password',
-        
+        icon: {
+        icon: 'ri-shield-keyhole-line',
+      },
       },
       {
         title: 'Site Setting',
         to: 'admin-site-setting',
-        
+        icon: {
+        icon: 'ri-settings-4-line',
+      },
       },
     ]  
     
-  },
+  }
   
    
   // {