fix

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

@@ -9,7 +9,8 @@
           v-if="!hideTitleAndIcon && item.icon"
           :class="itemIconClass(item)"
         />
-        <VBtn v-bind="props" block >
+        <VBtn v-bind="props" block    variant="text"
+      color="secondary">
           <VIcon v-if="item.icon" :icon="item.icon.icon" class="mr-2" />{{ item.title }}
         </VBtn>
       </template>
@@ -21,7 +22,7 @@
           class="list-item-reset"
         >
         
-          <VerticalNavLink :item="child" :hideTitleAndIcon="hideTitleAndIcon" :class="item.class" />
+          <VerticalNavLink :item="child" :hideTitleAndIcon="hideTitleAndIcon"  />
         </VListItem>
       </VList>
     </VMenu>
@@ -56,28 +57,41 @@ const itemIconClass = (item) => {
   return item.icon ? item.icon.class : ''
 }
 </script>
-<style scoped>
 
+<style scoped>
+.nav-item {
+  list-style-type: none; /* Removes default list styling */
+  padding: 0; /* Removes default padding */
+}
 
 .list-reset {
   list-style: none; /* Removes bullets or numbers from the list */
   padding: 0; /* Removes default padding */
-  margin: 0px; /* Removes default margin */
+  margin: 0; /* 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 */
+  margin: 0; /* Removes default margin */
 }
+
 .nav-item > .v-menu {
   width: 100%; /* Ensures the menu takes the full width */
 }
-.bottom-end button {
+
+.v-btn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.bottom-end {
     position: fixed;
     width: 100%;
     bottom: 20px;
+    margin-left: 16px;
+
 }
 
-
 </style>